Docked/Floating Panes
RadPane is a 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 Example 1:
Example 1: Set InitialPosition of RadSplitContainer
<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>
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 as demonstrated in Example 2.
Example 2: Remove RadPane from RadPaneGroup
radPane.RemoveFromParent();
radPaneGroup.Items.Add(radPane);
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.
Example 3: Create Floating Panes
<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.
Example 4: Set the FloatingLocation and FloatingSize attached properties
<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.
More specifically, when the pane is floated, it is removed from its RadPaneGroup and its RadSplitContainer. The original group and split container, however, are not removed from the docking control, they are just hidden. Then a new RadPaneGroup is created by the control and the floated RadPane is added to that new group. After that, a new RadSplitContainer is created and the new group is added to it. Next, a new ToolWindow instance is created and the new split container is added to it. Finally, the window is added to the RadDocking control.
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.
Example 5: Make a RadPane FloatingDockable
radPane.MakeFloatingDockable();
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().
The RadPane loses its DataContext when it's made floating since it is hosted in a ToolWindow. In order to preserve any bindings applied to the RadPane properties, you can explicitly set the DataContext on the RadPane itsself.
Disable Floating
You can disable the floating functionality of a RadPane via the boolean property CanFloat.
Example 6: Disable the floating of a RadPane
<telerik:RadPane x:Name="pane1" CanFloat="False"/>
Example 6: Disable the floating of a RadPane
radPane.CanFloat = false;
radPane.CanFloat = False