New to Telerik UI for WinUI? Download free 30-day trial

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

<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

<telerik:RadDockPanel LastChildFill="False"/> 

See Also

In this article
Not finding the help you need?