Grid Layout

Rows, columns, star and fixed sizing, and row/column spans.

Try in Playground

Overview

The Grid control arranges children in rows and columns. Sizes use a space-separated string: fixed (5), star (*, 2*), or Auto. Children position with Grid.Row/Grid.Column attached properties and can span with Grid.RowSpan/Grid.ColumnSpan. 

<Grid Rows="3 * *" Columns="20 * *">
    <Border Grid.Row="0" Grid.ColumnSpan="3" BorderStyle="Single">
        <TextBlock Text="Row=0 ColSpan=3 (Fixed 3)" />
    </Border>

    <Border Grid.Row="1" Grid.Column="0" BorderStyle="Rounded">
        <TextBlock Text="R1 C0 (20w)" />
    </Border>

    <Border Grid.Row="1" Grid.Column="1" BorderStyle="Rounded">
        <TextBlock Text="R1 C1 (*)" />
    </Border>

    <Border Grid.Row="1" Grid.Column="2" Grid.RowSpan="2"
            BorderStyle="Rounded" Background="#00005F">
        <TextBlock Text="R1 C2 RowSpan=2" />
    </Border>

    <Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
            BorderStyle="Rounded" Background="#005F00">
        <TextBlock Text="R2 C0 ColSpan=2" />
    </Border>
</Grid>

Key Concepts