Edit this page

Docked/Floating Panes

RadPane is flexible Silverlight control that can be either in docked or in floating state. Each newly created RadPane is docked by default in the root container but you can change this behavior either using the methods explained below or the properties (i.e. InitialPosition) exposed by the RadSplitContainer.

Docking Panes

Docked panes are all these panes that are hosted inside the RadDockng control.

The five possible docking positions are:

  • Left - the RadPane will be placed in the left side of the container.

  • Top - the RadPane will be placed in the top side of the container.

  • Right - the RadPane will be placed in the right side of the container.

  • Bottom - the RadPane will be placed at the bottom side of the container.

  • Tabbed document - the docked RadPane will be inserted as a new tab page.

To dock your panes declaratively to a certain position you have to host your panes in RadSplitContainer and define its InitialPosition property as it is shown in the code snippet below:

XAML

<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" InitialPosition="DockedRight">
        <telerik:RadPaneGroup x:Name="radPaneGroup">
            <telerik:RadPane x:Name="radPane" Header="Docked Pane">
                <TextBlock Text="Docked Pane."></TextBlock>
            </telerik:RadPane>
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

And here is the pane docked to the right:

In order to programmatically dock a RadPane to a group, you have to remove it from its current parent first and then add it to the RadPaneGroup's Items collection:

C#

radPane.RemoveFromParent();
radPaneGroup.Items.Add(radPane);

VB.NET

radPane.RemoveFromParent()
radPaneGroup.Items.Add(radPane)

If you need to control the docking run-time (while the user is dragging a pane), you could use the PreviewShowCompass event of the RadDocking control in combination with the Is<*>IndicatorVisible series of properties of the Compass class. Where <*> could be one of the following: Left, Top, Right, Bottom, Center. To learn more take a look at the How to Implement Conditional Docking topic.

Floating Panes

Floating panes are all these panes hosted inside the floating ToolWindows right above the RadDocking's main window.

Here is the XAML declaration of the above docking structure. Notice that each RadPane is added to a separate RadPaneGroup, which on the other side is hosted in a separate RadSplitContainer. The two panes are initially floatable (displayed in ToolWindows) because the InitialPosiotion property of the respective RadSplitContainers is set to FloatingDockable or FloatingOnly.

XAML

<telerik:RadDocking x:Name="radDocking1">
    <telerik:RadSplitContainer x:Name="radSplitContainer1" InitialPosition="FloatingDockable">
        <telerik:RadPaneGroup x:Name="radPaneGroup1">
            <telerik:RadPane x:Name="radPane1" Header="Floating Pane">
                <TextBlock TextWrapping="Wrap" Text="Floating pane hosted in a ToolWindow."></TextBlock>
            </telerik:RadPane>
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
    <telerik:RadSplitContainer x:Name="radSplitContainer2" InitialPosition="FloatingDockable">
        <telerik:RadPaneGroup x:Name="radPaneGroup2">
            <telerik:RadPane x:Name="radPane2" Header="Floating Pane">
                <TextBlock TextWrapping="Wrap" Text="Floating pane hosted in a ToolWindow."></TextBlock>
            </telerik:RadPane>
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

If you want to specify the exact position and size of the floating panes set the attached properties RadDocking.FloatingLocation and RadDocking.FloatingSize inside the declaration of the containing RadSplitContainer.

XAML

<telerik:RadSplitContainer x:Name="splitContainer1" InitialPosition="FloatingDockable"
                           telerik:RadDocking.FloatingLocation="50,50"
                           telerik:RadDocking.FloatingSize="200,200">

    <telerik:RadPaneGroup x:Name="paneGroup1">
        <telerik:RadPane x:Name="pane2" Header="Floating Pane">
            <TextBlock TextWrapping="Wrap" Text="Floating pane hosted in a ToolWindow."></TextBlock>
        </telerik:RadPane>
    </telerik:RadPaneGroup>

</telerik:RadSplitContainer>

You can also make a pane floatable programmatically by either calling MakeFloatingDockable() or MakeFloatingOnly(). Both of these methods are doing one and the same thing - they undock your pane and host it in a separate ToolWindow.

Note that MakeFloatingOnly(), MakeFloatingDockable() and MakeDockable() methods work only when all objects are constructed and added to the object tree. Which means that you should invoke them after the Loaded event of the RadDocking control has been fired.

C#

radPane.MakeFloatingDockable();

VB.NET

radPane.MakeFloatingDockable()

If you make your pane floating using the MakeFloatingOnly() you will not be able to dock it back again using drag and drop. To make it dockable again you have to call the method MakeDockable().

Disable Floating

You can disable the floating functionality of a RadPane via the boolean property CanFloat.

XAML

<telerik:RadPane x:Name="pane1" CanFloat="False"/>

C#

radPane.CanFloat = false;

VB.NET

radPane.CanFloat = False

See Also