DockPanel

The DockPanel allows you to arrange elements relative to one another by docking them at left, right, top or bottom.

RadDockPanel is the class that represents this panel.

The position of the DockPanel children is determined by the RadDockPanel.Dock attached property. The position can be Left, Top, Right, Bottom. The default dock position is Left.

Defining RadDockPanel and setting the Dock property

• XAML

<telerik:RadDockPanel> 
    <Border Background="#FFEDC8" telerik:RadDockPanel.Dock="Top" Height="50"  
            BorderBrush="Black" BorderThickness="1" > 
        <TextBlock Text="Docked Top" TextAlignment="Center" VerticalAlignment="Center"/> 
    </Border> 
    <Border Background="#FFEDC8" telerik:RadDockPanel.Dock="Top" Height="50"  
            BorderBrush="Black" BorderThickness="1 0 1 1"> 
        <TextBlock Text="Docked Top" TextAlignment="Center" VerticalAlignment="Center"/> 
    </Border> 
    <Border Background="#A3C8DB" telerik:RadDockPanel.Dock="Left" Width="100" 
            BorderBrush="Black" BorderThickness="1 0 0 1"> 
        <TextBlock Text="Docked Left" TextAlignment="Center" VerticalAlignment="Center" /> 
    </Border> 
    <Border Background="#A3C8DB" telerik:RadDockPanel.Dock="Left" Width="100" 
            BorderBrush="Black" BorderThickness="1 0 1 1"> 
        <TextBlock Text="Docked Left" TextAlignment="Center" VerticalAlignment="Center"/> 
    </Border> 
    <Border Background="#FF8080" telerik:RadDockPanel.Dock="Right" Width="100" 
            BorderBrush="Black" BorderThickness="1 0 1 1"> 
        <TextBlock Text="Docked Right" TextAlignment="Center" VerticalAlignment="Center"/> 
    </Border> 
    <Border Background="#8DD35F" telerik:RadDockPanel.Dock="Bottom" Height="40" 
            BorderBrush="Black" BorderThickness="0 1 0 1"> 
        <TextBlock Text="Docked Bottom" TextAlignment="Center" VerticalAlignment="Center"/> 
    </Border> 
    <Border Background="#E8E8EC"> 
        <TextBlock Text="Last child stretched in the remaining space" VerticalAlignment="Center" TextAlignment="Center" /> 
    </Border> 
</telerik:RadDockPanel>        

The last child of the panel will fill the remaining space after the other elements are arranged, regardless of its RadDockPanel.Dock value. To change this behavior, set the LastChildFill property of RadDockPanel to False. This way the last child will use its set dock position or Dock.Left if no dock is explicitly specified.

Setting LastChildFill

• XAML

<telerik:RadDockPanel LastChildFill="False"/> 

Telerik UI for WinUI Support and Learning Resources

• Telerik UI for WinUI DockPanel Homepage
• Telerik UI for WinUI API Reference
• Getting Started with Telerik UI for WinUI Components
• Telerik UI for WinUI DockPanel Forums