#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>

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

One Response to #385 – You Can Nest Panel Controls

  1. Pingback: Link Resource # 25: Sept 12–Sept 24 « Dactylonomy of Web Resource

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: