Edit this page

RadPane

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.

This help article covers the following topics:

RadPane cannot exist separately, it always has to be placed inside of a RadPaneGroup.The reason for this is because RadPane is a container for the RadPaneGroup which inherits ItemsControl.

A RadPane should be always placed inside of a RadPaneGroup.

Here is a sample XAML code, showing you how to add two RadPane instances to a RadDocking control:

XAML

<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer">
        <telerik:RadPaneGroup x:Name="radPaneGroup">
            <telerik:RadPane x:Name="radPane1" Header="Document 1">
                <TextBlock Text="Some simple text here"></TextBlock>
            </telerik:RadPane>
            <telerik:RadPane x:Name="radPane2" Header="Document 2">
                <TextBlock Text="Some simple text here"></TextBlock>
            </telerik:RadPane>
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

C#

RadPane radPane1 = new RadPane();
radPane1.Header = "Document 1";
radPane1.Content = new TextBlock() { Text = "Some simple text here" };

RadPane radPane2 = new RadPane();
radPane2.Header = "Document 2";
radPane2.Content = new TextBlock() { Text = "Some simple text here" };

radPaneGroup.Items.Add(radPane1);
radPaneGroup.Items.Add(radPane2);

VB.NET

Dim radPane1 As New RadPane()
radPane1.Header = "Document 1"
Dim textBlock As New TextBlock()
textBlock.Text = "Some simple text here"
radPane1.Content = textBlock

Dim radPane2 As New RadPane()
radPane2.Header = "Document 2"
textBlock = New TextBlock()
textBlock.Text = "Some simple text here"
radPane2.Content = textBlock

RadPaneGroup.Items.Add(radPane1)
RadPaneGroup.Items.Add(radPane2)

And here is the result:

The control structure defined in the above example is (from the root container to the top one):

  • RadDocking

    • RadSplitContainer

      • RadPaneGroup

        • RadPane

Keep in mind that in order to have functional docking you should stick to this structure without skipping any of its elements.

RadPane States

The standard RadPane can be docked/floating, pinned/unpinned or grouped. On the snapshot below you can see the appearance of the RadPane in each one of these states.

  • Docked - RadPane is docked to a RadDocking container.

  • Floating - all not docked RadPane instances are floating and are hosted inside of a floatable ToolWindow that appears on the top of the other controls.

  • Pinned - the pinned RadPane is always visible and does not auto hide.

  • Unpinned - the unpinned RadPane is shown only when the mouse cursor is over it and hidden when the cursor leaves its area.

  • Grouped Panes - when multiple RadPane instances are docked inside one and the same container, a separate tab page is created for each one of them. To learn more take a look at the Grouped Panes topic.

Get notified about the pane's state changes via the RadDocking's event PaneStateChanged. Find out more about the RadDockingevents.

Visual Elements

The major control elements of a the standard RadPane are:

  • Content Area - this is the area inside of a RadPane where your content will be hosted. To set it or get it just use the RadPane's property Content.

  • Header - this is the header control of a RadPane. In most cases it displays textual information. To learn how to customize the header take a look at: Styling the Pane Header or How to Add Buttons to the Pane Header.

  • Menu - this menu is created automatically for you and contains the RadPane's most common commands. It allows you to make it floating, dockable, part of a tabbed document or just hide it. The menu commands are programmatically accessible via the RadPane's property MenuCommands. To learn how to customize this menu take a look at How to Customize or Remove the RadPane's Menu or RadDocking Localization.

  • Pin/Unpin Button - this button allows you to pin/unpin the RadPane in case it is docked inside of the RadSplitContainer. It is visible by default but if you want to hide it, and prevent the user from changing the pin state of your pane, just set the property CanUserPin to False and the button will be hidden. If you need to add more buttons take a look at the How to Add Buttons to the Pane Header topic.

  • Close button - this button allows you to close the RadPane. It is visible by default but if you want to hide it, and prevent the user from closing your pane, just set the RadPane's property CanUserClose to False and the button will be hidden. To learn more take a look at the How to Disable the Close Button topic.

  • Tab - the tab is visible only when a RadPane is docked inside of a container that hosts more than one panes. In that case each RadPane is placed as a separate tab item. To learn more take a look at the Grouped Panes topic.

Closing RadPane instances

Each RadPane is closable by default via the Close button or the "Hide" menu shown on the snapshots above.

You can also hide/show your RadPane instances programmatically using the boolean RadPane's property IsHidden. When a RadPane is closed it is actually hidden and you can always make it visible again when needed.

XAML

<telerik:RadPane x:Name="radPane" IsHidden="True"/>

C#

radPane.IsHidden = true;

VB.NET

radPane1.IsHidden = True

To learn how to disable the close button or how to handle the RadDocking's PreviewClose event take a look at the How to Disable the Close Button topic.

Styling and Appearance of the RadPane

If you need to customize or style your RadPane instances take a look at the following topics:

Conditional Docking

Thanks to the events exposed by the RadDocking and its elements you are able to control the docking process at run-time. For more information take a look at the How to Implement Conditional Docking topic.

RadPane Activation

With our Q3 2013 SP release of RadDocking we are introducing a public IsActive Boolean property and a corresponding OnIsActiveChanged event that is triggered when that property changes its value.

Property/Event Description
public bool IsActive Gets or sets a value indicating whether this pane is active. This is a DependencyProperty.
protected virtual void OnIsActiveChanged() Occurs when IsActive property is changed.

There are two possible approaches when activating/deactivating a Pane. Using the ActivePane property of the RadDocking control or using the newly added IsActive property of the RadPane. Both approaches will lead to the same final result but could be used in different scenarios. Using the IsActive property of the RadPane is useful when you want to set a Pane active and do not have a reference to the RadDocking control itself.

The next example will demonstrate how you could activate (focus) a RadPane without the need to have a reference to the RadDocking control itself. You simply set the IsActive property of any RadPane to True.

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Content="Set IsActive" Click="Button_Click"/>
    <telerik:RadDocking Grid.Row="1" >
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Pane 1" IsActive="True"/>
                <telerik:RadPane Header="Pane 2"/>
                <telerik:RadPane Header="Pane 3" x:Name="Pane3"/>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking>
</Grid>

C#

private void Button_Click(object sender, RoutedEventArgs e)
{
    this.Pane3.IsActive = true;
}

You can also check the article about the PaneActivationMode property of RadDocking - it indicates which RadPane should be activated when the current active one is closed. By default the next non-disabled and visible RadPane in the PaneGroup is activated.

See Also