Understanding of Grids in XAML

Introduction

The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible. A cell can contain multiple controls, they can span over multiple cells and even overlap themselves.

The resize behaviour of the controls is defined by the HorizontalAlignment and VerticalAlignment properties who define the anchors. The distance between the anchor and the grid line is specified by the margin of the control

Define Rows & Columns

The grid has one row and column by default. To create additional rows and columns, you have to add RowDefinition items to the RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection. The following example shows a grid with three rows and two columns.

The size can be specified as an absolute amount of logical units, as a percentage value or automatically.

Fixed

         Fixed size of logical units (1/96 inch)

Auto

        Takes as much space as needed by the contained control

Star (*)

       Takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So 3*/5* means the same as 30*/50*.

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition Height="Auto" />

        <RowDefinition Height="*" />

        <RowDefinition Height="28" />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="Auto" />

        <ColumnDefinition Width="200" />

    </Grid.ColumnDefinitions>

</Grid>

Example: 3 * 3 Grid

<Grid>

  <Grid.Background>

  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

    <GradientStop Color="Black" Offset="0"/>

    <GradientStop Color="#FFE42B2B" Offset="1"/>

  </LinearGradientBrush>

  </Grid.Background>

  

  <Grid.RowDefinitions>

    <RowDefinition Height="*" />

    <RowDefinition Height="*" />

    <RowDefinition Height="*" />

  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>

    <ColumnDefinition Width="*" />

    <ColumnDefinition Width="*" />

    <ColumnDefinition Width="*" />

  </Grid.ColumnDefinitions>

  <TextBlock>1</TextBlock>

  <TextBlock Grid.Column="1">2</TextBlock>

  <TextBlock Grid.Column="2">3</TextBlock>

  <TextBlock Grid.Row="1">4</TextBlock>

  <TextBlock Grid.Row="1" Grid.Column="1">5</TextBlock>

  <TextBlock Grid.Row="1" Grid.Column="2">6</TextBlock>

  <TextBlock Grid.Row="2">7</TextBlock>

  <TextBlock Grid.Row="2" Grid.Column="1">8</TextBlock>

  <TextBlock Grid.Row="2" Grid.Column="2">9</TextBlock>

</Grid>

... and the result is a simple grid with a number in each "cell":

The other thing I want you to notice about this example is that when you don't specify a Grid.Row or Grid.Column, it is assumed to mean the first row (row 0) or first column (column 0). Relying on the defaults keeps your code more concise.

Grid Cell Alignments & Margins

Another example app called AlignmentAndMargins. This XAML:

<Grid>

  <Rectangle Fill="Red"

             Height="100"

             Width="100"

             HorizontalAlignment="Left"

             VerticalAlignment="Top" />

  <Rectangle Fill="Blue"

             Height="100"

             Width="100"

             HorizontalAlignment="Right"

             VerticalAlignment="Bottom" />

  <Rectangle Fill="Green"

             Height="100"

             Width="100"

             HorizontalAlignment="Center"

             VerticalAlignment="Center" />

  <Rectangle Fill="Yellow"

             Height="100"

             Width="100"

             HorizontalAlignment="Left"

             VerticalAlignment="Top"

             Margin="100,100" />

  <Rectangle Fill="White"

             Height="100"

             Width="100"

             HorizontalAlignment="Left"

             VerticalAlignment="Bottom"

             Margin="50,0,0,50" />

</Grid>

Produces this result: