The WPF DockPanel

The next container control we need to look at is the DockPanel. It’s a special use control, the individual controls placed inside the DockPanel control can be docked to one of the four sides. Let’s look at an example.

  <DockPanel>

    <Button DockPanel.Dock=Left>Left</Button>

    <TextBlock>Rest of it</TextBlock>

  </DockPanel>

(Note in the code examples I’ve omitted the WINDOW tag, that way you can use this in either Visual Studio or XamlPad) This code produces

wpf016

As you can see, the docked button takes up the entire left side. We could have also set the Dock property to Top, Right, or Bottom. We can have multiple controls with dock property. The order in which they are added is important.

The first control will take up all the space on the docked side first. Then each control will take up the remaining space on the side they are docked on. If multiple controls are docked to the same side, they will be stacked up in the order they were added, the first control being the outermost.

The remaining control added without a dock property will be placed in the middle, and take up all the remaining space. Let’s look at a quick sample that is somewhat realistic.

  <DockPanel>

    <StackPanel DockPanel.Dock=Left>

      <Label>MAIN MENU</Label>

      <Button>Top Left</Button>

      <Button>Left 2</Button>

      <Button>Left 3</Button>

      <Button>Bottom Left</Button>

    </StackPanel>

    <StackPanel DockPanel.Dock=Top Orientation=Horizontal>

      <Label>Secondary Menu</Label>

      <Button>Top Btn 1</Button>

      <Button>Top Btn 2</Button>

    </StackPanel>

    <Grid>

      <Grid.RowDefinitions>

        <RowDefinition></RowDefinition>

        <RowDefinition></RowDefinition>

        <RowDefinition></RowDefinition>

      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>

        <ColumnDefinition></ColumnDefinition>

        <ColumnDefinition Width=2*></ColumnDefinition>

      </Grid.ColumnDefinitions>

      <Label Grid.Row=0 Grid.Column=0 HorizontalAlignment=Right>First Name:</Label>

      <TextBox Grid.Row=0 Grid.Column=1></TextBox>

      <Label Grid.Row=1 Grid.Column=0 HorizontalAlignment=Right>Last Name:</Label>

      <TextBox Grid.Row=1 Grid.Column=1></TextBox>

    </Grid>

  </DockPanel>

Will produce this lovely window:

wpf017

Now you can begin to glean the usefulness of the DockPanel. You should note because the StackPanel with “Secondary Menu” in it is listed in the XAML after the MAIN MENU StackPanel, it is to the right.

If you simply move the secondary StackPanel above the MAIN MENU one in the XAML, you’ll see the Secondary Menu now goes all the way across, and the Main Menu is now playing second fiddle, thusly:

wpf018

You can add more items to the other sides as well, for example you could put some sort of status bar across the bottom, or another panel over on the right.

As you can see, while it’s not a container control you’ll use every day, the DockPanel can be exteremely useful and flexible in Window design.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: