Post
Ask Question

DockPanel in WPF

A DockPanel is a panel where each child element docks to one of the four edges. DockPanel enables docking of child elements to an entire side of the panel streching it to fill the entire height or width.

Let's begin and create various layouts using DockPanel.

In the first example, I have added 6 buttons to a DockPanel. By default, elements inside the DockPanel dock towards the left and the last element inside the panel expands to fill the remaining space inside the panel.
  1. <Window x:Class="DockPanelExample1.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="DockPanel Example" Height="350" Width="525">  
  5.     <DockPanel>  
  6.         <Button Content="Button1"></Button>  
  7.         <Button Content="Button2"></Button>  
  8.         <Button Content="Button3"></Button>  
  9.         <Button Content="Button4"></Button>  
  10.         <Button Content="Button5"></Button>  
  11.         <Button Content="Button6"></Button>  
  12.     </DockPanel>  
  13. </Window>  
Preview

 
 
We can prevent or turn off the last child element to fill the remaining space by setting the LastChildFill property to False.
  1. <DockPanel LastChildFill="False">  
  2.         <Button Content="Button1"></Button>  
  3.         <Button Content="Button2"></Button>  
  4.         <Button Content="Button3"></Button>  
  5.         <Button Content="Button4"></Button>  
  6.         <Button Content="Button5"></Button>  
  7.         <Button Content="Button6"></Button>  
  8. </DockPanel>  
Preview

 
 
We can dock an element on an edge other than Left (which is the default) by using the DockPanel.Dock property. For example, If we want to dock a button to the top of the DockPanel, we need to set DockPanel.Dock="Top" in the Button element. This will stretch the button to the entire width of the DockPanel but the height is set depending on the content of it or the MinHeight property.
  1. <DockPanel>  
  2.         <Button Content="Button1" DockPanel.Dock="Top"></Button>  
  3.         <Button Content="Button2" DockPanel.Dock="Bottom"></Button>  
  4.         <Button Content="Button3" DockPanel.Dock="Left"></Button>  
  5.         <Button Content="Button4" DockPanel.Dock="Right"></Button>  
  6.         <Button Content="Button5" DockPanel.Dock="Bottom"></Button>  
  7.         <Button Content="Button6" DockPanel.Dock="Bottom"></Button>  
  8. </DockPanel>  
Preview

 
 In the example above, Button6 is filling the entire remaining space. To prevent this, we need to set the LastChildFill property of the DockPanel to False.
  1. <DockPanel LastChildFill="False">  
  2.         <Button Content="Button1" DockPanel.Dock="Top"></Button>  
  3.         <Button Content="Button2" DockPanel.Dock="Bottom"></Button>  
  4.         <Button Content="Button3" DockPanel.Dock="Left"></Button>  
  5.         <Button Content="Button4" DockPanel.Dock="Right"></Button>  
  6.         <Button Content="Button5" DockPanel.Dock="Bottom"></Button>  
  7.         <Button Content="Button6" DockPanel.Dock="Bottom"></Button>  
  8. </DockPanel>  
Preview

 
 
We can also adjust the HorizontalAlignment property of the child elemnts in a DockPanel.
  1. <DockPanel>  
  2.         <Button Content="Top Button" DockPanel.Dock="Top"></Button>  
  3.         <Button Content="Bottom Button" DockPanel.Dock="Bottom"></Button>  
  4.         <Button Content="Left Button" DockPanel.Dock="Left"></Button>  
  5.         <Button Content="Right Button" DockPanel.Dock="Right"></Button>  
  6.         <Button Content="Left-Aligned Bottom Button" DockPanel.Dock="Bottom" HorizontalAlignment="Left"></Button>  
  7.         <Button Content="Left-Aligned Bottom Button" DockPanel.Dock="Bottom" HorizontalAlignment="Right"></Button>  
  8.         <Button Content="Left-Aligned Bottom Button" DockPanel.Dock="Bottom" HorizontalAlignment="Center"></Button>  
  9.         <Button Content="Remaining Spave" DockPanel.Dock="Bottom"></Button>  
  10. </DockPanel>  
Preview

 
 
A DockPanel is mainly used to place StackPanel or WrapPanel containers in an appropiate region of a window. Let's create a nested layout using DockPanel and StackPanel. In this example, we used DockPanel to dock the StackPanel and TextBox position.
  1. <DockPanel LastChildFill="True">  
  2.         <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" Margin="10" HorizontalAlignment="Center">  
  3.             <Button Content="Submit" Padding="10"></Button>  
  4.             <Button Content="Cancel" Margin="10,0,0,0" Padding="10"></Button>  
  5.         </StackPanel>  
  6.         <TextBox DockPanel.Dock="Top" Margin="10"></TextBox>  
  7. </DockPanel>  
Preview:


I hope you like it. Thanks.


Similar Articles