Edit this page

Document Host

The DocumentHost is meant 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 of it.

Here is the XAML declaration of the above structure.

XAML

<telerik:RadDocking x:Name="radDocking">
    <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup x:Name="radPaneGroup" >
                <telerik:RadPane x:Name="radPane1" Header="Document 1">
                    <TextBlock TextWrapping="Wrap" Text=""></TextBlock>
                </telerik:RadPane>
                <telerik:RadPane x:Name="radPane2" Header="Document 2">
                    <TextBlock TextWrapping="Wrap" Text=""></TextBlock>
                </telerik:RadPane>
                <telerik:RadPane x:Name="radPane3" Header="Document 3">
                    <TextBlock TextWrapping="Wrap" Text=""></TextBlock>
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
</telerik:RadDocking>

Since the DocumentHost is meant to host the editable documents in your application, it is good idea to use RadDocumentPanes instead of RadPanes.

Placing RadPaneGroup directly in the DocumentHost is not a supported scenario in the RadDocking control. The RadPaneGroup needs to be placed in a RadSplitContainer.

Modifying DocumentHost

The DocumentHost is part of the template of the RadDocking control. To learn how to modify it, take a look at the Templating the RadDocking topic.

Setting the CloseButtonPosition

You could easily set the close button position of the Panes that are placed in the DocumentHost by setting the CloseButtonPosition property of the RadDocking control to one of the three built-in predefined settings (InGroup, InPane and InPaneAndGroup).

The next code snippet shows how to set the CloseButtonPosition to InPane:

XAML

<telerik:RadDocking CloseButtonPosition="InPane">
    <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup x:Name="radPaneGroup1" >
                <telerik:RadPane x:Name="radPane11" Header="Document 1">
                    <TextBlock TextWrapping="Wrap" Text=""></TextBlock>
                </telerik:RadPane>
                <telerik:RadPane x:Name="radPane21" Header="Document 2">
                    <TextBlock TextWrapping="Wrap" Text=""></TextBlock>
                </telerik:RadPane>
                <telerik:RadPane x:Name="radPane31" Header="Document 3">
                    <TextBlock TextWrapping="Wrap" Text=""></TextBlock>
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
</telerik:RadDocking>

The next descriptions describe the built-in predefined CloseButtonPosition settings and their visual representation when they are set:

  1. InGroup – this is the default value of the CloseButtonPosition property which causes the close button of the currently active Pane in the PaneGroup to be visible in the top right corner of the PaneGroup

    raddocking-features-document-host-2

  2. InPane – places separate close button for each Pane in their tab

    raddocking-features-document-host-3

  3. InPaneAndGroup – places separate close button for each Pane in their tab and a close button for the currently active Pane in the PaneGroup in the top right corner of the group.

    raddocking-features-document-host-4

Showing Arrows and DropDown Button

When the number of Panes inside the DocumentHost increases and there is not enough space available inside the tabstrip they begun to shrink. In order to see the whole Headers of the Panes you can use the ScrollViewer.HorizontalScrollBarVisibility attached property of the PaneGroup inside the DocumentHost. Arrows will be visualized on both sides of the tabstrip:

XAML

<telerik:RadPaneGroup ScrollViewer.HorizontalScrollBarVisibility="Auto"/>

Figure 1: DocumentHost with a visible HorizontalScrollBar:

By design the HorizontalScrollBarVisibility property is disabled and can be visualized either by setting it to Visible or Auto (the arrow buttons will become visible when the space is not enough).

In addition to this you could also display the drop down menu button that contains a list of all Panes inside the DocumentHost. For that purpose the DropDownDisplayMode property could be used:

XAML

<telerik:RadPaneGroup ScrollViewer.HorizontalScrollBarVisibility="Auto" DropDownDisplayMode="Visible"/>

The DropDownDisplayMode property could be set to any of the following values:

  • Collapsed – the drop down will never be shown.
  • Visible – the drop down will always be visible.
  • WhenNeeded – the drop down will be shown only when there is not enough space the Tabs to be arranged.

Figure 2 demonstrate the appearance of the DocumentHost when both properties are set.

Figure 2: DocumentHost with visible HorizontalScrollBar and drop down menu button:

See Also