Breaking Down XAML Grid

If you’re looking to use XAML in your project, chances are you’re going to need to use the Grid layout. Even for seasoned pros, Grids can quickly get complicated. This post will go over the Grid basics and can be used as a reference while building or refactoring your XAML Grids.

The first thing you need to determine is the necessary number of rows and columns. Let’s set up an example with 2 columns and 3 rows.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
</Grid>

If you run this code, you won’t see anything. That is because we are just laying down the ground work for our grid, we haven’t given it anything to display. Let’s change that.

  <Grid Background="Pink">
    
    <Grid.ColumnDefinitions>
        <ColumnDefinition  />
        <ColumnDefinition  />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <TextBox Grid.Column="0" Grid.Row ="0" BorderBrush="Black"></TextBox> // 1
    <TextBox Grid.Column="1" Grid.Row ="0" BorderBrush="Black"></TextBox> // 2
    <TextBox Grid.Column="0" Grid.Row ="1" BorderBrush="Black"></TextBox> // 3
    <TextBox Grid.Column="1" Grid.Row ="1" BorderBrush="Black"></TextBox> // 4
    <TextBox Grid.Column="0" Grid.Row ="2" BorderBrush="Black"></TextBox> // 5
    <TextBox Grid.Column="1" Grid.Row ="2" BorderBrush="Black"></TextBox> // 6
  
  </Grid>

We have added a TextBox element for each space in our grid in order to visualize the layout on our page. Each TextBox is arranged by assigning the row and column in a graph coordinate format. Note: each row and column starts with 0.

Here is what our Grid looks like:

The Grid will automatically fill the space it’s in by evenly spacing each row and column. Next, we’ll go over how to control the size of your grid.

<Grid Width="600" Height="300">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="300" />
        <ColumnDefinition Width="300" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="200"/>
    </Grid.RowDefinitions>
</Grid>

Here we have the same Grid layout as before, but you may have noticed we now have Height and Width properties on our Column and Row Definitions. Furthermore, there is some funky syntax in the Height properties of the RowDefinition elements. There are a few different ways you can define height and width:

1. Nothing – Grids will auto fill the space they’re in
2. Integer – Absolute pixel value (ex. 300)
3. * – Divides available space using a weighted factor
4. Auto – Defines space based on the contents

With these height and width definitions, this is what our new grid looks like:

Since the columns are both statically set to 300 pixels, let’s walk through each of the rows in the order they are set by XAML:

Row 3 (blocks 5 and 6) : This row is set first since it is a definitive 200 pixels (like out columns)

Row 2 (blocks 3 and 4): This row is set based on it’s contents. Since it contains nothing, it will be set to the minimum size. If we had an image inside one of the blocks, the row would be the size of the image.

Row 1 (blocks 1 and 2): This row is set last and is given the remaining space of the page.

Great! Now we can define rows and their sizes depending on our project’s need! If you have any questions about getting starting with grids or when to use them, feel free to drop into the comment section.