Overview
Avalon provides a number of options to achieve complex layouts. The framework supports an integrated set of components as part of a single, flexible layout model that has been optimized for content presentation.
The most useful layout elements in XAML are those derived from the Panel class: Canvas, DockPanel, Grid, StackPanel, VirtualizingStackPanel, and WrapPanel. Of these elements, DockPanel, StackPanel, and Grid are arguably the most useful in terms of developing fluid application layouts in Avalon.
|
Element Name |
Description |
|
DockPanel |
Defines an area within which you can arrange child elements either horizontally or vertically, relative to each other. |
|
StackPanel |
Arranges child elements into a single line that can be oriented horizontally or vertically.
|
|
Grid |
Defines a flexible grid area consisting of columns and rows. Child elements of a Grid can be positioned precisely using the Margin property. |
Element names and descriptions taken from Microsoft's WinFX SDK
However, it is also possible to override the default behavior of any of these elements to create other custom components derived from the Panel class.
DockPanel
Below is an example screen layout accomplished using DockPanel. Coupled with the Grid element, this component provides an easy mechanism for managing content on the screen. Using this component, controls may be "docked" to a specific side of a screen or aligned in relation to other screen elements.
<!
-- Window.xaml -->
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowsApplication1" Width="550" Height="400">
<Grid>
<DockPanel>
<Border Height="75" Background="Red" DockPanel.Dock="Top">
<TextBlock>Dock = "Top"</TextBlock>
</Border>
<Border Height="75" Background="Blue" DockPanel.Dock="Bottom">
<TextBlock>Dock = "Bottom"</TextBlock>
</Border>
<Border Width="150" Background="Green" DockPanel.Dock="Left">
<TextBlock>Dock = "Left"</TextBlock>
</Border>
<Border Background="White">
<TextBlock>This content will "Fill" the remaining space</TextBlock>
</Border>
</DockPanel>
</Grid>
</Window>
When compiled, the above example results in the following layout:
Using this approach, developers gain scalability, an additional benefit of Avalon's layout model. Any layout created using the DockPanel element will be enlarged or constrained depending on the parent window's dimensions.
StackPanel
The StackPanel element is used to either "stack" components on top of each other or align them sequentially. Child elements of a StackPanel are displayed as block elements as opposed to being layered on top of each other with incrementing z-indexes. By default, a StackPanel's orientation is vertical.
Below is an example layout using StackPanel.
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowsApplication1" Width="550" Height="400">
<StackPanel Margin="90">
<TextBlock Background="Red" Padding="20">Position 1</TextBlock>
<TextBlock Background="Yellow" Padding="20">Position 2</TextBlock>
<TextBlock Background="Blue" Padding="20">Position 3</TextBlock>
<TextBlock Background="Green" Padding="20">Position 4</TextBlock>
</StackPanel>
</Window>
Compiling this sample results in the following display:
Setting the StackPanel's orientation to horizontal, allows elements to be positioned horizontally:
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowsApplication1" Width="550" Height="400">
<StackPanel Margin="90" Orientation="Horizontal">
<TextBlock Background="Red" Padding="20">Position 1</TextBlock>
<TextBlock Background="Yellow" Padding="20">Position 2</TextBlock>
<TextBlock Background="Blue" Padding="20">Position 3</TextBlock>
<TextBlock Background="Green" Padding="20">Position 4</TextBlock>
</StackPanel>
</Window>
This sample results in the following display:
