Skip to main content

​
DockPanel

The DockPanel arranges child elements by docking them to the edges (top, bottom, left, right) or filling the remaining space in the center.

​
Namespace

Avalonia.Controls

​
Inheritance

Object → AvaloniaObject → Visual → Layoutable → Control → Panel → DockPanel

​
Dock Enumeration

​
Left
enum
Dock the child to the left edge.
​
Top
enum
Dock the child to the top edge.
​
Right
enum
Dock the child to the right edge.
​
Bottom
enum
Dock the child to the bottom edge.

​
Properties

​
LastChildFill
bool
Gets or sets whether the last child fills the remaining space. Default is true.When true, the last child element fills all remaining space in the center.
​
HorizontalSpacing
double
Gets or sets the horizontal spacing between docked children.
​
VerticalSpacing
double
Gets or sets the vertical spacing between docked children.

​
Attached Property

​
Dock
Dock
Gets or sets which edge of the DockPanel a child is docked to.

​
Static Methods

​
GetDock
Dock
Gets the Dock attached property value.Parameters:
  • control (Control): The control
Returns: The Dock value (default is Dock.Left)
​
SetDock
void
Sets the Dock attached property value.Parameters:
  • control (Control): The control
  • value (Dock): The dock position

​
Usage in XAML

​
Basic Application Layout

<DockPanel LastChildFill="True">
    <!-- Top: Menu bar -->
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="File" />
        <MenuItem Header="Edit" />
        <MenuItem Header="View" />
    </Menu>
    
    <!-- Bottom: Status bar -->
    <Border DockPanel.Dock="Bottom" 
            Background="LightGray" 
            Height="24" 
            Padding="4,0">
        <TextBlock Text="Ready" VerticalAlignment="Center" />
    </Border>
    
    <!-- Left: Sidebar -->
    <Border DockPanel.Dock="Left" 
            Background="WhiteSmoke" 
            Width="200" 
            Padding="8">
        <StackPanel>
            <TextBlock Text="Navigation" FontWeight="Bold" />
            <Button Content="Home" />
            <Button Content="Settings" />
        </StackPanel>
    </Border>
    
    <!-- Center: Main content (LastChildFill=True) -->
    <Border Background="White" Padding="16">
        <TextBlock Text="Main Content Area" />
    </Border>
</DockPanel>

​
Simple Toolbar Layout

<DockPanel>
    <!-- Left toolbar -->
    <StackPanel DockPanel.Dock="Left" Orientation="Vertical" Spacing="4">
        <Button Content="☰" />
        <Button Content="📁" />
        <Button Content="⚙" />
    </StackPanel>
    
    <!-- Right toolbar -->
    <StackPanel DockPanel.Dock="Right" Orientation="Vertical" Spacing="4">
        <Button Content="🔔" />
        <Button Content="⚙" />
    </StackPanel>
    
    <!-- Center content -->
    <TextBox AcceptsReturn="True" />
</DockPanel>

​
With Spacing

<DockPanel HorizontalSpacing="8" VerticalSpacing="8">
    <Border DockPanel.Dock="Top" 
            Background="SteelBlue" 
            Height="50" />
    
    <Border DockPanel.Dock="Left" 
            Background="LightGreen" 
            Width="150" />
    
    <Border DockPanel.Dock="Right" 
            Background="LightCoral" 
            Width="150" />
    
    <Border Background="LightYellow" />
</DockPanel>

​
LastChildFill=False

<DockPanel LastChildFill="False" Background="WhiteSmoke">
    <Button DockPanel.Dock="Top" Content="Top" />
    <Button DockPanel.Dock="Bottom" Content="Bottom" />
    <Button DockPanel.Dock="Left" Content="Left" />
    <Button DockPanel.Dock="Right" Content="Right" />
    
    <!-- This element won't fill remaining space -->
    <Button Content="Not Filling" Width="100" Height="50" />
</DockPanel>

​
Multiple Elements on Same Edge

<DockPanel>
    <!-- Multiple top-docked elements -->
    <Border DockPanel.Dock="Top" Background="Red" Height="30" />
    <Border DockPanel.Dock="Top" Background="Blue" Height="30" />
    <Border DockPanel.Dock="Top" Background="Green" Height="30" />
    
    <!-- Center -->
    <Border Background="Yellow" />
</DockPanel>

​
Code-Behind Usage

​
Creating DockPanel Programmatically

using Avalonia.Controls;
using Avalonia.Media;

var dockPanel = new DockPanel
{
    LastChildFill = true,
    HorizontalSpacing = 4,
    VerticalSpacing = 4
};

// Add top menu
var menu = new Menu();
DockPanel.SetDock(menu, Dock.Top);
dockPanel.Children.Add(menu);

// Add left sidebar
var sidebar = new Border
{
    Background = Brushes.LightGray,
    Width = 200
};
DockPanel.SetDock(sidebar, Dock.Left);
dockPanel.Children.Add(sidebar);

// Add bottom status bar
var statusBar = new Border
{
    Background = Brushes.DarkGray,
    Height = 24
};
DockPanel.SetDock(statusBar, Dock.Bottom);
dockPanel.Children.Add(statusBar);

// Add center content (automatically fills)
var content = new TextBox
{
    AcceptsReturn = true
};
dockPanel.Children.Add(content);

​
Getting and Setting Dock

// Get dock position
var dock = DockPanel.GetDock(element);

// Set dock position
DockPanel.SetDock(element, Dock.Top);

// Toggle dock
var currentDock = DockPanel.GetDock(element);
var newDock = currentDock == Dock.Left ? Dock.Right : Dock.Left;
DockPanel.SetDock(element, newDock);

​
Layout Behavior

DockPanel arranges children in the order they’re added: 
1. First child docked
2. Second child docked in remaining space
3. Third child docked in remaining space after 1 & 2
...
N. Last child fills remaining space (if LastChildFill=True)

​
Example Layout Sequence

<DockPanel Width="400" Height="300">
    <!-- 1. Takes top 50px -->
    <Border DockPanel.Dock="Top" Background="Red" Height="50" />
    
    <!-- 2. Takes left 100px of remaining 250px height -->
    <Border DockPanel.Dock="Left" Background="Blue" Width="100" />
    
    <!-- 3. Takes right 100px of remaining space -->
    <Border DockPanel.Dock="Right" Background="Green" Width="100" />
    
    <!-- 4. Fills center (200px wide x 250px tall) -->
    <Border Background="Yellow" />
</DockPanel>
Result: 
┌───────── Red (Top 50px) ─────────┐
│                                        │
├──────┬─────────────────────┬──────┤
│      │                       │      │
│ Blue │       Yellow        │ Green│
│(100) │      (Center)       │ (100)│
│      │                       │      │
│      │                       │      │
└──────┴─────────────────────┴──────┘

​
Common Patterns

​
Application Frame

<DockPanel>
    <!-- Top: Title bar + Menu -->
    <StackPanel DockPanel.Dock="Top">
        <Border Background="DarkBlue" Height="32">
            <TextBlock Text="My Application" 
                       Foreground="White" 
                       VerticalAlignment="Center" 
                       Margin="8,0" />
        </Border>
        <Menu>...</Menu>
    </StackPanel>
    
    <!-- Bottom: Status bar -->
    <StatusBar DockPanel.Dock="Bottom">...</StatusBar>
    
    <!-- Left: Navigation -->
    <TreeView DockPanel.Dock="Left" Width="200">...</TreeView>
    
    <!-- Right: Properties -->
    <PropertyGrid DockPanel.Dock="Right" Width="250">...</PropertyGrid>
    
    <!-- Center: Main content -->
    <ContentControl Content="{Binding CurrentView}" />
</DockPanel>

​
Best Practices

DockPanel is ideal for classic application layouts with headers, footers, sidebars, and main content.
Children are docked in the order they’re added to the Children collection. Add header/footer first, then sidebars, then main content.
Elements docked to Top/Bottom should have Height set. Elements docked to Left/Right should have Width set.
<!-- Good -->
<Border DockPanel.Dock="Top" Height="50" />
<Border DockPanel.Dock="Left" Width="200" />

<!-- Will work but may not size as expected -->
<Border DockPanel.Dock="Top" />

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us