Wahlin on .NET

Using Silverlight's Grid Control

Grid control works a lot like the table tag -- only it's much more concise. Dan walks through one example.

• By Dan Wahlin
• 08/18/2008

Fortunately, if you're coming from a Web development background, you'll find Silverlight's Grid control easy to use and quick to comprehend because it's similar to what you've already been using. It acts much like HTML's table tag and allows data and controls to be arranged in a tabular-style view.

The Grid control allows rows and columns to be defined much more concisely compared to HTML. With the HTML table tag, you're forced to repeat multiple tr and td tags to create rows and columns. The Grid control allows rows and column information to be defined in one location using RowDefinition and ColumnDefinition tags.

An example of XAML code that creates a simple Grid with two rows and two columns is shown next:

<Grid x:Name="myTable" Background="White" 
  ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".25*" />
        <ColumnDefinition Width=".75*" />
    </Grid.ColumnDefinitions>        
</Grid>

This example sets the Grid's ShowGridLines attribute to True, which is nice for seeing the initial layout of a Grid control. Figure 1 shows how the Grid looks in Visual Studio 2008 when ShowGridLines is set to True.

The XAML code also sets the first row's height to 100 pixels and the second row's height to the remaining space available in the user interface When you use the * character to define a row height, you're essentially telling the Grid to assign the row 100 percent of the remaining space. You could also omit the Height attribute entirely in this case and achieve the same effect. In addition to the row definitions, the two columns defined have widths of 25 percent and 75 percent, respectively.

It's important to note that the ColumnDefinition tag's Width attribute and RowDefinition tag's Height attribute don't accept the typical values assigned to HTML tr and td tags. For example, assigning the Width attribute a value of 25 percent will result in an error.

If you've spent a lot of time creating Web pages, you may struggle with this initially (I know I did!) since using the % character is so common in HTML and CSS. In Silverlight, percentage-based widths are assigned by defining a decimal value between 0 and 1 followed by the * character. However, you can also assign whole numbers such as 1* and 9* for 10 percent and 90 percent, respectively.

In addition to numeric values, the Height and Width attributes also accept a value of Auto, which causes the appropriate row or column to automatically figure out its size based on available space.

Once rows and columns are defined, controls can be placed inside a Grid using Grid.Row and Grid.Column attributes. The following XAML shows how four TextBlock controls can be defined and assigned to different rows and columns of a Grid:

<Grid x:Name="myTable" Background="White" 
  ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".25*" />
        <ColumnDefinition Width=".75*" />
    </Grid.ColumnDefinitions>
    <TextBlock Text="0,0" Grid.Row="0" 
       Grid.Column="0" Margin="5" />
    <TextBlock Text="0,1" Grid.Row="0" 
       Grid.Column="1" Margin="5"  />
    <TextBlock Text="1,0" Grid.Row="1" 
       Grid.Column="0" Margin="5"  />
    <TextBlock Text="1,1" Grid.Row="1" 
       Grid.Column="1" Margin="5"  />
</Grid>

Figure 2 shows what the Grid control and associated child controls look like at runtime:

In situations where you need a control to span multiple rows or columns, you can use the Grid.RowSpan or Grid.ColumnSpan attributes. For example, the following button would be placed in the first row and span two columns:

<Button Content="Button" Grid.Row="0"
   Grid.ColumnSpan="2" />

In summary, the Grid control provides a simple way to arrange controls on a user interface with minimal coding on your part. In cases where you need additional layout flexibility -- such as arranging controls vertically or horizontally within a Grid cell -- you can also combine layout controls such as the StackPanel (covered in a previous article) with the Grid.