DockPanel in WPF

DockPanel is a Panel where each child elements dock to one of the four edges. DockPanel enables docking of child elements to an entire side of the panel streching it to fill entire Height or Width.

Let's Begin and Create various layout using DockPanel.

In the First Example, I have added 6 Button to a DockPanel. By Default, Elements inside the DockPanel Dock towards left and the Last Element inside the panel expands to take the remaining space inside the panel.

<Window x:Class="DockPanelExample1.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="DockPanel Example" Height="350" Width="525">     <DockPanel>         <Button Content="Button1"></Button>         <Button Content="Button2"></Button>         <Button Content="Button3"></Button>         <Button Content="Button4"></Button>         <Button Content="Button5"></Button>         <Button Content="Button6"></Button>     </DockPanel> </Window>

Preview:

We can prevent or turn off the last child element to fill the remaining space by setting LastChildFill property to False.

<DockPanel LastChildFill="False">         <Button Content="Button1"></Button>         <Button Content="Button2"></Button>         <Button Content="Button3"></Button>         <Button Content="Button4"></Button>         <Button Content="Button5"></Button>         <Button Content="Button6"></Button> </DockPanel>

Preview:

We can dock an element on an edge other than Left(which is default) by using DockPanel.Dock property. For Example, If we want to dock a button to the top of DockPanel, We have to set DockPanel.Dock="Top"  in Button Element. This will Stretch the Button to the entire width of the DockPanel but height is set according to the content of it or MinHeight property.

<DockPanel>         <Button Content="Button1" DockPanel.Dock="Top"></Button>         <Button Content="Button2" DockPanel.Dock="Bottom"></Button>         <Button Content="Button3" DockPanel.Dock="Left"></Button>         <Button Content="Button4" DockPanel.Dock="Right"></Button>         <Button Content="Button5" DockPanel.Dock="Bottom"></Button>         <Button Content="Button6" DockPanel.Dock="Bottom"></Button> </DockPanel>

Preview:

In above Example, Button6 is filling the Entire remaining space. To prevent this, We have to set LastChildFill property of DockPanel  to False.

<DockPanel LastChildFill="False">         <Button Content="Button1" DockPanel.Dock="Top"></Button>         <Button Content="Button2" DockPanel.Dock="Bottom"></Button>         <Button Content="Button3" DockPanel.Dock="Left"></Button>         <Button Content="Button4" DockPanel.Dock="Right"></Button>         <Button Content="Button5" DockPanel.Dock="Bottom"></Button>         <Button Content="Button6" DockPanel.Dock="Bottom"></Button> </DockPanel>

Preview:

We can also Adjust the HorizontalAlignment property of Child Elemnts in a DockPanel.

<DockPanel>         <Button Content="Top Button" DockPanel.Dock="Top"></Button>         <Button Content="Bottom Button" DockPanel.Dock="Bottom"></Button>         <Button Content="Left Button" DockPanel.Dock="Left"></Button>         <Button Content="Right Button" DockPanel.Dock="Right"></Button>         <Button Content="Left-Aligned Bottom Button" DockPanel.Dock="Bottom" HorizontalAlignment="Left"></Button>         <Button Content="Left-Aligned Bottom Button" DockPanel.Dock="Bottom" HorizontalAlignment="Right"></Button>         <Button Content="Left-Aligned Bottom Button" DockPanel.Dock="Bottom" HorizontalAlignment="Center"></Button>         <Button Content="Remaining Spave" DockPanel.Dock="Bottom"></Button> </DockPanel>

Preview:

DockPanel is mainly used to place StackPanel, 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. 

<DockPanel LastChildFill="True">         <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" Margin="10" HorizontalAlignment="Center">             <Button Content="Submit" Padding="10"></Button>             <Button Content="Cancel" Margin="10,0,0,0" Padding="10"></Button>         </StackPanel>         <TextBox DockPanel.Dock="Top" Margin="10"></TextBox> </DockPanel>

Preview:

I Hope you Like it. Thanks.