.NET 4.0+

WPF Layout Controls - DockPanel

by Richard Carr, published at http://www.blackwasp.co.uk/WPFDockPanel.aspx

The tenth part of the Windows Presentation Foundation Fundamentals tutorial looks at another useful layout control. This time it is the DockPanel, which snaps its child controls to its edges. This is ideal for positioning toolbars and status areas.

LastChildFill Property

As you have seen, the last child control fills the remaining space by default. However, you can modify this behaviour using the LastChildFill property. The default value for this property is true. If you set it to false and provide a Dock value for the last control, it will also be docked.

In the modified DockPanel XAML below, the LastChildFill property is false and the final button is docked to the bottom of the panel.

<DockPanel LastChildFill="False">
    <Button Content="Top 1" DockPanel.Dock="Top"/>
    <Button Content="Left 1" DockPanel.Dock="Left"/>
    <Button Content="Left 2" DockPanel.Dock="Left"/>
    <Button Content="Top 2" DockPanel.Dock="Top"/>
    <Button Content="Bottom" DockPanel.Dock="Bottom"/>
</DockPanel>

The results are shown below. The empty area is unused space.

Nesting Layout Controls

As mentioned earlier, DockPanels are often used to hold other layout controls. For example, you might decide to create a toolbar layout by docking a StackPanel containing buttons at the top of a DockPanel. In the final example we'll create such a layout. NB: In most cases using standard buttons is not ideal as WPF includes a ToolBar control, which we'll see later in the tutorial.

<DockPanel>
    <StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Background="Lightblue">
        <Button Content="01" Margin="1"/>
        <Button Content="02" Margin="1"/>
        <Button Content="03" Margin="1 1 10 1"/>
        <Button Content="04" Margin="1"/>
        <Button Content="05" Margin="1"/>
        <Button Content="06" Margin="1"/>
    </StackPanel>

    <StackPanel Orientation="Horizontal"
                DockPanel.Dock="Bottom"
                Background="Lightblue"
                Height="25">
        <TextBlock VerticalAlignment="Center">Processing</TextBlock>
        <ProgressBar Value="75" Width="100" Margin="4"/>
    </StackPanel>
        
    <Grid>
        <TextBlock>Content area</TextBlock>
    </Grid>
</DockPanel>

The above XAML adds StackPanels to the top and bottom of a DockPanel. The top StackPanel gives a toolbar layout with six buttons. The lower StackPanel simulates a status bar with some text and a progress indicator. The Grid control fills the space between the two docked elements, simulating a document editing area.

The above XAML gives the following results when the program is executed.