Home  separator  Layout  separator  Dock Panel
Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


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.





Last modified: 2010-02-10 10:34:56
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
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
durga
Commented on 9.September 2010
nice description given... thank u!!!
Raman
Commented on 12.October 2010
I have a question. Suppose I have only two group boxes in a dock panel. Both are having dock panel = top; It means they will be positioned on below other. Now If I hide the top group box the lower one should move up just like it happened in win forms. But its not happening. How can I achieve this?
lukearl
Commented on 28.October 2010
@Raman - when you say 'hide the top group box' is that using Visibility="Hidden"? If so, try using Visibility="Collapsed" instead.
arunkali
Commented on 17.December 2010
Good...
Matthias
Commented on 27.December 2010
Thanks a LOT!
MAK
Commented on 4.January 2011
Which Assembly reference should I have include in order to us Dock Panel?
Khaniya
Commented on 28.January 2011
this is not good
and be more if added runtime cs code to achieve same
thanks
Louie
Commented on 22.March 2011
Is it possible to dock a wpf form from one application to another wpf application?
Louie
Commented on 22.March 2011
Is it possible to dock a wpf form from one application to another wpf application?
Mike
Commented on 20.April 2011
Thank you, just what I was after
Liza
Commented on 16.May 2011
Good one
nn
Commented on 15.June 2011
&lt;DockPanel&gt;
&lt;Button DockPanel.Dock=&quot;Top&quot;&gt;dock 2.1&lt;/Button&gt;
&lt;Button DockPanel.Dock=&quot;Top&quot;&gt;dock 2.2&lt;/Button&gt;
&lt;Button DockPanel.Dock=&quot;Left&quot;&gt;dock 2.3&lt;/Button&gt;
&lt;Button DockPanel.Dock=&quot;Right&quot;&gt;dock 2.4&lt;/Button&gt;
&lt;Button DockPanel.Dock=&quot;Bottom&quot;&gt;dock 2.5&lt;/Button&gt;
&lt;Button DockPanel.Dock=&quot;Bottom&quot;&gt;dock 2.6&lt;/Button&gt;
&lt;/DockPanel&gt;
Claudio
Commented on 30.June 2011
&lt;input type=&quot;submit&quot; value=&quot;enviar&quot;&gt;
example
Commented on 22.July 2011
&lt;script&gt;alert(\&quot;S\&quot;);&lt;/script&gt;
gfgfgf
Commented on 29.July 2011
&lt;DockPanel LastChildFill=&quot;True&quot;&gt;
&lt;Button Content=&quot;Dock=Top&quot; DockPanel.Dock=&quot;Top&quot;/&gt;
&lt;Button Content=&quot;Dock=Bottom&quot; DockPanel.Dock=&quot;Bottom&quot;/&gt;
&lt;Button Content=&quot;Dock=Left&quot;/&gt;
&lt;Button Content=&quot;Dock=Right&quot; DockPanel.Dock=&quot;Right&quot;/&gt;
&lt;Button Content=&quot;LastChildFill=True&quot;/&gt;
&lt;/DockPanel&gt;
Test
Commented on 19.August 2011
&lt;input type=&quot;submit&quot; value=&quot;enviar&quot;/&gt;
x
Commented on 29.August 2011
&lt;button&gt;bla&lt;/button

Name
E-Mail (optional)
Comment