WPF Layout Basics
Hi all,
Well I've finally decided to kick start my blog so I thought the first thing that I would blog about is WPF Basic Layouts.
These layouts include:
- Stack Panel
- Wrap Panel
- Dock Panel
- Grid
- Uniform Grid
- Canvas
Stack Panel
As the name suggests the stack panel stacks objects; it can stack them either horizontally or vertically:
<StackPanel>
<TextBlock Text="StackPanel with Vertical Orientation"/>
<StackPanel>
<Button Height="20" />
<Button Height="20"/>
<Button Height="20"/>
<Button Height="20"/>
<Button Height="20"/>
<Button Height="20"/>
<Button Height="20"/>
</StackPanel>
<TextBlock Text="StackPanel with Horizontal Orientation"/>
<StackPanel Orientation="Horizontal">
<Button Height="75" Width="20"/>
<Button Height="75" Width="20"/>
<Button Height="75" Width="20"/>
<Button Height="75" Width="20"/>
<Button Height="75" Width="20"/>
<Button Height="75" Width="20"/>
<Button Height="75" Width="20"/>
<Button Height="75" Width="20"/>
<Button Height="75" Width="20"/>
</StackPanel>
</StackPanel>
Wrap Panel
The Wrap Panel is similar to a flow layout, it basically places items horizontally and then wraps the object to next line if the window is not big enough, and this tries to make the most of the real estate by providing a dynamic layout:
<WrapPanel>
<Button Width="75" Height="75"/>
<Button Width="75" Height="75"/>
<Button Width="75" Height="75"/>
<Button Width="75" Height="75"/>
<Button Width="75" Height="75"/>
<Button Width="75" Height="75"/>
<Button Width="75" Height="75"/>
<Button Width="75" Height="75"/>
<Button Width="75" Height="75"/>
</WrapPanel>
Dock Panel
The Dock Panel is a very useful panel that creates a framed layout where you can specify if items belong on the left, right, top, bottom and centre. The order in which you specify the items depends one which ones get the more real estate as shown by the example below:
<StackPanel>
<TextBlock Text="A DockPanel when the Left and Right are set first" />
<DockPanel Height="100">
<Button DockPanel.Dock="Left">Left</Button>
<Button DockPanel.Dock="Right">Right</Button>
<Button DockPanel.Dock="Bottom">Bottom</Button>
<Button DockPanel.Dock="Top">Top</Button>
<Button>Middle</Button>
</DockPanel>
<TextBlock Text="A DockPanel with the Top and Bottom are set first"/>
<DockPanel Height="100">
<Button DockPanel.Dock="Bottom">Bottom</Button>
<Button DockPanel.Dock="Top">Top</Button>
<Button DockPanel.Dock="Left">Left</Button>
<Button DockPanel.Dock="Right">Right</Button>
<Button>Middle</Button>
</DockPanel>
</StackPanel>
Grid
The Grid layout lets you place objects by just setting their properties of Grid.Row and Grid.Column. It also allows you to set the height of the rows and the width of the columns either by pixels , percentage and absolute. The grid is also very flexible when it comes to placing UI elements; you are able to allow the element to take up more than one cell by setting the spanning property of the Grid.
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="175" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0">1</Button>
<Button Grid.Column="1" Grid.Row="0">2</Button>
<Button Grid.Column="2" Grid.Row="0">3</Button>
<Button Grid.Column="0" Grid.Row="1" Grid.RowSpan="2">4</Button>
<Button Grid.Column="1" Grid.Row="1">5</Button>
<Button Grid.Column="2" Grid.Row="1">6</Button>
<Button Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2">8</Button>
</Grid>
Uniform Grid
The Uniform grid is the same as a normal grid however the size of the row and column are the same so that each cell is always the same size. Rather than explicitly stating the row and column the items are displayed in order.
<UniformGrid Rows="5" Columns="3">
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
<Button>5</Button>
<Button>6</Button>
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>10</Button>
<Button>11</Button>
<Button>12</Button>
<Button>13</Button>
<Button>14</Button>
<Button>15</Button>
</UniformGrid>
Canvas
A Canvas layout is where the UI Elements that you want to put on screen have to be given the properties Canvas.Left and Canvas.Top, this means that you essentially can put objects on top of each other and by the ordering of the XAML depends on what is on top, the last Element of the XAML code is the one that sits on top. Every item needs to be explicitly stated its postion.
<Canvas>
<Button Canvas.Top="50" Canvas.Left="20" Height="50" Width="50">1</Button>
<Button Canvas.Top="50" Canvas.Left="80" Width="50" Height="50">2</Button>
<Button Canvas.Top="80" Canvas.Left="50" Height="50" Width="50">3</Button>
<Button Canvas.Top="50" Canvas.Left="50" Height="50" Width="50">4</Button>
<Button Canvas.Top="20" Canvas.Left="50" Height="50" Width="50">5</Button>
</Canvas>