[Solved] Change Docking/Position runtime

[Lasse]

Hi there,

I have a setup according to the XAML below in a view, and I want to be able to dock the "ReadingPane" top, left, right or bottom when clicking a button or a menu or whatever (just like the reading pane in MS Outlook), but I cannot figure out how to achieve this with your RadDocking...

<UserControl x:Class="Test"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="366" d:DesignWidth="626" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadDocking Name="RadDocking" HasDocumentHost="False">
            <telerik:RadSplitContainer Name="RadSplitContainerToolBar" InitialPosition="DockedTop" Width="Auto" Height="26">
                <telerik:RadPaneGroup Name="RadGroupToolBar">
                    <telerik:RadPane Name="RadPaneToolBar" PaneHeaderVisibility="Collapsed" CanUserPin="False" CanUserClose="False" CanFloat="False" CanDockInDocumentHost="False" />
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>

            <telerik:RadSplitContainer Name="RadSplitContainerGridView" InitialPosition="DockedLeft">
                <telerik:RadPaneGroup Name="RadGroupGridView">
                    <telerik:RadPane Name="RadPaneGridView" PaneHeaderVisibility="Collapsed" CanUserPin="False">
                        <sdk:Frame HorizontalAlignment="Stretch" Name="FrameGridView" VerticalAlignment="Stretch" />
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>

            <telerik:RadSplitContainer Name="RadSplitContainerReadingPane" InitialPosition="DockedRight">
                <telerik:RadPaneGroup Name="RadGroupReadingPane">
                    <telerik:RadPane Name="RadPaneReadingPane" PaneHeaderVisibility="Collapsed" CanUserPin="False">
                        <TextBlock>ReadingPane</TextBlock>
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>

        <telerik:RadButton Content="Test" Height="Auto" HorizontalAlignment="Left" Margin="39,0,0,0" Name="radButton1" VerticalAlignment="Top" Width="Auto" Click="radButton1_Click" />
        <telerik:RadButton Content="DockLeft" Height="Auto" HorizontalAlignment="Left" Margin="104,0,0,0" Name="radButtonDockLeft" VerticalAlignment="Top" Width="Auto" Click="radButtonDockLeft_Click" />
        <telerik:RadButton Content="DockTop" Height="Auto" HorizontalAlignment="Left" Margin="177,0,0,0" Name="radButtonDockTop" VerticalAlignment="Top" Width="Auto" Click="radButtonDockTop_Click" />
        <telerik:RadButton Content="DockRight" Height="Auto" HorizontalAlignment="Left" Margin="340,-1,0,0" Name="radButtonDockRight" VerticalAlignment="Top" Width="Auto" Click="radButtonDockRight_Click" />
        <telerik:RadButton Content="DockBottom" Height="Auto" HorizontalAlignment="Left" Margin="237,-1,0,0" Name="radButtonDockBottom" VerticalAlignment="Top" Width="Auto" Click="radButtonDockBottom_Click" />
    </Grid>
</UserControl>

I also tried with this XAML, with the DocumentHost in it:

<UserControl x:Class="Test"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="366" d:DesignWidth="626" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadDocking Name="RadDocking">
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer Name="RadSplitContainerGridView">
                    <telerik:RadPaneGroup Name="RadGroupGridView">
                        <telerik:RadPane Name="RadPaneGridView" Header="Description" Visibility="Collapsed" CanUserClose="False">
                            <sdk:Frame HorizontalAlignment="Stretch" Name="FrameGridView" VerticalAlignment="Stretch" />
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>

            <telerik:RadSplitContainer Name="RadSplitContainerToolBar" InitialPosition="DockedTop" Width="Auto" Height="26">
                <telerik:RadPaneGroup Name="RadGroupToolBar">
                    <telerik:RadPane Name="RadPaneToolBar" PaneHeaderVisibility="Collapsed" CanUserPin="False" CanUserClose="False" CanFloat="False" CanDockInDocumentHost="False" />
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>

            <telerik:RadSplitContainer Name="RadSplitContainerReadingPane" InitialPosition="DockedLeft">
                <telerik:RadPaneGroup Name="RadGroupReadingPane">
                    <telerik:RadPane Name="RadPaneReadingPane" PaneHeaderVisibility="Collapsed" Header="Reading Pane" CanUserPin="False">
                        <sdk:Frame HorizontalAlignment="Stretch" Name="FrameReadingPane" VerticalAlignment="Stretch" />
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>

        <telerik:RadButton Content="Test" Height="Auto" HorizontalAlignment="Left" Margin="39,0,0,0" Name="radButton1" VerticalAlignment="Top" Width="Auto" Click="radButton1_Click" />
        <telerik:RadButton Content="DockLeft" Height="Auto" HorizontalAlignment="Left" Margin="104,0,0,0" Name="radButtonDockLeft" VerticalAlignment="Top" Width="Auto" Click="radButtonDockLeft_Click" />
        <telerik:RadButton Content="DockTop" Height="Auto" HorizontalAlignment="Left" Margin="177,0,0,0" Name="radButtonDockTop" VerticalAlignment="Top" Width="Auto" Click="radButtonDockTop_Click" />
        <telerik:RadButton Content="DockRight" Height="Auto" HorizontalAlignment="Left" Margin="340,-1,0,0" Name="radButtonDockRight" VerticalAlignment="Top" Width="Auto" Click="radButtonDockRight_Click" />
        <telerik:RadButton Content="DockBottom" Height="Auto" HorizontalAlignment="Left" Margin="237,-1,0,0" Name="radButtonDockBottom" VerticalAlignment="Top" Width="Auto" Click="radButtonDockBottom_Click" />
    </Grid>
</UserControl>

[Lasse]

Seems removing RadSplitContainers from the RadDock and adding them in a specific order sometimes changes the docking position...

[Konstantina]

Hello Mikkel,

In order to move the pane, first you need to remove it from the previous group using the RemoveFromParent method. Then you can set its new position. Please find more information in this help article.

Hope this information helps.

Kind regards,
Konstantina
the Telerik team

[Lasse]

Sorry but that didn't offer much help - I think that my XAML is not setup correctly with panes, splitters, groups etc.

Do you have an example demonstrating what I describe above?

[Lasse]

I have finally solved the docking layout with the XAML and Code Behind below, also see the attached image.

XAML:

<UserControl x:Class="GridView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
    mc:Ignorable="d"
    d:DesignHeight="414" d:DesignWidth="763" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid>
        <telerik:RadDocking Name="RadDocking" HasDocumentHost="False">

            <telerik:RadSplitContainer Name="RadSplitContainerTop" InitialPosition="DockedTop" Width="Auto" Height="30">
                <telerik:RadPaneGroup Name="RadGroupToolBar" Background="Transparent" BorderThickness="0">
                    <telerik:RadPane Name="RadPaneToolBar" PaneHeaderVisibility="Collapsed">
                        <telerik:RadToolBarTray Name="RadToolBarTray" VerticalAlignment="Top">
                            <telerik:RadToolBar Name="RadToolBar">
                                <telerik:RadButton Content="Create New" Name="ButtonCreateNew" Click="ButtonCreateNew_Click" />
                                <telerik:RadButton Content="Delete Selected" Name="ButtonDeleteSelected" Click="ButtonDeleteSelected_Click" />
                            </telerik:RadToolBar>
                        </telerik:RadToolBarTray>
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>

            <telerik:RadSplitContainer Name="RadSplitContainerBottom" InitialPosition="DockedLeft" Orientation="Horizontal">
                <telerik:RadPaneGroup Name="RadGroup1" >
                    <telerik:RadPane Name="GridViewPane" PaneHeaderVisibility="Collapsed">
                        <telerik:RadGridView x:Name="RadGridView" />
                    </telerik:RadPane>
                </telerik:RadPaneGroup>

                <telerik:RadPaneGroup Name="RadGroup2" >
                    <telerik:RadPane Name="ReadingPane" PaneHeaderVisibility="Collapsed">
                        <sdk:Frame Name="FrameReadingPane" />
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>

        </telerik:RadDocking>

        <telerik:RadBusyIndicator Name="RadBusyIndicator" IsBusy="{Binding Path=IsBusy, ElementName=_domainDataSource}" telerik:Theming.Theme="Expression_Dark" />
    </Grid>
</UserControl>

Code Behind:

private void radButtonDockLeft_Click(object sender, RoutedEventArgs e)
{
    RadSplitContainerBottom.Orientation = Orientation.Horizontal;
    ReadingPane.RemoveFromParent();
    GridView.RemoveFromParent();
    RadGroup1.AddItem(ReadingPane, DockPosition.Left);
    RadGroup2.AddItem(GridView, DockPosition.Left);
}

private void radButtonDockRight_Click(object sender, RoutedEventArgs e)
{
    RadSplitContainerBottom.Orientation = Orientation.Horizontal;
    ReadingPane.RemoveFromParent();
    GridView.RemoveFromParent();
    RadGroup1.AddItem(GridView, DockPosition.Left);
    RadGroup2.AddItem(ReadingPane, DockPosition.Left);
}

private void radButtonDockTop_Click(object sender, RoutedEventArgs e)
{
    RadSplitContainerBottom.Orientation = Orientation.Vertical;
    ReadingPane.RemoveFromParent();
    GridView.RemoveFromParent();
    RadGroup1.AddItem(ReadingPane, DockPosition.Top);
    RadGroup2.AddItem(GridView, DockPosition.Top);
}

private void radButtonDockBottom_Click(object sender, RoutedEventArgs e)
{
    RadSplitContainerBottom.Orientation = Orientation.Vertical;
    ReadingPane.RemoveFromParent();
    GridView.RemoveFromParent();
    RadGroup1.AddItem(GridView, DockPosition.Top);
    RadGroup2.AddItem(ReadingPane, DockPosition.Top);
}

[Konstantina]

Hi Mikkel,

We are glad that you have resolved the issue yourself.

Please let us know if you have further questions.

Kind regards,
Konstantina
the Telerik team