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

    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.

    1. <DockPanel Name="dcPanel">
    2. <Button Name="TopRect" DockPanel.Dock="Top" Background="LightGreen"
    3. Height="50" Content="Top"/>
    4. <Button Name="LeftRect" DockPanel.Dock="Left" Background="LightBlue"
    5. Width="50" Content="Left"/>
    6. <Button Name="RightRect" DockPanel.Dock="Right" Background="LightSalmon"
    7. Width="50" Content="Right"/>
    8. <Button Name="BottomRect" DockPanel.Dock="Bottom" Background="LightCyan"
    9. Height="50"/>
    10. <Button Name="Fill" Background="LightGray" />
    11. </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.

    1. private void CreateADockPanelDynamically()
    2. {
    3. // Create a DockPanel
    4. DockPanel dcPanel = new DockPanel();
    6. // Create a button
    7. Button TopRect = new Button();
    8. TopRect.Background = new SolidColorBrush(Colors.LightGreen);
    9. TopRect.Height = 50;
    10. TopRect.Content = "Top";
    12. // Dock button to top
    13. DockPanel.SetDock(TopRect, Dock.Top);
    14. // Add docked button to DockPanel
    15. dcPanel.Children.Add(TopRect);
    17. // Create a button
    18. Button LeftRect = new Button();
    19. LeftRect.Background = new SolidColorBrush(Colors.LightBlue);
    20. LeftRect.Width = 50;
    21. LeftRect.Content = "Left";
    23. // Dock button to left
    24. DockPanel.SetDock(LeftRect, Dock.Left);
    25. // Add docked button to DockPanel
    26. dcPanel.Children.Add(LeftRect);
    28. // Create a button
    29. Button RightRect = new Button();
    30. RightRect.Background = new SolidColorBrush(Colors.LightSalmon);
    31. RightRect.Width = 50;
    32. RightRect.Content = "Right";
    34. // Dock button to left
    35. DockPanel.SetDock(RightRect, Dock.Right);
    36. // Add docked button to DockPanel
    37. dcPanel.Children.Add(RightRect);
    39. // Create a button
    40. Button BottomRect = new Button();
    41. BottomRect.Background = new SolidColorBrush(Colors.LightCyan);
    42. BottomRect.Height = 50;
    43. BottomRect.Content = "Bottom";
    45. // Dock button to left
    46. DockPanel.SetDock(BottomRect, Dock.Bottom);
    47. // Add docked button to DockPanel
    48. dcPanel.Children.Add(BottomRect);
    49. // Create a fill button
    50. Button FillRect = new Button();
    51. BottomRect.Background = new SolidColorBrush(Colors.LightGray);
    53. // Add docked button to DockPanel
    54. dcPanel.Children.Add(FillRect);
    55. RootWindow.Content = dcPanel;
    56. }

    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.