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.
- <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()
- {
-
- DockPanel dcPanel = new DockPanel();
-
-
- Button TopRect = new Button();
- TopRect.Background = new SolidColorBrush(Colors.LightGreen);
- TopRect.Height = 50;
- TopRect.Content = "Top";
-
-
- DockPanel.SetDock(TopRect, Dock.Top);
-
- dcPanel.Children.Add(TopRect);
-
-
- Button LeftRect = new Button();
- LeftRect.Background = new SolidColorBrush(Colors.LightBlue);
- LeftRect.Width = 50;
- LeftRect.Content = "Left";
-
-
- DockPanel.SetDock(LeftRect, Dock.Left);
-
- dcPanel.Children.Add(LeftRect);
-
-
- Button RightRect = new Button();
- RightRect.Background = new SolidColorBrush(Colors.LightSalmon);
- RightRect.Width = 50;
- RightRect.Content = "Right";
-
-
- DockPanel.SetDock(RightRect, Dock.Right);
-
- dcPanel.Children.Add(RightRect);
-
-
- Button BottomRect = new Button();
- BottomRect.Background = new SolidColorBrush(Colors.LightCyan);
- BottomRect.Height = 50;
- BottomRect.Content = "Bottom";
-
-
- DockPanel.SetDock(BottomRect, Dock.Bottom);
-
- dcPanel.Children.Add(BottomRect);
-
- Button FillRect = new Button();
- BottomRect.Background = new SolidColorBrush(Colors.LightGray);
-
-
- 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.