Grid Layout in WPF

Grid is most powerful and useful Layout in WPF. It enables you to arrange children elements in cells defined by rows and columns. In fact, When we add a new XAML document or Create new WPF Project in Visual Studio, Visual Studio automatically add Grid as the First container inside window element.

We can create Rows and Columns in two way:

1) By typing XAML Code:
By default, Grid has one Row and one column. We can add more rows and columns by Adding RowDefinition Element for each row inside Grid.RowDefinitions property and ColumnDefinition Element for each column inside Grid.ColumnDefinitions property. By default, GridLines are invisible. For showing the GridLines, set ShowGridLines property of Grid to True. GridLines are helpful during debugging for finding which element is in which Cell.

Let's understand it with a simple example. In this Example, We have created 3 Rows and 3 Columns. Then added 9 TextBlock and maintaing TextBlock position inside the grid by specifying the Grid.Row and Grid.Column value. If we don't specify Grid.Row and Grid.Column property then Element is placed in Grid.Row="0" and Grid.Column="0" i.e. in First Row and First Column.

<Window x:Class="GridLayoutExample1.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="MainWindow" Height="350" Width="525">     <Grid ShowGridLines="True">         <Grid.ColumnDefinitions>             <ColumnDefinition></ColumnDefinition>             <ColumnDefinition></ColumnDefinition>             <ColumnDefinition></ColumnDefinition>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition></RowDefinition>             <RowDefinition></RowDefinition>             <RowDefinition></RowDefinition>         </Grid.RowDefinitions>         <TextBlock Text="Row0 Column0" Grid.Row="0" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row0 Column1" Grid.Row="0" Grid.Column="1" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row0 Column2" Grid.Row="0" Grid.Column="2" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row1 Column0" Grid.Row="1" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row1 Column1" Grid.Row="1" Grid.Column="1" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row1 Column2" Grid.Row="1" Grid.Column="2" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row2 Column0" Grid.Row="2" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row2 Column1" Grid.Row="2" Grid.Column="1" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row2 Column2" Grid.Row="2" Grid.Column="2" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>     </Grid> </Window>

Preview:

2) By Clicking on Margin:

We can control Column's width and Row's height in 3 ways:
1)Automatic Sizing:
Rows and Columns are sized automatically to fit the content/child element.

Example:

<Grid ShowGridLines="True">         <Grid.ColumnDefinitions>             <ColumnDefinition Width="auto"></ColumnDefinition>             <ColumnDefinition Width="auto"></ColumnDefinition>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition Height="auto"></RowDefinition>             <RowDefinition Height="auto"></RowDefinition>         </Grid.RowDefinitions>         <Button Content="Row0 column0" FontSize="16" Grid.Row="0" Grid.Column="0"></Button>         <Button Content="Row0 column1" FontSize="16" Grid.Row="0" Grid.Column="1"></Button> </Grid>

Preview:

2) Absolute Sizing:
In Absolute Sizing, Exact size of Height and width is specified in RowDefinition and ColumnDefinition. Size of Row and Column does not shrink or expand on changing the size of Grid/window.

<Grid ShowGridLines="True">         <Grid.ColumnDefinitions>             <ColumnDefinition Width="200"></ColumnDefinition>             <ColumnDefinition Width="325"></ColumnDefinition>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition Height="100"></RowDefinition>             <RowDefinition Height="100"></RowDefinition>             <RowDefinition Height="150"></RowDefinition>         </Grid.RowDefinitions>         <TextBlock Text="Row0 Column0" Grid.Row="0" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row0 Column1" Grid.Row="0" Grid.Column="1" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row1 Column0" Grid.Row="1" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row1 Column1" Grid.Row="1" Grid.Column="1" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row2 Column0" Grid.Row="2" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>         <TextBlock Text="Row2 Column1" Grid.Row="2" Grid.Column="1" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock> </Grid>

Preview:

3) Proportional Sizing: In proportional sizing, available space is divided proportionally among columns and Rows.
For Example, I have created 3 columns of width *,*,2* which means width of Column0 is 1/4th,width of column1 is 1/4th and width of column2 is 2/4th of the grid. In same way, I have divided the height of Rows. A proportional-sized row or column shrinks and grows in size on changing grid size.

<Grid ShowGridLines="True">         <Grid.ColumnDefinitions>             <ColumnDefinition Width="*"></ColumnDefinition>             <ColumnDefinition Width="*"></ColumnDefinition>             <ColumnDefinition Width="2*"></ColumnDefinition>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition Height="*"></RowDefinition>             <RowDefinition Height="3*"></RowDefinition>         </Grid.RowDefinitions>         <TextBlock Text="Row0 Column0" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>         <TextBlock Text="Row0 Column1" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>         <TextBlock Text="Row0 Column2" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>         <TextBlock Text="Row1 Column0" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>         <TextBlock Text="Row1 Column1" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>         <TextBlock Text="Row1 Column2" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> </Grid>

Preview:

Using Grid is much similar like working with table in HTML. We can also merge/span rows and columns using Grid.ColumnSpan and Grid.RowSpan property.

<Grid ShowGridLines="True">         <Grid.ColumnDefinitions>             <ColumnDefinition Width="*"></ColumnDefinition>             <ColumnDefinition Width="*"></ColumnDefinition>             <ColumnDefinition Width="*"></ColumnDefinition>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition Height="*"></RowDefinition>             <RowDefinition Height="*"></RowDefinition>             <RowDefinition Height="2*"></RowDefinition>         </Grid.RowDefinitions>         <TextBlock Text="Merging top 3 Cells" Grid.ColumnSpan="3" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18"></TextBlock>         <TextBlock Text="Rowspan=2" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18"></TextBlock>         <TextBlock Text="Rowspan=2 Colspan=2" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18"></TextBlock> </Grid>

Preview:

I hope you like it. Thanks.

[Download Source Code via Google Drive]