Layout Controls


Canvas Lets you position child controls explicitly by specifying the distances
between their left, top, right, and bottom edges and those of the Canvas.

<Canvas>
<Button Content=”TopLeft” Width=”85” Height=”30”
Canvas.Top=”20” Canvas.Left=”20”/>
<Button Content=”TopRight” Width=”85” Height=”30”
Canvas.Top=”20” Canvas.Right=”20”/>
<Button Content=”BottomLeft” Width=”85” Height=”30”
Canvas.Bottom=”20” Canvas.Left=”20”/>
<Button Content=”BottomRight” Width=”85” Height=”30”
Canvas.Bottom=”20” Canvas.Right=”20”/>
</Canvas>

DockPanel Docks its children to its edges.

<DockPanel LastChildFill=”True”>
<Border DockPanel.Dock=”Top” Background=”LightGreen”>
<Label Content=”1, Top”/>
</Border>
<Border DockPanel.Dock=”Left” Background=”#FFFF00FF”>
<Label Content=”2, Left” >
<Label.LayoutTransform>
<RotateTransform Angle=”-90”/>
</Label.LayoutTransform>
</Label>
</Border>
<Border DockPanel.Dock=”Right” Background=”#FFFFB400”>
<Label Content=”3, Right” >
<Label.LayoutTransform>
<RotateTransform Angle=”90”/>
</Label.LayoutTransform>
</Label>
</Border>
<Border DockPanel.Dock=”Bottom” Background=”Yellow”>
<Label Content=”4, Bottom”/>
</Border>
<Border DockPanel.Dock=”Bottom” Background=”#FF80FFFF”>
<Label Content=”5, Bottom”/>
</Border>
<Border Background=”White”>
<Label Content=”6, None”/>
</Border>
</DockPanel>

Expander Displays a header and an icon that the user can click on to show or hide a
single child control.



Grid Displays children in rows and columns. You can also ignore the rows and
columns and position children somewhat as you can in a Canvas.

<Grid Margin=”5”>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”0.75 in”/>
<ColumnDefinition Width=”2*”/>
<ColumnDefinition Width=”1*”/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=”30”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
</Grid>