#385 – You Can Nest Panel Controls

An application is typically composed of a top-level panel control that contains other panels, creating a hierarchy of panels that defines the layout of your GUI.

Here’s an example, with the top-level container being a three-row Grid that contains a StackPanel in the 1st row, a 2×2 Grid in the 2nd row, and another StackPanel in the 3rd row.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
            <Label Content="Enter your name:"/>
            <TextBox Width="150"/>
        </StackPanel>

        <!-- 2x2 grid for main app content -->
        <Grid Grid.Row="1" >
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Button Content="Something here" Grid.Row="0" Grid.Column="0"/>
            <Label Content="Other stuff here" Grid.Row="1" Grid.Column="1"/>
        </Grid>

        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="OK" Margin="10,5"/>
            <Button Content="Cancel" Margin="10,5"/>
        </StackPanel>
    </Grid>