Managing Docking Controls Dynamically

The purpose of this tutorial is to show you how to manage the RadDocking control dynamically (using procedural code or XAML).

The following operation will be examined:

Before reading this tutorial you should get familiar with the Visual Structure of the standard RadDocking control and its elements.

For the purpose of this tutorial, you will need to create an empty Silverlight Application project.

In order to use the RadDocking control in your projects you have to add a reference to Telerik.Windows.Controls.Docking.dll and Telerik.Windows.Controls.Navigation.

For the purpose of this tutorial the following RadDocking declaration will be used:

<telerik:RadDocking x:Name="radDocking"> 
    <telerik:RadSplitContainer x:Name="radSplitContainer"> 
        <telerik:RadPaneGroup x:Name="radGroup"> 
            <telerik:RadPane x:Name="radPane1" Header="Server Explorer"/> 
            <telerik:RadPane x:Name="radPane2" Header="Toolbox"/> 
            <telerik:RadPane x:Name="radPane3" Header="Properties"/> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
</telerik:RadDocking> 
  Silverlight RadDocking Sample Declaration

Making a Pane Floatable in the Code-Behind

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

  • Using the MakeFloatingDockable() method

private void MakeFloatingDockable() 
{ 
    radPane1.MakeFloatingDockable(); 
} 
Private Sub MakeFloatingDockable() 
    radPane1.MakeFloatingDockable() 
End Sub 
  • Using the MakeFloatingOnly() method

private void MakeFloatingOnly() 
{ 
    radPane1.MakeFloatingOnly(); 
} 
Private Sub MakeFloatingOnly() 
    radPane1.MakeFloatingOnly() 
End Sub 

Note that 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().

Executing any of the described methods will lead to the following result:

Silverlight RadDocking with Floating Pane

MakeFloatingOnly(), MakeFloatingDockable() and MakeDockable() methods work only when all of the 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.

Making a Pane Floatable in XAML

In order to make a pane floatable during design-time, you need to set the InitialPosition property of the respective RadSplitContainer either to FloatingDockable or FloatingOnly.

  • Using the FloatingDockable initial position

<telerik:RadDocking x:Name="radDocking1"> 
    <telerik:RadSplitContainer x:Name="radSplitContainer1" InitialPosition="FloatingDockable"> 
        <telerik:RadPaneGroup x:Name="radGroup1"> 
            <telerik:RadPane x:Name="radPane11" Header="Server Explorer"/> 
            <telerik:RadPane x:Name="radPane21" Header="Toolbox"/> 
            <telerik:RadPane x:Name="radPane31" Header="Properties"/> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
</telerik:RadDocking> 
  • Using the FloatingOnly initial position

<telerik:RadDocking x:Name="radDocking2"> 
    <telerik:RadSplitContainer x:Name="radSplitContainer2" InitialPosition="FloatingOnly"> 
        <telerik:RadPaneGroup x:Name="radGroup2"> 
            <telerik:RadPane x:Name="radPane12" Header="Server Explorer"/> 
            <telerik:RadPane x:Name="radPane22" Header="Toolbox"/> 
            <telerik:RadPane x:Name="radPane32" Header="Properties"/> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
</telerik:RadDocking> 

Note, that when setting the InitialPosition to FloatingOnly, you won't be able to dock the pane during run-time. In order to make the pane dockable again, you need to invoke the MakeDockable() method of the RadPane class.

Making a Pane Dockable in the Code-Behind

In order to make a pane dockable, you need to invoke the MakeDockable() method of an instance of the RadPane class.

private void MakeDockable() 
{ 
    radPane1.MakeDockable(); 
} 
Private Sub MakeDockable() 
    radPane1.MakeDockable() 
End Sub 

MakeDockable method works only when all of the objects are constructed and added to the object tree. Which means that you should invoke it after the Loaded event of the RadDocking control has been fired.

Making a pane dockable will not dock the pane to any of the sides in the docking area. But it will allow the user to dock the pane during run-time via drag and drop.

Making a Pane Dockable in XAML

In order to make a pane dockable during design-time, you need to set the InitialPosition property of the respective RadSplitContainer to FloatingDockable, like it is shown in the code below.

<telerik:RadDocking x:Name="radDocking3"> 
    <telerik:RadSplitContainer x:Name="radSplitContainer3" InitialPosition="FloatingDockable"> 
        <telerik:RadPaneGroup x:Name="radGroup3"> 
            <telerik:RadPane x:Name="radPane13" Header="Server Explorer"/> 
            <telerik:RadPane x:Name="radPane23" Header="Toolbox"/> 
            <telerik:RadPane x:Name="radPane33" Header="Properties"/> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
</telerik:RadDocking> 

Setting the InitialPosition to FloatingDockable or FloatingOnly will make your pane(s) floating. However, using the FloatingOnly value will not allow the user to dock the pane during run-time.

Docking a Pane in the Code-Behind

In order to dock a pane in the code-behind, you need to use the AddItem method of the RadGroupPane class.

public void AddItem(RadPane item, DockPosition dockPosition) { } 
Public Sub AddItem(ByVal item As RadPane, ByVal dockPosition As DockPosition) 
End Sub 

Docking a Pane Design-Time

In order to dock a pane during design-time, you need to set the InitialPosition property of the respective RadSplitContainer to any of the following values:

  • DockedLeft

<telerik:RadDocking x:Name="radDocking4"> 
    <telerik:RadSplitContainer x:Name="radSplitContainer4" InitialPosition="DockedLeft"> 
        <telerik:RadPaneGroup x:Name="radGroup4"> 
            <telerik:RadPane x:Name="radPane14" Header="Server Explorer"/> 
            <telerik:RadPane x:Name="radPane24" Header="Toolbox"/> 
            <telerik:RadPane x:Name="radPane34" Header="Properties"/> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
</telerik:RadDocking> 

Silverlight RadDocking Panes Docked Left

  • DockedTop

<telerik:RadDocking x:Name="radDocking5"> 
    <telerik:RadSplitContainer x:Name="radSplitContainer5" InitialPosition="DockedTop"> 
        <telerik:RadPaneGroup x:Name="radGroup5"> 
            <telerik:RadPane x:Name="radPane15" Header="Server Explorer"/> 
            <telerik:RadPane x:Name="radPane25" Header="Toolbox"/> 
            <telerik:RadPane x:Name="radPane35" Header="Properties"/> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
</telerik:RadDocking> 

Silverlight RadDocking Panes Docked Top

  • DockedRight

<telerik:RadDocking x:Name="radDocking6"> 
    <telerik:RadSplitContainer x:Name="radSplitContainer6" InitialPosition="DockedRight"> 
        <telerik:RadPaneGroup x:Name="radGroup6"> 
            <telerik:RadPane x:Name="radPane16" Header="Server Explorer"/> 
            <telerik:RadPane x:Name="radPane26" Header="Toolbox"/> 
            <telerik:RadPane x:Name="radPane36" Header="Properties"/> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
</telerik:RadDocking> 

Silverlight RadDocking Panes Docked Right

  • DockedBottom

<telerik:RadDocking x:Name="radDocking7"> 
    <telerik:RadSplitContainer x:Name="radSplitContainer7" InitialPosition="DockedBottom"> 
        <telerik:RadPaneGroup x:Name="radGroup7"> 
            <telerik:RadPane x:Name="radPane17" Header="Server Explorer"/> 
            <telerik:RadPane x:Name="radPane27" Header="Toolbox"/> 
            <telerik:RadPane x:Name="radPane37" Header="Properties"/> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
</telerik:RadDocking> 

Silverlight RadDocking Panes Docked Bottom

Pin/Unpin a Pane in the Code-Behind

In order to pin a pane in the code-behind, you need to set the IsPinned property of the RadPane class to True.

private void PinPane() 
{ 
    radPane1.IsPinned = true; 
} 
Private Sub PinPane() 
    radPane1.IsPinned = True 
End Sub 

Respectively, in order to unpin a pane in the code-behind, you need to set the IsPinned property of the RadPane class to False.

private void UnpinPane() 
{ 
    radPane1.IsPinned = false; 
} 
Private Sub UnpinPane() 
    radPane1.IsPinned = False 
End Sub 

If you intend to use the IsPinned property in the code-behind, make sure you are setting its value after the Loaded event has been fired. Otherwise it won't work.

Pin/Unpin a Pane in XAML

In order to pin a pane in XAML, you need to set the IsPinned attribute of the RadPane to True.

Respectively, in order to unpin a pane in XAML, you need to set the IsPinned attribute of the RadPane to False.

<telerik:RadDocking x:Name="radDocking8"> 
    <telerik:RadSplitContainer x:Name="radSplitContainer8"> 
        <telerik:RadPaneGroup x:Name="radGroup8"> 
            <telerik:RadPane x:Name="radPane18" Header="Server Explorer" IsPinned="False"/> 
            <telerik:RadPane x:Name="radPane28" Header="Toolbox"/> 
            <telerik:RadPane x:Name="radPane38" Header="Properties"/> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
</telerik:RadDocking> 

Closing a Pane in the Code-Behind

If you want to close a pane in the code-behind, then you need to set the IsHidden property of the RadPane class to True.

private void ClosePane() 
{ 
    radPane1.IsHidden = false; 
} 
Private Sub ClosePane() 
    radPane1.IsHidden = False 
End Sub 

If you need further management of the RadDocking you can take a look at some of the following topics:

If you need further customizations of the RadDocking you can take a look at some of the following topics:

See Also

In this article