Dock Panel

Introduction

The dock panel is a layout panel, that provides an easy docking of elements to the left, right, top, bottom or center of the panel. The dock side of an element is defined by the attached property DockPanel.Dock. To dock an element to the center of the panel, it must be the last child of the panel and the LastChildFill property must be set to true.

 
<DockPanel LastChildFill="True">
    <Button Content="Dock=Top" DockPanel.Dock="Top"/>
    <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Right" DockPanel.Dock="Right"/>
    <Button Content="LastChildFill=True"/>
</DockPanel>
 
 

Multiple elements on one side

The dock panel layout supports multiple elements on one side. Just add two or more elements with the same dock side. The panel simply stacks them.

 
<DockPanel LastChildFill="True">
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Left"/>
    <Button Content="Dock=Top" DockPanel.Dock="Top"/>
    <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
    <Button Content="Dock=Right" DockPanel.Dock="Right"/>
    <Button Content="LastChildFill=True"/>
</DockPanel>
 
 

Change the stacking order

The order of the elements matters. It determines the alignment of the elements. The first elements gets the whole width or height. The following elements get the remaining space.

 Comments on this article

Son Ha	Commented on 8.April 2009 nice one ^^
Anil	Commented on 1.June 2009 The docpanel seems to be very similar to Winforms where you use the docking property of controls on the form extensively.
this.doesn't...	Commented on 31.December 2009 <DockPanel> <Button DockPanel.Dock="Top">dock 2.1</Button> <Button DockPanel.Dock="Top">dock 2.2</Button> <Button DockPanel.Dock="Left">dock 2.3</Button> <Button DockPanel.Dock="Right">dock 2.4</Button> <Button DockPanel.Dock="Bottom">dock 2.5</Button> <Button DockPanel.Dock="Bottom">dock 2.6</Button> </DockPanel>
Somebody	Commented on 9.February 2010 How can i use the docking mechanism, like in VisualStudio 2008 with WPF. Thanks for reply
Christian Moser	Commented on 10.February 2010 Hi, the DockPanel is a much more leightweight control than the docking functionality in VisualStudio. Check out Tools->Third Party Controls for available Dock Controls.
Zzr1400Huray	Commented on 18.February 2010 Is where any way to create some other windows that be dockablle on main window, like in Visual studio or Photoshop?
JJ	Commented on 18.March 2010 Hello, It is possible to dock a wpf window to the screen edge and to a second wpf window like in Winamp? Thanks.
Angga	Commented on 29.May 2010 Why is it when I try creating background for 3 or more dockpanels each with matching transition colors, there will always be a line divider with a light color between several docked panels? This prevents me from creating smooth color transition between them.
crazyTequila	Commented on 7.July 2010 HELLO! THANKYOU THANKYOU THANKYOU!!!! Your example has saved me Massively!!! Cheers
Sunil	Commented on 4.August 2010 Coooooooooool man