#404 – A Grid Hosts Child Controls in Rows and Columns

A Grid is a layout container that positions its child elements into a series of rows and columns.  You specify the number of rows and columns, along with information about their size, in the Grid tag.  You then specify which row and column each control is located in using the Grid.Row and Grid.Column attached properties.

Rows are numbered top to bottom, starting at 0.  Columns are numbered left to right, starting at 0.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0"
               Content="Upper left"/>
        <Label Grid.Row="0" Grid.Column="1"
               Content="Upper right"/>
        <Label Grid.Row="1" Grid.Column="0"
               Content="Lower left"/>
        <Label Grid.Row="1" Grid.Column="1"
               Content="Lower right"/>
    </Grid>