DockPanel Layout

Dock children to the edges in declaration order; the last child fills the rest.

Try in Playground

Overview

DockPanel is the fastest way to build the classic shell: a header, a status bar, a sidebar, and a content area that takes whatever is left. Each child claims one edge of a rectangle that shrinks as it goes, so declaration order is the layout — a Left child declared before a Top child runs the full height of the panel, and the same two declared the other way round give the header the full width.

Sizes are whole cells. A docked child is measured from its own preferred size along the dock axis and clamped to what actually remains, so a header asking for ten rows in a four-row panel gets four rather than pushing its siblings out of the panel. Once the rectangle is empty the remaining children collapse to zero and are skipped.

Properties

PropertyTypeDefaultDescription
LastChildFillboolTrueThe last non-collapsed child fills the leftover rectangle. This is what spends the final cells.
DockPanel.DockDockLeftAttached. Left, Top, Right or Bottom.
BackgroundColor?nullInherited from Panel.
 
<!-- Header, status bar, sidebar, then content fills the rest -->
<DockPanel>
    <TextBlock DockPanel.Dock="Top" Text="Top — header" Background="#5F0000" />
    <TextBlock DockPanel.Dock="Bottom" Text="Bottom — status bar" Background="#00005F" />
    <Border DockPanel.Dock="Left" Width="18" Background="#005F5F" />
    <Border DockPanel.Dock="Right" Width="14" Background="#5F005F" />
    <Border Background="#005F00" />    <!-- LastChildFill -->
</DockPanel>

<!-- LastChildFill="False": the last child is docked like any other -->
<DockPanel LastChildFill="False">
    <TextBlock DockPanel.Dock="Top" Text="row 1" />
    <TextBlock DockPanel.Dock="Top" Text="row 2" />
</DockPanel>

Key Concepts