Layout | Professional C# 2005 with .NET 3.0

For defining the layout of the application, you can use a class that derives from the Panel base class. Several layout containers are available that are discussed here.

StackPanel

The Window can contain just a single element as content. If you want to have more than one element inside there, you can use a StackPanel as a child of the Window, and add elements to the content of the StackPanel. The StackPanel is a simple container control that just shows one element after the other. The orientation of the StackPanel can be horizontal or vertical. The class ToolBarPanel is derived from StackPanel.

 <Window x:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="Layout Samples" Height="300" Width="283">   <StackPanel>     <Label>Label</Label>     <TextBlock>TextBlock</TextBlock>     <TextBox>TextBox</TextBox>     <Button>Button</Button>     <CheckBox>Checkbox</CheckBox>     <ListBox>       <ListBoxItem>ListBoxItem One</ListBoxItem>       <ListBoxItem>ListBoxItem Two</ListBoxItem>     </ListBox>   </StackPanel> </Window>

You can see the child controls of the StackPanel organized vertically in Figure 31-12.

image from book
Figure 31-12

WrapPanel

The Wrap Panel positions the children from left to right one after the other as long as they fit into the line, and then continues with the next line. The orientation of the panel can be horizontal or vertical.

 <Window x:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="Layout Samples" Height="160" Width="250">   <WrapPanel>     <Button Width="100">Button</Button>     <Button Width="100">Button</Button>     <Button Width="100">Button</Button>     <Button Width="100">Button</Button>     <Button Width="100">Button</Button>     <Button Width="100">Button</Button>     <Button Width="100">Button</Button>     <Button Width="100">Button</Button>   </WrapPanel> </Window>

Figure 31-13 shows the output of the panel. If you resize the application, the buttons will be rearranged so that they fit into a line.

image from book
Figure 31-13

Canvas

Canvas is a panel that allows explicitly positioning of controls. Canvas defines the attached properties Left, Right, Top, and Bottom that can be used by the children for positioning within the panel.

 <Window x:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="Layout Samples" Height="300" Width="300">   <Canvas Background="LightBlue">     <Label Canvas.Top="30" Canvas.Left="20">Enter here:</Label>     <TextBox Canvas.Top="30" Canvas.Left="130" Width="100"></TextBox>     <Button Canvas.Top="70" Canvas.Left="130">Click Me!</Button>   </Canvas> </Window>

Figure 31-14 shows the output of the Canvas panel with the positioned children Label, TextBox, and Button.

image from book
Figure 31-14

DockPanel

The DockPanel is very similar to the Windows Forms docking functionality. Here, you can specify the area where child controls should be arranged. DockPanel defines the attached property Dock, which you can set in the children of the controls to the values Left, Right, Top, and Bottom. Figure 31-15 shows the outcome of text blocks with borders that are arranged in the dock panel. For easier differentiation, different colors are specified for the various areas.

 <Window x:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="Layout Samples" Height="300" Width="300">   <DockPanel Background="LightBlue">     <Border Height="25" Background="AliceBlue" DockPanel.Dock="Top">       <TextBlock>Menu</TextBlock>     </Border>     <Border Height="25" Background="Aqua" DockPanel.Dock="Top">       <TextBlock>Toolbar</TextBlock>     </Border>     <Border Height="30" Background="LightSteelBlue" DockPanel.Dock="Bottom">       <TextBlock>Status</TextBlock>     </Border>     <Border Width="80" Background="Azure" DockPanel.Dock="Left">       <TextBlock>Left Side</TextBlock>     </Border>     <Border Background="HotPink">       <TextBlock>Remaining Part</TextBlock>     </Border>   </DockPanel> </Window>

image from book
Figure 31-15

Grid

Using the Grid you can arrange your controls with rows and columns. For every column, you can specify a ColumnDefinition, and for every row a RowDefinition. The sample code lists two columns and three rows. With each column and row, you can specify the width or height. ColumnDefinition has a Width dependency property; RowDefinition has a Height dependency property. You can define the height and width in pixels, centimeters, inches, or points, or by setting it to Auto to determine the size depending on the content. The grid also allows star sizing whereby the space for the rows and columns is calculated according to the available space and relative to other rows and columns. When providing the available space for a column, you can set the Width property to *; to have the size doubled for another column, you specify 2*. The sample code, which defines two columns and three rows, doesn’t define additional settings with the column and row definitions; the default is the star setting.

The grid contains several Label and TextBox controls. Because the parent of these controls is a grid, you can set the attached properties Column, ColumnSpan, Row, and RowSpan.

 <Window x:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="Layout Samples" Height="300" Width="283">   <Grid ShowGridLines="True">     <Grid.ColumnDefinitions>       <ColumnDefinition />       <ColumnDefinition />   </Grid.ColumnDefinitions>   <Grid.RowDefinitions>     <RowDefinition />     <RowDefinition />     <RowDefinition />   </Grid.RowDefinitions>   <Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"       VerticalAlignment="Center" HorizontalAlignment="Center">Title</Label>   <Label Grid.Column="0" Grid.Row ="1" VerticalAlignment="Center">         Firstname:</Label>     <TextBox Grid.Column="1" Grid.Row="1" Width="100" Height="30"></TextBox>     <Label Grid.Column="0" Grid.Row ="2" VerticalAlignment="Center">         Lastname:</Label>     <TextBox Grid.Column="1" Grid.Row="2" Width="100" Height="30"></TextBox>   </Grid> </Window>

The outcome arranging controls in a grid is shown in Figure 31-16. For easier viewing of the columns and rows, the property ShowGridLines is set to true.

image from book
Figure 31-16

Tip

For a grid where every cell has the same size, you can use the UniformGrid class.