Telerik UI for Windows Phone by Progress

The RadDockPanel control positions its children alongside one of its sides. To specify to which one you want a particular element to be set, you just have to set the element's RadDockPanel.Dock attached property. It can have one of the following values:

  • Bottom - positions the element alongside the bottom side of the panel.
  • Left - positions the element alongside the left side of the panel.
  • Rgiht - positions the element alongside the right side of the panel.
  • Top - positions the element alongside the top side of the panel.

The way an element gets docked depends also on its order in the children collection of the panel. It gets docked in the space, that has left after the prescendant elements have been already docked.

Here is an example of several elements docked.

<telerikPrimitives:RadDockPanel x:Name="radDockPanel" LastChildFill="False">
    <Border Width="100" telerikPrimitives:RadDockPanel.Dock="Left" BorderBrush="White" BorderThickness="1" Background="#FF00BABD" />
    <Border Height="100" telerikPrimitives:RadDockPanel.Dock="Top" BorderBrush="White" BorderThickness="1" Background="Orange" />
    <Border Width="100" telerikPrimitives:RadDockPanel.Dock="Right" BorderBrush="White" BorderThickness="1" Background="Pink" />
    <Border Height="100" telerikPrimitives:RadDockPanel.Dock="Bottom" BorderBrush="White" BorderThickness="1" Background="Green" />

Here is a snapshot of the result.

Dock Panel-Docking-01