Using the Silverlight 2 Xaml Grid Element

"The Grid" is basically just that: a grid with a set number of colums and rows. Elements in the grid must then be placed into a cell within the grid by setting the Grid.Column and Grid.Row property of the element in question. To start using a grid you first need to create a grid node.

Here is a simple example:

<Grid Height="200" Width="200" Background="Red"></Grid>

For us to see what is going on, we set the background value to red and then we set a width and height. The width and height set the boundary of our grid. If we don’t set a top and left value. then grid is laid out relative to the top and left of the parent element that it is in. To use a grid we need to add rows and columns inside of it.

<Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions>

This code creates two rows in our grid, but we still need column definitions to actually use the grid. The following code adds 2 columns, which then gives us a grid of 2 rows by 2 columns which then has a total of 4 cells.

<Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions>

With a complete grid we just need to add something to it to be able to actually see how it renders. Lets see what happens if we add a single rectangle to our grid.

The following code sample creates the simple rectangle set to be in the second column and the second row; we also set the fill value to green.

<Rectangle fill="Green" row="1" Column="1" />

Now when we render this xaml you will see that the grid columns are rows are zero based. Zero based means that the first column is 0 and the second column is 1.



Knowing that the grid columns and rows are zero based, we expected the rectangle to be in the lower right position. What we also see from this sample is that by default an element fills the entire grid that it was assigned to. To overwrite this behavior, you would just need to set values for theheight and width. This is the same for top and left values where the default will be to be aligned with the top left of the assigned cell.

Using the same grid, lets remove the old rectangle and add this canvas and textblock.

<Rectangle Fill="Green" Row="0" Column="0"> <Canvas Height="100" Width="100" Background="Blue" Row="1" Column="1" VerticalAlignment="Bottom" HorizontalAlignment="right"> <textblock>Hello</textblock> </Canvas>

In this case, the rectangle is in the top-left cell. However, we now have added a standard canvas with a text area. The canvas is set to have a width and height of just 100 and placed in the lower right cell where we also set the horizontal alignment and vertical alignment. We also set the background to blue so that we can see what is going on.

In this next figure, we can see exactly how the grid lays out the combined set of the elements we have added.

We can also set Margin and ShowGridLines on the Grid element as needed. This allows us add both of these elements as needed. If desired, we could also set height on the row definition and width on the column. This allows us fine control of cell sizes as needed, otherwise, the grid will equalize things for the size it has been given.

Besides setting exact values with height and width, we can set them to auto or * as well. Lastly, elements in a grid can also use Grid.ColumnSpan to allow elements to span more than one column.