The Grid is the Panel control (Layout) which Will arrange his child based on their row and column affiliation. It is like the table in HTML, but more simple and developer friendly. You can find most of the functionality of the HTML table like defining the column width and row height, the overlap of column and row, padding, cell internal alignment…
The Grid like all the Panel control have HorizontalAlignment and VerticalAlignment property to define the size of the object and also a margin property to define the space between the parent control and the Grid.
<Grid VerticalAlignment=”Stretch” HorizontalAlignment=”Stretch”>
<TextBlock >Text in the grid</TextBlock>
</Grid>
The grid has one row and one column by default. To create additional rows and columns, you have to add RowDefinitions collection and ColumnDefinitions collection. The size of the definitions can be specified as an absolute amount of logical units, as a percentage value or automatically.
| Pixel | Fixed size of logical units (1/96 inch) |
| “Auto” | Takes as much space as needed by the contained control |
| “*” | Takes as much space as available, divided over all star-sized columns. For example if you have the following * and 2*, the second column size will be twice then the first one. |
You can also set a MinWidth and MaxWidth to set the min and max size of the row or column.
Check the following example.
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="50" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<TextBlock Background="LightBlue" >Row 0 | Col 0</TextBlock>
<TextBlock Grid.Column="1" Background="LightYellow" >Row 0 | Col 1</TextBlock>
<TextBlock Grid.Column="2" Background="LightGreen" >Row 0 | Col 2</TextBlock>
<TextBlock Grid.Row="1" Background="LightCyan" >Row 1 | Col 0</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" Background="LightPink" >Row 1 | Col 1</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2" Background="LightSeaGreen" >Row 1 | Col 2</TextBlock>
</Grid>
Grid Splitter
WPF propose also a control that allow user to resize parts of the grids at their will, the GridSplitter. Using the property ResizeDirection (or ResizeBehavior), you can define the which parts are resizable, the rows or the columns. Using the property ShowsPreview, you can define the UI behavior of the GridSplitter.
Check the two articles in MSDN How to: Resize Rows with a GridSplitter and How to: Resize Columns with a GridSplitter
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Background="LightGreen">Text in 0:0</TextBlock>
<GridSplitter
Grid.Column="1"
ResizeDirection="Columns"
Width="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Blue" />
<TextBlock Grid.Column="2" Background="LightBlue">Text in 1:0</TextBlock>
</Grid>
