Windows Phone Fundamentals–Layout

Windows Phone Fundamentals

The Windows Phone From Scratch mini-tutorials are going back to the fundamentals for Grid 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.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Essentials, Mango, Mini-Tutorial, WindowsPhone and tagged . Bookmark the permalink.

6 Responses to Windows Phone Fundamentals–Layout

  1. I was recommended this blog via my cousin. I’m no longer sure whether this submit is written by means of him as nobody else recognize such certain about my trouble. You are wonderful! Thank you!

  2. Pingback: Developer series: Windows Phone Fundamentals : wpseven | Windows Phone 7 | WP7

  3. Pingback: Windows Phone Fundamentals–Navigation | WP7 Developers Links

  4. Pingback: Grundkurs mit Jessy Liberty : Canvas & StackPanel « Pocketmobile's Blog

  5. Pingback: Windows Phone Fundamentals – Layout – www.nalli.net

  6. Pingback: Windows Phone Fundamentals–Layout | WP7 Developers Links

Leave a Reply

Your email address will not be published.