WPF Nesting Grids

 in WPF  tagged WPF / grid / panel / grids / nesting / inside / stackpanel by

In this WPF example, I will show how to put two grids inside a “parent” grid. The code is actually very easy. The parent grid has two rows and one column. In each of the rows, we will put another grid. There is a total of three grids in our project, that we will call GridGrid1. The child grids each have two rows and one column. Below is a screenshot of the results of our program.

Here is a code listing. The important thing is to make sure we’ve got the Grid.Row and Grid.Column properties set right.

view source
print?
1<Grid>
2    <Grid.RowDefinitions>
3        <RowDefinition/>
4        <RowDefinition/>
5    </Grid.RowDefinitions>
6    <Grid.ColumnDefinitions>
7        <ColumnDefinition/>
8    </Grid.ColumnDefinitions>
9 
10    <Grid Grid.Row="0" Grid.Column="0">
11        <Grid.RowDefinitions>
12            <RowDefinition/>
13            <RowDefinition/>
14        </Grid.RowDefinitions>
15        <Grid.ColumnDefinitions>
16            <ColumnDefinition/>
17        </Grid.ColumnDefinitions>
18        <Button Grid.Row="0" Grid.Column="0">Hey first grid</Button>
19        <Button Grid.Row="1" Grid.Column="0">Hey first grid row 2</Button>
20    </Grid>
21    <Grid Grid.Row="1" Grid.Column="0">
22        <Grid.RowDefinitions>
23            <RowDefinition/>
24            <RowDefinition/>
25        </Grid.RowDefinitions>
26        <Grid.ColumnDefinitions>
27            <ColumnDefinition/>
28        </Grid.ColumnDefinitions>
29        <Button Grid.Row="0" Grid.Column="0">Second grid first row</Button>
30        <Button Grid.Row="1" Grid.Column="0">Hey 2nd grid second row</Button>
31    </Grid>
32</Grid>

A Grid and a StackPanel inside a 2-Row Grid

In this example we have started with a two-row (one column) grid. In the first row we have placed another grid and in the second row we have placed a StackPanel. The inner grid has two rows and two columns. The StackPnel has four objects in it: two buttons, a label and a button. Here is what it looks like.

Here is the XAML code for the below example.

view source
print?
1<Grid>
2    <Grid.RowDefinitions>
3        <RowDefinition/>
4        <RowDefinition/>
5    </Grid.RowDefinitions>
6    <Grid.ColumnDefinitions>
7        <ColumnDefinition/>
8    </Grid.ColumnDefinitions>
9 
10    <Grid Grid.Row="0" Grid.Column="0">
11        <Grid.RowDefinitions>
12            <RowDefinition/>
13            <RowDefinition/>
14        </Grid.RowDefinitions>
15        <Grid.ColumnDefinitions>
16            <ColumnDefinition/>
17            <ColumnDefinition/>
18        </Grid.ColumnDefinitions>
19        <Button Grid.Row="0" Grid.Column="0">Hey first grid</Button>
20        <Button Grid.Row="1" Grid.Column="0">Hey first grid second row</Button>
21    </Grid>
22     
23    <StackPanel Grid.Row="1" Grid.Column="0">
24        <Button Background="LightGreen">Parent Grid Second Row, Stack Panel 1</Button>
25        <Button Background="LightBlue">Parent Grid Second Row, Stack Panel 2</Button>
26        <Label Content="Label in Stack Panel"/>
27        <Button Content="Button in Stack Panel"/>
28    </StackPanel>
29</Grid>