Those people, who have not been following us from the beginning, can go back to start at the beginning.

Grids:

When we talk about grids, the first thing that comes to our mind is the concept of rows and columns. So, grids are basically dividing the whole page into rows and columns. This is the most flexible control in XAML that is used for arranging different elements on different locations on the screen. A grid’s columns and rows make cells and we place elements in these cells.

Example:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*" />
        <RowDefinition Height="50*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*" />
        <ColumnDefinition Width="50*" />
    </Grid.ColumnDefinitions>
    <TextBox Text="1st row 1st column" Grid.Column="0" Grid.Row="0" />
    <Button Content="1st row 2nd column" Grid.Column="1" Grid.Row="0" />
    <TextBox Text="2rd row 1st column" Grid.Column="0" Grid.Row="1" /> 
    <Button Content="2rd row 2nd column" Grid.Column="1" Grid.Row="1" />
</Grid>

The output of the above code is shown below:

In the above code, we have divided the screen into 4 cells of equal height and width, and placed four elements (i.e. textboxes and buttons) in these cells.

To place element(s) in any of the grid cell, we have to write that element after rows and columns definitions and before closing tag of grid i.e.  “</Grid>”. Then write

Grid.Row="1" Grid.Column="1"

as a property of that element as shown below. The button, in this case, will be placed in the bottom right cell (2nd row, 2nd column) of the grid with two rows and two columns.

<Button Content="Submit" Grid.Row="1" Grid.Column="1" />

The value of the “Height” property in “RowDefinition” tag can be given in the following notations:

• Height can be defined as “*” meaning percentage; for example, Height=”40*” and Height=”60*” means that you have divided the screens into 2 rows, one with 40 percent height of the whole screen and the rest 60 percent is allocated to the other row.
• You can use Height=”Auto”, this means that you are currently giving zero height to that row but as you place an element (let’s say a button) in this row then the row automatically sets its height equal to the height of the element placed in it.
• You can also define this property as Height=”200″, which means a height of 200 pixels. But this is not recommended to use because this will not give responsive behavior for the layout.

You can also have multiple grids or StackPanels or any other container or element inside the grid cells. Below is the example of the nested grid and StackPanels inside grids

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*" />
        <RowDefinition Height="50*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*" />
        <ColumnDefinition Width="50*" />
    </Grid.ColumnDefinitions>

    <Grid Grid.Row="1" Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
 
        <TextBox Text="1st row 1st column of child grid" Grid.Column="0" Grid.Row="0" />
        <Button Content="1st row 2nd column of child grid" Grid.Column="1" Grid.Row="0"/>
        <TextBox Text="2nd row 1st column of child grid" Grid.Column="0" Grid.Row="1" />
        <Button Content="2nd row 2nd column of child grid" Grid.Column="1" Grid.Row="1"/> 
    </Grid>
    <TextBox Text="1st row 1st column of parent grid" Grid.Column="0" Grid.Row="0" />
    <TextBox Text="1st row 2nd column of parent grid" Grid.Column="1" Grid.Row="0" /> 
    <Button Content="2rd row 2nd column of parent grid" Grid.Column="1" Grid.Row="1" />
</Grid>

The output for the above code is shown below:

Note: Grid.Row=”0″ means 1st row, as the indices of the rows and columns start with zero.

In the above example, we made a grid with 2 rows and 2 columns, placed another grid in its 2nd row and 1st column (bottom left cell) and created two rows and two columns inside that cell (i.e. nested grid). You can also place StackPanel or any other element inside any of the cell.

Here is the code for the grid having another grid and stackpanel in it:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*" />
        <RowDefinition Height="50*" />
    /Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*" />
        <ColumnDefinition Width="50*" />
    </Grid.ColumnDefinitions>
 
    <Grid Grid.Row="1" Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
 
           <TextBox Text="Row 1, column 1 of child grid" Grid.Column="0" Grid.Row="0"/>
           <Button Content="Row 1,column 2 of child grid" Grid.Column="1" Grid.Row="0"/>
           <TextBox Text="Row 2, column 1 of child grid" Grid.Column="0" Grid.Row="1"/>
           <Button Content="Row 2, column 2 of child grid" Grid.Column="1" Grid.Row="1"/>
        </Grid>
        <StackPanel  Grid.Column="0" Grid.Row="0" >
            <Rectangle Width="200" Height="100" Fill="Green" />
            <Rectangle Width="200" Height="100" Fill="Blue" />
            <Rectangle Width="200" Height="100" Fill="Red" />
        </StackPanel>
        <TextBox Text="Row 1, column 2 of parent grid" Grid.Column="1" Grid.Row="0" />
        <Button Content="Row 2, column 2 of parent grid" Grid.Column="1" Grid.Row="1" />
</Grid>

Now you have seen the use of grids yourself and you may have noticed that grids are very flexible for designing layouts. So practice them and start using them as they are very dynamic in nature.

Thank you for reading 🙂