Using the WPF DockPanel

For those WinForm developers that are familiar with the Dock Property of Win32 controls, you may be looking for Fill as a DockPanel.Dock value in WPF. There isn’t one. Not to worry docking is easier with the DockPanel then it was in WinForms.

In WinForms, when using the Dock property didn’t result in the look you expected, The way to fix it up was to open the Document Outline window and reorder the controls you were docking. The order along with the Dock property value dictated how the controls would be laid out.

This is also true in WPF. When using the DockPanel you will notice there are four Dock options to select from Bottom, Top, Right and left. There is no fill. However the order of the controls will determine which one fills the panel.

When laying out a DockPanel think of it this way. Your controls will be placed in the panel in the order you have them listed in the XAML. The examples below show how changing the order of the controls changes how the controls are docked. 

When the first control is docked Left it is occupying the whole left side of the DockPanel. While the last control will fill the remaining space in this case the control docked to the Bottom.

 

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

image
Putting Top first, makes it occupy the whole top, then with bottom second it occupies the whole bottom. Left goes in between, and Right fills the remainder of the DockPanel.  

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

image
This example shows how this rule holds true even when more then one control has the same docking.  

<DockPanel>
    <Button DockPanel.Dock="Left">Left 1</Button>
    <Button DockPanel.Dock="Top">Top</Button>
    <Button DockPanel.Dock="Bottom">Bottom</Button>
    <Button DockPanel.Dock="Left">Left 2</Button>
    <Button DockPanel.Dock="Right">Right</Button>
</DockPanel>

image

Happy Docking!