How to use the Grid in XAML

Let’s start with the basics: The Grid. The grid is probably the control I use the most. It is a container control, so it is used to hold other controls and control how they are arranged on the display.

As the name implies, the grid arranges controls in a grid format. This is different from other container controls, such as the Canvas and Stackpanel (which I’ll discuss more in other posts). The great thing about the grid is the control you have over the height and width of individual rows and columns.

So, to start, here’s a simple grid with square border in it:

Which will show you something like this:

As you can see, this is very basic. Adding rows and columns is where it gets cool. However, you kind of need to have an idea about what you want to do before you create them, as it can be annoying to go back and add or remove rows or columns.

Rows

To add rows, you create a RowDefinitions object inside your grid. Like this:

Which will look like this:

This creates a grid with four rows. I’ve included four different ways of specifying what you want the height of the row to be.

1. The first RowDefinition uses the default height, which just happens to be the same as the second definition; the value “star”. (More on that in a minute)
2. The second RowDefinition specifies a value of “star”. (Be patient, I WILL get to it)
3. The third RowDefinition specifies that the height be 100 units tall.
4. The fourth RowDefinition sets the height to Auto, which means that it will stretch to the height of the object with the greatest height in the row. For example, if there are three controls in the row, one 50px tall, another 75px tall, and the third 100px tall, the row will be 100px tall.

“Star” a.k.a. “*”

Now to address what “*” means. “*” means that it will set the height to whatever amount of  space is left. For example, in the following grid:

Which will look like this:

Since the grid is 500px tall, and the first row is 100px tall, the second row will be 400px tall since that’s the amount of vertical space left in the grid.

One neat thing you can do with “*” is to add a number right in front of the * to specify how much of the free space it gets. For example:

Which will look like this:

In this case, the first row gets two times the height of the second row.

*Important*

In order to get other controls to appear in the desired row, you must include Grid.Row="x" in the properties of the control you want in row “x”. For example:

Another important thing to keep in mind is that when specifying what row you want a control in, the rows are a zero-based. i.e. row “0” is the first row, and row “1” is the second row. So the previous Border will appear in the second row.

Here’s a real-life example of a grid. In this case, I want to make a simple layout to display an album image with the album title below it.

This will end up looking like this:

Columns

Columns are very similar to rows. In fact, you can replace every reference to “Row” with “Column” and every “Height” reference in the RowDefinitions with “Width” in the ColumnDefintions and everything would work . . . just in the horizontal direction. For example, this:

Would look like this:

The End . . . finally

I hope you found this post useful. If you have any questions or comments, feel free to leave a comment.

Here’s the code from this post: TheGrid_Examples