IS InkkSlinger Docs DockPanel
Docs

Controls

DockPanel

DockPanel is the framework's edge-composition panel. It lays out children in sequence, docking each one to the left, top, right, or bottom edge of the remaining rectangle. By default, the last child fills whatever space is left.

Quick start

Use DockPanel when your screen naturally has frame pieces such as a top bar, a side rail, a footer, and a central content area. It is especially good for shell layout, inspectors, tool panes, and document hosts.

Minimal shell layout

<DockPanel>
  <Border DockPanel.Dock="Top"
          Background="#203040"
          BorderBrush="#476582"
          BorderThickness="0,0,0,1"
          Padding="12,8">
    <TextBlock Text="Project Explorer" />
  </Border>

  <Border DockPanel.Dock="Left"
          Width="220"
          Background="#16212D"
          BorderBrush="#2F455D"
          BorderThickness="0,0,1,0"
          Padding="12">
    <TextBlock Text="Navigation" />
  </Border>

  <TextBlock Text="Main content fills the rest." Margin="16" />
</DockPanel>

Top bar, bottom status bar, and center view

<DockPanel>
  <Border DockPanel.Dock="Top"
          Background="#1B2A39"
          BorderBrush="#45627E"
          BorderThickness="0,0,0,1"
          Padding="14,10">
    <TextBlock Text="Build Monitor" />
  </Border>

  <StatusBar DockPanel.Dock="Bottom">
    <StatusBarItem Content="Ready" />
  </StatusBar>

  <Border Background="#101821" Padding="16">
    <TextBlock Text="Workspace content" />
  </Border>
</DockPanel>

Disable fill behavior

<DockPanel LastChildFill="False">
  <Border DockPanel.Dock="Left" Width="140" Background="#223245" />
  <Border DockPanel.Dock="Right" Width="140" Background="#182636" />
  <Border DockPanel.Dock="Top" Height="60" Background="#30485F" />
</DockPanel>

Default recommendation: start with DockPanel when you are describing edges and a center region. If you are describing rows and columns, choose Grid instead.

How DockPanel layout works

DockPanel is order-sensitive. It processes children from first to last, shrinking the remaining rectangle after each non-fill child is arranged. The next child sees whatever space is left.

Measure

Each child is measured against the current remaining width and height. A left or right dock consumes width. A top or bottom dock consumes height.

Arrange

Children are arranged into the remaining rectangle in declaration order. The final remaining region goes to the last child when LastChildFill is enabled.

  • Child order changes layout results, even if the same children and dock values are used.
  • The default attached dock value is Left.
  • LastChildFill defaults to true.
  • When LastChildFill is true, the last child's own DockPanel.Dock value is ignored for layout.
<DockPanel>
  <Border DockPanel.Dock="Left" Width="90" Background="#24415A" />
  <Border DockPanel.Dock="Top" Height="48" Background="#35516B" />
  <Border Background="#121C25" />
</DockPanel>

That produces a left rail first, then a top strip inside the remaining area, then a fill region in the bottom-right remainder.

Child order is part of the API

Unlike Grid, DockPanel does not compute a global layout from attached metadata alone. It walks the children in sequence, so moving a child earlier or later changes which area it consumes.

Order A

Dock the left rail first, then dock the top strip. The top strip appears only across the remaining content region.

Order B

Dock the top strip first, then dock the left rail. The top strip now spans the full panel width before the left rail is carved out below it.

Left then top

<DockPanel>
  <Border DockPanel.Dock="Left" Width="96" Background="#1F3448" />
  <Border DockPanel.Dock="Top" Height="44" Background="#2E4A62" />
  <Border Background="#111922" />
</DockPanel>

Top then left

<DockPanel>
  <Border DockPanel.Dock="Top" Height="44" Background="#2E4A62" />
  <Border DockPanel.Dock="Left" Width="96" Background="#1F3448" />
  <Border Background="#111922" />
</DockPanel>

Practical rule: read a DockPanel from top to bottom in XAML as a sequence of space claims. Earlier children reserve edges. Later children live inside what remains.

LastChildFill behavior

The default LastChildFill="True" behavior is what makes DockPanel convenient for application shells. You dock the framing pieces first, then let the last child become the main content surface automatically.

When true

The last child gets the entire remaining rectangle. Its own DockPanel.Dock value does not affect layout.

When false

Every child is docked according to its own DockPanel.Dock value. No child automatically fills the leftover area.

Typical fill layout

<DockPanel>
  <Menu DockPanel.Dock="Top" />
  <StatusBar DockPanel.Dock="Bottom" />
  <Border DockPanel.Dock="Left" Width="240" Background="#172331" />
  <ContentControl Content="{Binding ActiveDocument}" />
</DockPanel>

All children dock explicitly

<DockPanel LastChildFill="False">
  <Border DockPanel.Dock="Top" Height="56" Background="#203040" />
  <Border DockPanel.Dock="Bottom" Height="32" Background="#172331" />
  <Border DockPanel.Dock="Left" Width="160" Background="#24384B" />
  <Border DockPanel.Dock="Right" Width="160" Background="#24384B" />
</DockPanel>

If you expect a center region and you turned LastChildFill off, you must provide that center behavior through another panel or a different child structure.

Dock directions

The framework supports the standard four dock directions through the Dock enum: Left, Top, Right, and Bottom.

Left

Reserves width from the left edge of the remaining rectangle and stretches vertically across the current remaining height.

Top

Reserves height from the top edge of the remaining rectangle and stretches horizontally across the current remaining width.

Right

Reserves width from the right edge of the remaining rectangle and stretches vertically across the current remaining height.

Bottom

Reserves height from the bottom edge of the remaining rectangle and stretches horizontally across the current remaining width.

<DockPanel LastChildFill="False">
  <Border DockPanel.Dock="Left" Width="80" Background="#28445F" />
  <Border DockPanel.Dock="Top" Height="50" Background="#35516B" />
  <Border DockPanel.Dock="Right" Width="80" Background="#28445F" />
  <Border DockPanel.Dock="Bottom" Height="34" Background="#203040" />
</DockPanel>

Typical usage patterns

Application shell

<DockPanel>
  <ToolBarTray DockPanel.Dock="Top">
    <ToolBar>
            <Button Content="New" />
            <Button Content="Open" />
            <Button Content="Save" />
    </ToolBar>
  </ToolBarTray>

  <StatusBar DockPanel.Dock="Bottom">
    <StatusBarItem Content="Ready" />
  </StatusBar>

  <Border DockPanel.Dock="Left"
          Width="220"
          Background="#16212D"
          BorderBrush="#34506C"
          BorderThickness="0,0,1,0"
          Padding="12">
    <TreeView />
  </Border>

  <DocumentViewer />
</DockPanel>

Inspector panel on the right

<DockPanel>
  <Border DockPanel.Dock="Right"
          Width="280"
          Background="#172331"
          BorderBrush="#2F455D"
          BorderThickness="1,0,0,0"
          Padding="14">
    <StackPanel>
      <TextBlock Text="Properties" Margin="0,0,0,8" />
      <TextBlock Text="No selection" />
    </StackPanel>
  </Border>

  <Canvas />
</DockPanel>

Conversation layout with top input bar

<DockPanel>
  <Border DockPanel.Dock="Bottom"
          Background="#16212D"
          BorderBrush="#2F455D"
          BorderThickness="0,1,0,0"
          Padding="12">
    <TextBox Text="{Binding DraftMessage}" />
  </Border>

  <ListBox ItemsSource="{Binding Messages}" />
</DockPanel>

Navigation rail and content host

<DockPanel>
  <Border DockPanel.Dock="Left"
          Width="96"
          Background="#111922"
          BorderBrush="#35516B"
          BorderThickness="0,0,1,0"
          Padding="8">
    <StackPanel>
            <Button Content="Home" Margin="0,0,0,6" />
            <Button Content="Search" Margin="0,0,0,6" />
            <Button Content="Settings" />
    </StackPanel>
  </Border>

  <Frame />
</DockPanel>

Nested DockPanels

<DockPanel>
  <Border DockPanel.Dock="Top" Height="52" Background="#203040" />

  <DockPanel>
    <Border DockPanel.Dock="Left" Width="200" Background="#16212D" />
    <Border DockPanel.Dock="Bottom" Height="30" Background="#111922" />
    <Border Background="#0E151D" />
  </DockPanel>
</DockPanel>

Property reference

DockPanel-specific properties

DockPanel.Dock: attached Dock value for each child. Supported values are Left, Top, Right, and Bottom. Default is Left.

LastChildFill: bool. Default is true. When enabled, the last child fills the remaining rectangle instead of docking to an edge.

Inherited and common properties

Width and Height: useful when the DockPanel itself needs a fixed region.

Margin: affects the panel's placement in its parent, not how docked children are carved inside it.

Child Width is especially relevant for left/right docks. Child Height is especially relevant for top/bottom docks.

Set dock in XAML

<Border DockPanel.Dock="Right"
        Width="180"
        Background="#1E3144" />

Set dock from code

var sidebar = new Border
{
    Width = 220f
};

DockPanel.SetDock(sidebar, Dock.Left);
rootDockPanel.AddChild(sidebar);

DockPanel vs other panels

Choose DockPanel when

Your layout describes edges plus a remainder: headers, sidebars, tool panes, footers, and a main content region.

Choose another panel when

You need rows and columns, proportional sizing, wrapping, or explicit coordinates rather than edge consumption.

  • Use Grid for structured forms, dashboards, and layouts driven by rows and columns.
  • Use StackPanel for simple one-axis flows.
  • Use Canvas for explicit X/Y placement.
  • Use DockPanel for frame layout and edge-first composition.

Notes and pitfalls

Order matters. Reordering children changes the measured and arranged result. Treat XAML declaration order as a real part of the layout contract.

The last child fills by default. If a child seems to ignore DockPanel.Dock, check whether it is the final child and whether LastChildFill is still enabled.

Default dock is Left. If you omit DockPanel.Dock on a non-final child, it behaves as a left-docked child.

Stretching follows the dock direction. Left and right docks consume width and stretch through the remaining height. Top and bottom docks consume height and stretch through the remaining width.

Use explicit size where appropriate. A left or right dock usually wants a meaningful Width. A top or bottom dock usually wants a meaningful Height. Otherwise the child sizes itself from content.