Grid
The Grid control is useful for arranging child controls in columns and rows. You can define absolute, proportional, and
autosized row and column geometries for the Grid.
Each child control in the Grid can be positioned in a Grid cell using column and row coordinates. These are
zero-based, and both have a zero default.
If you position multiple child controls in the same cell, they will be drawn in that cell in the sequence they appear
in the XAML. This is another strategy to implement layer stacking besides Panel.
If you omit column and row coordinates for the child controls of a Grid, they will all be drawn in the top left
corner (column=0, row=0).
It is also possible to make a child control span more than one cell in either rows or columns, or both.
Useful Properties
You will probably use these properties most often:
| Property | Description |
|---|---|
| ColumnDefinitions | Size definitions describing the widths of columns in the Grid. |
| RowDefinitions | Size definitions describing the heights of rows in the Grid. |
| ShowGridLines | Shows the gridlines between cells (as dashed lines). |
| Grid.Column | Lays out the control into the specified zero-based column. |
| Grid.Row | Lays out the control into the specified zero-based row. |
| Grid.ColumnSpan | Spans the control across 1 or more columns. |
| Grid.RowSpan | Spans the control across 1 or more rows. |
| Grid.IsSharedSizeScope | Defines the control as the containing scope for a SharedSizeGroup |
Size Definitions
You can define the size of rows and columns as:
- Absolute - sized in device-independent pixels (integer)
- Proportional - sized in proportion to remaining
Gridsize - Automatic - sized to fit the contained child control
Size definitions can be written either as a list of short codes, or fully expanded using XAML elements.
Full definitions support additional constraints such as SharedSizeGroup and specifying minimum and maximum lengths in
absolute sizes.
Absolute Size Definitions
Absolute size definitions are written as integers in the list format. For example:
ColumnDefinitions="200, 200, 300"
Using full expanded XAML, this is the same as:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
Proportional Size Definitions
Proportional size definitions are written as proportions of available Grid space using an
asterisk. For example, to create two columns with the same width and then one with twice the width:
ColumnDefinitions="*, *, 2*"
Using full expanded XAML, this is the same as:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
Size definitions do not support percentages. One trick to overcome this is to create a definition where all proportional
values sum to 100 such as <Grid ColumnDefinitions="25*, 25*, 50*"> for 3 columns with 25%, 25%, and 50% of the remaining
available width.
Automatic Size Definitions
To size a row or column automatically to the largest child control in it, use the code 'Auto'. For example:
RowDefinitions="Auto, Auto, Auto"
Using full expanded XAML, this is the same as:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
If a child control has its own explicitly set dimensions, these will be obeyed when it is drawn. This means that if it is larger than its grid cell, it will overlap adjacent cells.
Mixing Size Definitions
You can mix any of the above in the same size definition sequence. For example:
ColumnDefinitions="200, *, 2*"
Using full expanded XAML, this is the same as:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
Drawing Rules
When calculating sizes, any proportional columns are made to fit in the space left after the absolute and automatic values have been calculated.
The calculation for automatic sizing is made using the outside of the margin layout zone of a child control.
To review the concept of control layout zones, see here.
Child controls are drawn in their assigned grid cells in the sequence they appear in the XAML. This rule governs both what happens when two child controls are assigned the same cell, and how child controls overlap when they are larger than their allotted cell.
When a child control has its own dimensions, and is smaller than its assigned cell, it will be drawn aligned in the cell according to its horizontal and vertical alignment properties (both are centered by default).
Example
This example shows:
- How to use the shortened syntax for column and row definitions.
- How to mix absolute and proportional column widths.
- How to assign the cell for child controls.
- How to span rows and columns.
An example of a Grid with 3 equal Rows and 3 Columns with (1 fixed width), (2 grabbing the rest proportionally) would be:
<Grid ColumnDefinitions="100,1.5*,4*" RowDefinitions="Auto,Auto,Auto" Margin="4">
<TextBlock Text="Col0Row0:" Grid.Row="0" Grid.Column="0"/>
<TextBlock Text="Col0Row1:" Grid.Row="1" Grid.Column="0"/>
<TextBlock Text="Col0Row2:" Grid.Row="2" Grid.Column="0"/>
<CheckBox Content="Col2Row0" Grid.Row="0" Grid.Column="2"/>
<Button Content="SpansCol1-2Row1-2" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
</Grid>
Here, after the absolute width of 100 has been subtracted (for column 0), column 1 will get 1.5 parts and column 2 will get 4 parts of the remaining width.
The button is drawn to fill the span from the cell (column 1, row 1) plus one column (to the right) and one row down. The result looks like this:
More Information
For the complete API documentation about this control, see here.
View the source code on GitHub Grid.cs