DockPanel In WPF

In this article, you will learn how to use a WPF DockPanel using XAML and C#. A DockPanel is used to dock child elements in the left, right, top, and bottom positions of the relative elements.

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 Dock property is left. The Dock property is of type Dock enumeration that has Left, Right, Top, and Bottom values.
 
The code listed in below creates a DockPanel with five Button elements. Four buttons are docked and the last one has no docking set that fills the entire remaining area.
  1. <DockPanel Name="dcPanel">  
  2.     <Button Name="TopRect" DockPanel.Dock="Top" Background="LightGreen" Height="50" Content="Top" />  
  3.     <Button Name="LeftRect" DockPanel.Dock="Left" Background="LightBlue" Width="50" Content="Left" />  
  4.     <Button Name="RightRect" DockPanel.Dock="Right" Background="LightSalmon" Width="50" Content="Right" />  
  5.     <Button Name="BottomRect" DockPanel.Dock="Bottom" Background="LightCyan" Height="50" />  
  6.     <Button Name="Fill" Background="LightGray" />  
  7. </DockPanel>  
DockPanel in WPF
Figure 1
 
The DockPanel class in WPF represents a DockPanel control. The code listed below creates a Dock Panel dynamically, add five Button controls to it, and sets their docking properties by using SetDock method. The output of Listing generates Figure 1.
  1. private void CreateADockPanelDynamically() {    
  2.     // Create a DockPanel    
  3.     DockPanel dcPanel = new DockPanel();    
  4.     // Create a button    
  5.     Button TopRect = new Button();    
  6.     TopRect.Background = new SolidColorBrush(Colors.LightGreen);    
  7.     TopRect.Height = 50;    
  8.     TopRect.Content = "Top";    
  9.     // Dock button to top    
  10.     DockPanel.SetDock(TopRect, Dock.Top);    
  11.     // Add docked button to DockPanel    
  12.     dcPanel.Children.Add(TopRect);    
  13.     // Create a button    
  14.     Button LeftRect = new Button();    
  15.     LeftRect.Background = new SolidColorBrush(Colors.LightBlue);    
  16.     LeftRect.Width = 50;    
  17.     LeftRect.Content = "Left";    
  18.     // Dock button to left    
  19.     DockPanel.SetDock(LeftRect, Dock.Left);    
  20.     // Add docked button to DockPanel    
  21.     dcPanel.Children.Add(LeftRect);    
  22.     // Create a button    
  23.     Button RightRect = new Button();    
  24.     RightRect.Background = new SolidColorBrush(Colors.LightSalmon);    
  25.     RightRect.Width = 50;    
  26.     RightRect.Content = "Right";    
  27.     // Dock button to left    
  28.     DockPanel.SetDock(RightRect, Dock.Right);    
  29.     // Add docked button to DockPanel    
  30.     dcPanel.Children.Add(RightRect);    
  31.     // Create a button    
  32.     Button BottomRect = new Button();    
  33.     BottomRect.Background = new SolidColorBrush(Colors.LightCyan);    
  34.     BottomRect.Height = 50;    
  35.     BottomRect.Content = "Bottom";    
  36.     // Dock button to left    
  37.     DockPanel.SetDock(BottomRect, Dock.Bottom);    
  38.     // Add docked button to DockPanel    
  39.     dcPanel.Children.Add(BottomRect);    
  40.     // Create a fill button    
  41.     Button FillRect = new Button();    
  42.     BottomRect.Background = new SolidColorBrush(Colors.LightGray);    
  43.     // Add docked button to DockPanel    
  44.     dcPanel.Children.Add(FillRect);    
  45.     RootWindow.Content = dcPanel;    
  46. }  
Listing 1