WPF Control Layout - Grid
(Page 5 of 5 )
The final layout control we'll be looking at is the Grid control. The Grid control behaves exactly as its name implies: it consists of a grid with rows and columns defined by the user, and each control occupies a cell within the grid. Each control has a row and a column, and a control can also have a row span and a column span in order to occupy multiple cells.
Below, four buttons are arranged in a Grid with two rows and two columns:
There are two steps involved in creating a Grid of controls. First, the rows and columns must be defined. Then, the controls are created. Controls can be placed in an individual cell using Grid.Row and Grid.Column attributes. The controls and layout in the above picture can be produced with the following XAML, which shows both steps necessary to create a functional Grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Content="Button 1" />
<Button Grid.Row="0" Grid.Column="1" Content="Button 2" />
<Button Grid.Row="1" Grid.Column="0" Content="Button 3" />
<Button Grid.Row="1" Grid.Column="1" Content="Button 4" />
</Grid>
Note that in the above example, the Grid is stretched (by default) to fit the entire Page, and the controls are stretched to fit the entire cell of the Grid. This can, of course, be changed with the HorizontalAlignment and VerticalAlignment process, but I won't bother spending time on that, since you should know the process by now. Also, the first row is the zero row, and the first column is the zero column.
Notice how the RowDefinition and ColumnDefinition attributes have no attributes. Ordinarly, however, the rows are given a height, and the columns are given a width. Below, we make rows 30 pixels high and columns 100 pixels wide:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Content="Button 1" />
<Button Grid.Row="0" Grid.Column="1" Content="Button 2" />
<Button Grid.Row="1" Grid.Column="0" Content="Button 3" />
<Button Grid.Row="1" Grid.Column="1" Content="Button 4" />
</Grid>
Instead of providing a specific measurement, however, a control can be made to take up all of the available space (or divide it up among other controls) with this setting:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Content="Button 1" />
<Button Grid.Row="0" Grid.Column="1" Content="Button 2" />
<Button Grid.Row="1" Grid.Column="0" Content="Button 3" />
<Button Grid.Row="1" Grid.Column="1" Content="Button 4" />
</Grid>
As mentioned earlier, a control can also span multiple rows:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
Content="Button 1" />
<Button Grid.Row="0" Grid.Column="1" Content="Button 2" />
<Button Grid.Row="1" Grid.Column="1" Content="Button 3" />
</Grid>
A control can also span multiple columns (the row and column definitions are the same for this example):
<Grid>
...
<Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Content="Button 1" />
<Button Grid.Row="1" Grid.Column="0" Content="Button 2" />
<Button Grid.Row="1" Grid.Column="1" Content="Button 3" />
</Grid>
Now you've learned about five layout elements in WPF: Canvas, StackPanel, WrapPanel, DockPanel, and Grid. Using one of these five elements, or a combination of several of them, you can achieve some complex control arrangements that will fit any application. The only thing left is to decide what elements to apply, but I'll leave that up to you.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
