Using the Grid control in Silverlight

This article is compatible with the latest version of Silverlight.

Introduction

The Grid is a layout control used as a container for other Silverlight controls. It acts like a table in HTML but there are many differences in the markup representation.

Overview

The following example demonstrates how to use a Grid and how to create rows and columns:

We want to have the following table structure:

The most important thing about the Grid is how to define its RowDefinitions and ColumnDefinitions collections and how to specify to which row and column every control in the Grid belongs.

Here is the XAML code:

Note: We set the ShowGridLines="True" This indicates that the grid lines will be visible. You can always set this property to False if you want to hide the grid lines.

For every row in the Grid we have a RowDefinition element. All row definitions are enclosed in a Grid.RowDefinitions element. Our first two rows are 50 pixels high and Height of the third one is set to “*”. This indicates that the row will take the whole place in the Grid which is not taken by the other rows.

Respectively for every column in the Grid we have a ColumnDefinition element. All column definitions are enclosed in a Grid.ColumnDefinitions element. Our first two columns are 100 pixels wide and the last one is 50px. The third column takes the free space because its width is set to “*”.

We can also use proportional sizing for both columns and rows. For example we can set the column sizes as follows:

Thus our columns will be in a proportion 2:2:5:1 and the user control will look like this:

You can adjust the proportions of the row heights in the same way.

Another option is to set the width and/or the height to “auto”. This way every column/row changes its size so as to match the width/height of the controls in it. For example:

Omitting the width and/or height properties makes all columns and rows the same size:

In comparison with HTML the items in the markup are outside the row definitions and column definitions. For every control in the table you can set the attached properties Grid.Row and Grid.Column to indicate the index of the row and column where the control will be placed. We have two controls in our table, one Button and one Rectangle. The button is placed in the first row (index 0) and the first column (index 0). The rectangle is placed in the third row and the second column.

Instead of setting the exact width for every column and height for every row you can use the alternative MinWidth / MaxWidth and MinHeight / MaxHeight properties. The following example demonstrates it:

You see that the first column takes its MaxWidth 150 pixels in spite of the fact that the Button in it is 200 pixels wide. You also see that the third column takes its MinWidth though there is nothing in it.

Please be careful using these properties because they depend on the neighboring columns/rows. The following example demonstrates it:

Removing the “Auto” width from the second, third and fourth column results in the following:

It seems that the MinWidth and MaxWidth are not taken into consideration at all.

They also depend on the combination of properties in the current column/row.

We just put an Auto Width for the first column too and the result is the following:

It seems that the MinWidth for the third column works but the MaxWidth for the first column does not with Auto width.

So just be careful using these properties.

What we can do if we want our button to be placed is several cells?

Another opportunity that you have is to set the Grid.ColumnSpan and Grid.RowSpan attached properties for every control in the Grid.

This acts just like the colspan and rowspan attributes of the HTML table cell with the difference that in Silverlight we set these properties to the control. The cool thing here is that these properties act per control and don’t make the table cell bigger. We can put other controls without these two properties and it will be positioned the way it has to be. For example we can put a TextBlock in the first cell:

Have you noticed the two new properties of the TextBlock we just added - the horizontal and vertical alignment of the control according to the cell boundaries? We omitted them in the Button and the Rectangle because they are set to “Center” by default for them.

You can get or set the “Grid.Row”, “Grid.Column”, “Grid.RowSpan” and “Grid.ColumnSpan” attached properties programatically using the static methods of the Grid class.

The following example demonstrates it:

Code behind:

XAML:

Result:

Here is another example where we get these properties and increase them:

The result is the same.

Conclusion

This article is just a brief description of the key features of the Grid control. It targets the developer who has just started with the Silverlight controls. Any comments are welcome.

Reference

http://silverlight.net/learn/tutorials.aspx
http://msdn2.microsoft.com/en-us/library/system.windows.controls.grid(VS.95).aspx