RadControls for WPF
Contents

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 like the one on the snapshot below. Some practical examples of such layouts are Explorer-like and Outlook-like interfaces.

 

Each split container is painted in a different color.

Note

The class that represents the split container is Telerik.Windows.Controls.RadSplitContainer.

This topic covers the following features of the RadSplitContainer:

Setting the Orientation Property in XAML

When you want to define the orientation (Vertical or Horizontal) in which the panes are ordered inside the container, then you need to set the Orientation property of the RadSplitContainer.

Tip
Setting the Orientation property of a RadSplitContainer is similar to setting the Orientation property of a StackPanel.
  • Setting the Orientation property to Vertical

When you want to achieve vertically oriented layout, you need to set the Orientation property to Vertical. See the example below:

CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" Orientation="Vertical">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 1" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2"  />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

 

  • Setting the Orientation property to Horizontal

When you want to achieve horizontally oriented layout, you need to set the Orientation property to Horizontal. Consider the previous example. If you set the container's Orientation to Horizontal:

CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" Orientation="Horizontal">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 1" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2"  />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

Then the result will be:

 

Setting the Orientation Property in the Code-Behind

The RadSplitContainer's Orientation can also be set in the code-behind.

  • Setting the Orientation property to Vertical
CopyC#
private void SetOrientationToVertical()
{
    radSplitContainer.Orientation = Orientation.Vertical;
}
CopyVB.NET
Private Sub SetOrientationToVertical()
    radSplitContainer.Orientation = Orientation.Vertical
End Sub
  • Setting the Orientation property to Horizontal
CopyC#
private void SetOrientationToHorizontal()
{
    radSplitContainer.Orientation = Orientation.Horizontal;
}
CopyVB.NET
Private Sub SetOrientationToHorizontal()
    radSplitContainer.Orientation = Orientation.Horizontal
End Sub
Tip
The default Orientation for the RadSplitContainer is Horizontal.

Setting the InitialPosition of the RadSplitContainer in XAML

When you want to specify the initial dock position of the RadSplitContainer that is inside a Telerik.Windows.Controls.RadDocking, you need to set the InitialPosition property.

The InitialPosition is a Telerik.Windows.Controls.DockState enumeration, which offers the following values:

  • DockedLeft - use this value, when you want the RadSplitContainer to be positioned on the left side of the RadDocking control.
CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" InitialPosition="DockedLeft">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 1" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2"  />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

 

  • DockedTop - use this value, when you want the RadSplitContainer to be positioned on the top side of the RadDocking control.
CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" InitialPosition="DockedTop">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 1" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2"  />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

 

  • DockedRight - use this value, when you want the RadSplitContainer to be positioned on the right side of the RadDocking control.
CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" InitialPosition="DockedRight">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 1" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2"  />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

 

  • DockedBottom - use this value, when you want the RadSplitContainer to be positioned on the bottom side of the RadDocking control.
CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" InitialPosition="DockedBottom">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 1" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2"  />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

 

  • FloatingOnly - use this value when you want the RadSplitContainer to be initially hosted in a floatable Tool Window.
CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" InitialPosition="FloatingOnly">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 1" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2"  />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

 

  • FloatingDockable - use this value when you want the RadSplitContainer to be initially hosted in a floatable Tool Window.
CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" InitialPosition="FloatingDockable">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 1" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2"  />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

 

Note

Note the difference between FloatingOnly and FloatingDockable. The both will make your pane(s) floatable. However, when you set the InitialPosition to be FloatingOnly, then during run-time the user won't be able to dock the pane(s).

Setting the InitialPosition of the RadSplitContainer in the Code-Behind

The RadSplitContainer's InitialPosition property can also be set in the code-behind. See the code-snippets below:

  • DockedLeft
CopyC#
private void SetInitialPositionToLeft()
{
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.DockedLeft;
}
CopyVB.NET
Private Sub SetInitialPositionToLeft()
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.DockedLeft
End Sub
  • DockedTop
CopyC#
private void SetInitialPositionToTop()
{
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.DockedTop;
}
CopyVB.NET
Private Sub SetInitialPositionToTop()
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.DockedTop
End Sub
  • DockedRight
CopyC#
private void SetInitialPositionToRight()
{
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.DockedRight;
}
CopyVB.NET
Private Sub SetInitialPositionToRight()
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.DockedRight
End Sub
  • DockedBottom
CopyC#
private void SetInitialPositionToBottom()
{
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.DockedBottom;
}
CopyVB.NET
Private Sub SetInitialPositionToBottom()
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.DockedBottom
End Sub
  • FloatingOnly
CopyC#
private void SetInitialPositionToFloatingOnly()
{
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.FloatingOnly;
}
CopyVB.NET
Private Sub SetInitialPositionToFloatingOnly()
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.FloatingOnly
End Sub
  • FloatingDockable
CopyC#
private void SetInitialPositionToFloatingDockable()
{
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.FloatingDockable;
}
CopyVB.NET
Private Sub SetInitialPositionToFloatingDockable()
    radSplitContainer.InitialPosition = Telerik.Windows.Controls.Docking.DockState.FloatingDockable
End Sub
Tip
Place each RadPane (RadPaneGroup) in a separate split container to have the power to initially dock them as desired using the InitialPosition property.

Setting the InitialSize of the RadSplitContainer

You can set the initial size of your split containers using the attached property DockingPanel.InitialSize.

CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer telerik:DockingPanel.InitialSize="80,200">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Left Pane" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

On the snapshot you can see that the pane titled "Left Pane" has width set to 80, while its height is equal to the height of the container to which it is docked, ignoring the height specified by the DockingPanel.InitialSize property.

 

Setting the Initial FloatingSize of the RadSplitContainer

Similarly to the initial position, you have the ability to set the initial floating size of the RadSplitContainer.

For this purpose you need to set the RadDocking.FloatingSize attached property like it is shown in the example below:

CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" InitialPosition="FloatingDockable"
        telerik:RadDocking.FloatingSize="300,300">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 1" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2"  />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>
Note

Note that the InitialPosition must be set either to FloatingOnly or FloatingDockable. Otherwise setting the RadDocking.FloatingSize attached property will not affect the size of the split container.

Tip
If you want to resize the RadSplitContainer during run-time, then just use the Resizer.

Setting the Initial FloatingLocation of the RadSplitContainer

Similarly to the initial floating size you have the ability to set the initial floating location of the RadSplitContainer.

For this purpose you need to set the RadDocking.FloatingLocation attached property like it is shown in the example below:

CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer x:Name="radSplitContainer" InitialPosition="FloatingDockable"
        telerik:RadDocking.FloatingLocation="10,10">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 1" Content="Pane Left 1" />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2"  />
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>
Note

Note that the InitialPosition must be set either to FloatingOnly or FloatingDockable. Otherwise setting the RadDocking.FloatingLocation attached property will not affect the location of the split container.

Setting the RelativeSize of the RadSplitContainer

For this purpose you need to set the RelativeSize attached property of the ProportionalStackPanel class. By using this property you can proportionally divide the width or the hight occupied by two or more RadSplitContainers placed in the same RadSplitContainer. For example, if you have two split containtainers, the first one should occupy 1/3 of the available width and the second - the remaining 2/3, you have to set this proportion (1:2) in their widths as it is shown in the code snippet below.

CopyXAML
<telerik:RadDocking x:Name="radDocking">
    <telerik:RadSplitContainer InitialPosition="DockedTop">
        <telerik:RadSplitContainer telerik:ProportionalStackPanel.RelativeSize="200, 200">
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Width: 1/3"  />
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
        <telerik:RadSplitContainer telerik:ProportionalStackPanel.RelativeSize="400, 200">
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Width: 2/3" />
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

The default value is 200, 200.

Adding PaneGroups/SplitContainers to the RadSplitContainer Programmatically

In order to add a pane group or another split container in the code-behind, you need to use the RadSplitContainer's Items collection.

Tip
There is another way for adding Pane Groups to a RadSplitContainer. You could use the RadSplitContainer's AddItem method. However, the normal way to add items is to use the Items collection. This method is used for shortcut if you need to add items "around" a pane group.

Other Important Properties Exposed by the RadSplitContainer

  • IsInDocumentHost - read-only boolean property. Returns whether the current RadPaneGroup is placed in DocumentHost.
  • IsInToolWindow - read-only boolean property. Returns whether the current RadPaneGroup is in Tool Window.
  • SplitterPosition - read-only property. Returns the current dock position of the RadSplitContainer. If the container is in floatable window, the return value is null.

Styling the RadSplitContainer

To learn how to style the RadSplitContainer in your applications take a look at the Styling the RadSplitContainer topic.

See Also