RadDocking is an advanced Silverlight control providing full Blend support. From within the visual environment of Blend, you can easily perform various tasks such as editing control properties, modifying themes, creating and modifying templates and more.
This tutorial will walk you through the creation of a RadDocking and will show how to:
- Add RadDocking in a control using Expression Blend.
- Add panes and setting their properties (Header, CanUserClose, CanFloat, etc.).
 Note |
|---|
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 and open it in Blend.
| Note |
|---|
In order to use RadDocking control in your projects you have to add references to - Telerik.Windows.Controls.dll
- Telerik.Windows.Controls.Navigation.dll
- Telerik.Windows.Controls.Docking.dll
|
Adding RadDocking
Open the Asset Library (Window->Assets) in Expression Blend and start writing the name of the RadDocking in the search box.
Drag a RadDocking control on the art board.
As a result you can see the RadDocking. The underlaying XAML is pretty simple and looks like this:
CopyXAML
Adding DocumentHost
The Document Host is ment to be the default container for the editable documents in your application. By default it occupies the whole central area of the RadDocking control and each newly added pane is docked as a new tab page inside it. Switch to the XAML view (View -> Active Document View -> XAML View) and add a DocumentHost to the RadDocking. In order to do that you need to set the RadDocking.DocumentHost property.
CopyXAML
<telerik:RadDocking>
<telerik:RadDocking.DocumentHost>
</telerik:RadDocking.DocumentHost>
</telerik:RadDocking>Adding RadSplitContainer
The RadSplitContainer allows you to use movable bars to divide the displayed area into resizable parts. With the RadDocking's SplitContainers you can build complex layouts. Some practical examples of such layouts are Explorer-like and Outlook-like interfaces.
Below you can see how to add a RadSplitContainer inside the DocumentHost. For more information about the RadSplitContainer.
CopyXAML
<telerik:RadDocking>
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
</telerik:RadDocking>Adding RadPaneGroup
Before adding panes to your RadDocking declaration you need to add RadPaneGroup first. RadPane cannot exist separately, it always has to be placed inside of a RadPaneGroup. The reason for this requirement is the fact that RadPaneGroup directly inherits RadTabControl, while the RadPane derives from RadTabItem.
CopyXAML
<telerik:RadDocking>
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer>
<telerik:RadPaneGroup>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
</telerik:RadDocking>Adding RadPanes
RadPane is the main content unit of the RadDocking control. Its main purpose is to act as a host of your content. That's why in order to have functional RadDocking you need to have at least one RadPane placed inside it.
CopyXAML
<telerik:RadDocking>
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer>
<telerik:RadPaneGroup>
<telerik:RadPane>
</telerik:RadPane>
<telerik:RadPane>
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
</telerik:RadDocking>So far your dock should look like the snapshot below:
Setting the Header Property
Select the first tabbed pane.
Set its Header property to "Description".
Repeat the same procedure for the second tabbed pane - set its Header property to "NotDraggable".
Here is the result so far:
The XAML is pretty simple and can be seen on the next figure:
CopyXAML
<telerik:RadDocking>
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer>
<telerik:RadPaneGroup>
<telerik:RadPane Header="Description">
</telerik:RadPane>
<telerik:RadPane Header="NonDraggable">
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
</telerik:RadDocking>| Tip |
|---|
| The DocumentHost control is not a required element. Make an experiment, remove it from the XAML above and run your application to see how the application changes. |
Setting CanFloat Property
As you suggest the second pane (with Header "NonDraggable") cannot be dragged and dropped. In order to do that you need to set the CanFloat property.
Select the second tabbed pane and set the CanFloat property to false.
CopyXAML
<telerik:RadDocking>
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer>
<telerik:RadPaneGroup>
<telerik:RadPane Header="Description">
</telerik:RadPane>
<telerik:RadPane Header="NonDraggable" CanFloat="False">
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
</telerik:RadDocking>Run your demo and try to drag and drop the "Description" pane. You will end up with a floatable window. Now try to drag and drop the "NonDraggable" window.
Note the visual indicators which appear while you are dragging the "Description" pane - these visual indicators are called the Compass menu.
The RadDocking gives you the ability to style them in the way you want. For more information read here.
Adding Some Content
Go back to the design surface in Expression Blend. Switch to the XAML view (View -> Active Document View -> XAML View). Add some content to each one of the panes. For example:
CopyXAML
<telerik:RadDocking Width="300" Height="200">
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer>
<telerik:RadPaneGroup>
<telerik:RadPane Header="Description">
<TextBlock TextWrapping="Wrap" Text="On the Documents tab above press Ctrl + Mouse Left button to display the Popup Menu. You can use the same combination on every tab."/>
</telerik:RadPane>
<telerik:RadPane Header="NonDraggable" CanFloat="False">
<TextBlock TextWrapping="Wrap" Text="This pane cannot be dragged, because it has its property CanFloat set 'False'."/>
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
</telerik:RadDocking>Adding Pinned Panes
The next step is to add panes which are initially pinned to any of the sides in the docking area. Switch again to the XAML view (View -> Active Document View -> XAML View).
Add several panes and set their Header like it is in the XAML below.
CopyXAML
<telerik:RadDocking Width="300" Height="200">
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer>
<telerik:RadPaneGroup>
<telerik:RadPane Header="Description">
<TextBlock TextWrapping="Wrap" Text="On the Documents tab above press Ctrl + Mouse Left button to display the Popup Menu. You can use the same combination on every tab."/>
</telerik:RadPane>
<telerik:RadPane Header="NonDraggable" CanFloat="False">
<TextBlock TextWrapping="Wrap" Text="This pane cannot be dragged, because it has its property CanFloat set 'False'."/>
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer InitialPosition="DockedLeft">
<telerik:RadPaneGroup>
<telerik:RadPane Header="Toolbox"/>
<telerik:RadPane Header="Server Explorer"/>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
<telerik:RadSplitContainer InitialPosition="DockedRight">
<telerik:RadPaneGroup>
<telerik:RadPane Header="Properties"/>
<telerik:RadPane Header="Solution Explorer"/>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
<telerik:RadSplitContainer InitialPosition="DockedBottom">
<telerik:RadPaneGroup>
<telerik:RadPane Header="Output"/>
<telerik:RadPane Header="Error List"/>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking>| Note |
|---|
Two things must be mentioned in the above code snippet: - Note that the three RadSplitContainers you added are not hosted in DocumentHost. The result will be that these splitters can be initially docked to any side of the dock area.
- Note the InitialPosition property. It indicates where the splitter to be initially docked.
|
Here is how the final result should look like:
If you need further customizations of the RadDocking you can take a look at some of the following topics:
You can also save the layout and the content of the pane.
If you need to dive deeper in the RadDocking structure, consider any of the following topics: