The document discusses different sizing techniques for rows and columns in a WPF Grid layout, including automatic sizing to fit content, absolute sizing with fixed pixel widths and heights, and proportional sizing where available space is divided among rows and columns based on star sizing ratios. Examples are provided for each sizing method. Additionally, the document covers merging and spanning cells using the Grid.ColumnSpan and Grid.RowSpan properties.

1. Grid Layout in WPF
XAML Code
<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>

2. <TextBlock Text="Row2 Column2" Grid.Row="2" Grid.Column="2" FontSize="16"
VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
</Grid>
Sizing
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>

3. <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>
2. Absolute Sizing
In Absolute Sizing, the exact size of the height and width is specified in RowDefinition and ColumnDefinition. The size of
the row and column does not shrink or expand when the size of the Grid/window is changed.
<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>

4. <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>
3. Proportional Sizing
In proportional sizing, the available space is divided proportionally among columns and rows.
For example, I have created 3 columns of width *,*,2*. That means the width of Column0 is 1/4th, the width of column1
is 1/4th and the width of column2 is 2/4th of the grid. In the same way, I have divided the height of the rows. A
proportional-sized row or column shrinks and grows in size on the changing of the grid size.
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>

5. <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>

6. Using a Grid is much similar to working with a table in HTML. We can also merge/span rows and columns using the
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>