WPF Layout: DockPanel

Proper layout and positioning are a vital part of interactive, high-performance and user-friendly Windows applications. This series of articles explains the layout process in WPF. The series began with an understanding of the WPF layout process. The next part of this series will cover the basics of layout and positioning such as size, margin, padding and alignment of elements. Later in this series, I will cover various panels and related parent controls available in WPF.

Table of Contents

• WPF Layout System: An Introduction
• WPF Layout: Size, Width and Height
• WPF Layout: Margins
• WPF Layout: Horizontal and Vertical Alignment
• WPF Layout: Content Alignments
• WPF Layout: Dealing with Percentage Size in WPF
• WPF Layout: Panels
• WPF Layout: Canvas
• WPF Layout: DockPanel
• WPF Layout: Grid
• WPF Layout: StackPanel
• WPF Layout: WrapPanel
• WPF Layout: Border
• WPF Layout: VirtualizingStackPanel

Introduction

In the previous article, WPF Layout: Canvas Panel I discussed the canvas panel. This article focuses on the DockPanel in details.

DockPanel

A Dock Panel is used to dock child elements in the left, right, top and bottom positions of the relative elements. The position of child elements is determined by the Dock property of the respective child elements and the relative order of those child elements. The default value of the Dock property is left. The Dock property is of the type Dock enumeration that has Left, Right, Top and Bottom values.

The LastChildFill property represents whether the last child element within a DockPanel stretches to fill the remaining available space.

Here are some of the properties of DockPanels.

• If the LastChildFill property is set to true, the Dock property of the last element will be ignored.
• The Margin is applicable on DockPanels.
  

The GetDock and SetDock methods are used to get and set the dock value of an element.

The code listed in Listing 1 creates a DockPanel with five Button elements. Four buttons are docked and the last one has no docking set and it therefore fills the entire remaining area.

<DockPanel Name="dcPanel">
    <Button Name="TopRect" DockPanel.Dock="Top" Background="LightGreen"
Height="50" Content="Top"/>
    <Button Name="LeftRect" DockPanel.Dock="Left" Background="LightBlue"
Width="50" Content="Left"/>
    <Button Name="RightRect" DockPanel.Dock="Right" Background="LightSalmon"
Width="50" Content="Right"/>
    <Button Name="BottomRect" DockPanel.Dock="Bottom" Background="LightCyan"
Height="50"/>
    <Button Name="Fill" Background="LightGray" />
</DockPanel>

Listing 1

Figure 1

The DockPanel class in WPF represents a DockPanel control. The code listed in Listing 2 creates a Dock Panel dynamically. Add five Button controls to it and set their docking properties using the SetDock method. The output of Listing a generates Figure 1.

private void CreateADockPanelDynamically()
{
    // Create a DockPanel
    DockPanel dcPanel = new DockPanel();

    // Create a button
    Button TopRect = new Button();
    TopRect.Background = new SolidColorBrush(Colors.LightGreen);
    TopRect.Height = 50;
    TopRect.Content = "Top";

    // Dock button to top
    DockPanel.SetDock(TopRect, Dock.Top);
    // Add docked button to DockPanel
    dcPanel.Children.Add(TopRect);

    // Create a button
    Button LeftRect = new Button();
    LeftRect.Background = new SolidColorBrush(Colors.LightBlue);
    LeftRect.Width = 50;
    LeftRect.Content = "Left";

    // Dock button to left
    DockPanel.SetDock(LeftRect, Dock.Left);
    // Add docked button to DockPanel
    dcPanel.Children.Add(LeftRect);

    // Create a button
    Button RightRect = new Button();
    RightRect.Background = new SolidColorBrush(Colors.LightSalmon);
    RightRect.Width = 50;
    RightRect.Content = "Right";

    // Dock button to left
    DockPanel.SetDock(RightRect, Dock.Right);
    // Add docked button to DockPanel
    dcPanel.Children.Add(RightRect);

    // Create a button
    Button BottomRect = new Button();
    BottomRect.Background = new SolidColorBrush(Colors.LightCyan);
    BottomRect.Height = 50;
    BottomRect.Content = "Bottom";

    // Dock button to left
    DockPanel.SetDock(BottomRect, Dock.Bottom);
    // Add docked button to DockPanel
    dcPanel.Children.Add(BottomRect);
    // Create a fill button
    Button FillRect = new Button();
    BottomRect.Background = new SolidColorBrush(Colors.LightGray);

    // Add docked button to DockPanel
    dcPanel.Children.Add(FillRect);
    RootWindow.Content = dcPanel;
}

Listing 2

Summary

In this article, I discussed the DockPanel in WPF. In the next article of this series, I will focus on Grid panels in details.