Windows Phone Fundamentals–Layout

Windows Phone Fundamentals

The Windows Phone From Scratch mini-tutorials are going back to the fundamentals for those who are new to Windows Phone Programming.  Today, we cover basic layout with the Grid Control.

The Grid control is often compared to table-based layout in HTML, but this can be misleading.  While it is true that the table often should not be used in HTML programming, the Grid does not suffer the limitations or bloat of the table, and is an essential layout control for the Phone.

The Grid is the default container for every new Windows Phone project, and for good reason. It provides a specific layout structure for each page, and is flexible enough to stretch and grow as your content changes. Here’s a simple example of a Grid control:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition
            Width="100" />
        <ColumnDefinition
            Width="100" />
        <ColumnDefinition
            Width="100" />
    </Grid.ColumnDefinitions
    <Grid.RowDefinitions>
        <RowDefinition
            Height="100" />
        <RowDefinition
            Height="100" />
    </Grid.RowDefinitions>
    <Rectangle
        Fill="Red"
        Grid.Row="0"
        Grid.Column="0" />
    <Rectangle
        Fill="Orange"
        Grid.Row="0"
        Grid.Column="1" />
    <Rectangle
        Fill="Yellow"
        Grid.Row="0"
        Grid.Column="2" />
    <Rectangle
        Fill="Green"
        Grid.Row="1"
        Grid.Column="0" />
    <Rectangle
        Fill="Blue"
        Grid.Row="1"
        Grid.Column="1" />
    <Rectangle
        Fill="Purple"
        Grid.Row="1"
        Grid.Column="2" />
</Grid>

Within the grid we define columns (with ColumnDefinition tags) and rows (with RowDefinition tags).

We then assign the individual elements to the specific row and/or column that is appropriate. You can have more than one element per table cell, and you can even embed Grids within Grids.

This example is written in Xaml;  and thus is very descriptive and both human and machine readable. However, many times you’re not going to know how many rows your table needs, or even how many elements you’ll have to place in it. In those cases, you can recreate anyXaml element via code in your code-behind file. Here’s what the exact same grid would look like created dynamically in C#. You should notice that it’s significantly more difficult to determine what the end result looks like:

public MainPage()
{
    InitializeComponent();
    Grid newGrid = new Grid();

    newGrid.ColumnDefinitions.Add(
        new ColumnDefinition { Width = new GridLength( 100 ) } );
    newGrid.ColumnDefinitions.Add(
        new ColumnDefinition { Width = new GridLength( 100 ) } );
    newGrid.ColumnDefinitions.Add(
        new ColumnDefinition { Width = new GridLength( 100 ) } );
    newGrid.RowDefinitions.Add(
        new RowDefinition { Height = new GridLength( 100 ) } );
    newGrid.RowDefinitions.Add(
        new RowDefinition { Height = new GridLength( 100 ) } );

    Rectangle r1 = new Rectangle {
       Fill = new SolidColorBrush( Colors.Red ) };
    Grid.SetColumn( r1, 0 );
    Grid.SetRow( r1, 0 );

    Rectangle r2 = new Rectangle {
       Fill = new SolidColorBrush( Colors.Orange ) };
    Grid.SetColumn( r2, 1 );
    Grid.SetRow( r2, 0 );

    Rectangle r3 = new Rectangle {
       Fill = new SolidColorBrush( Colors.Yellow ) };
    Grid.SetColumn( r3, 2 );
    Grid.SetRow( r3, 0 );

    Rectangle r4 = new Rectangle {
       Fill = new SolidColorBrush( Colors.Green ) };
    Grid.SetColumn( r4, 0 );
    Grid.SetRow( r4, 1 );

    Rectangle r5 = new Rectangle {
       Fill = new SolidColorBrush( Colors.Blue ) };
    Grid.SetColumn( r5, 1 );
    Grid.SetRow( r5, 1 );

    Rectangle r6 = new Rectangle {
      Fill = new SolidColorBrush( Colors.Purple ) };
    Grid.SetColumn( r6, 2 );
    Grid.SetRow( r6, 1 );

    newGrid.Children.Add( r1 );
    newGrid.Children.Add( r2 );
    newGrid.Children.Add( r3 );
    newGrid.Children.Add( r4 );
    newGrid.Children.Add( r5 );
    newGrid.Children.Add( r6 );

    LayoutRoot.Children.Add( newGrid );

}

You’ll notice that the Xaml example doesn’t really look like HTML table layouts that you’ve seen in the past. Instead, we’ve separated the content from the layout decisions. We don’t have to wrap each element in a set of table tags. We define a Grid, and then we simply assign each element to a cell of that grid. Please note that the Grid locations start in the top left corner with (0, 0), not (1, 1). We should end up with a layout of six colored boxes, in two rows as shown in the image above.