RadDocking with GridSplitter

[Jan Waiz & Daniel Nauck mono-project.de]

Let me explain the scenario:

In a WPF-Window i have a grid with one row and three columns. The columns are used as follow:
Column 0 => RadDocking
Column 1 => GridSplitter
Column 2 => A ContentControl

When moving the gridsplitter, the raddocking will be resized well. But:

The RadDocking contains for example two panes. If i minimize the panes, they are shown on the left site - as expected. But the GridSplitter did not "follow to the left".

Okay - the RadDocking is "working" in the area defined by grid column 0 and may be it did not know anything about other controls in the grid that must be resized if all panes in a raddocking are minimzed. Is there a solution?

I have a small example app that shows the problem at runtime - below the xaml of the window.

Regards
Jan Waiz

<Window x:Class="WPFprismMEFRadDockingTest.Views.ShellView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:prism="http://www.codeplex.com/prism"
        xmlns:controls="clr-namespace:WPFprismMEFRadDockingTest.Controls"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
        Title="Prism Shell" WindowStartupLocation="CenterScreen" Height="620" Width="850"
        Icon="../Images/PnPIcon.ico"
        mc:Ignorable="d" d:DesignHeight="720" d:DesignWidth="900">
    <Window.Background>
        <ImageBrush ImageSource="/Images/background.jpg"  Stretch="UniformToFill"/>
    </Window.Background>
    <Window.Resources>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" MinWidth="25"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>

        <!-- When minimizing the 2 panes, they will be showed at the left site -->
        <!-- but the area (defined by the grid) is not minimized, too. And the -->
        <!-- control in the right grid-area did not use the full space. Seems, -->
        <!-- that the gridsplitter did not "follow" the minimized panes...     -->
        <telerik:RadDocking x:Name="LeftRadDocking"
                                telerikControls:StyleManager.Theme="Transparent"
                                HasDocumentHost="False"
                                Grid.Row="1" Grid.Column="0"
                                Margin="10,5,5,10"
                                Padding="0">
            <telerik:RadDocking.Background>
                <SolidColorBrush />
            </telerik:RadDocking.Background>
            <telerik:RadDocking.BorderBrush>
                <SolidColorBrush />
            </telerik:RadDocking.BorderBrush>

            <telerik:RadSplitContainer Name="LeftRadSplitContainer"
                                       Background="#99FFFFFF" Opacity="0.5"
                                       InitialPosition="DockedLeft">
                <telerik:RadPaneGroup Opacity="1">

                    <telerik:RadPaneGroup.Background>
                        <SolidColorBrush />
                    </telerik:RadPaneGroup.Background>

                    <telerik:RadPane Header="Pane Left 1">
                        <telerik:RadPane.Content>
                            <TextBlock TextWrapping="Wrap"
                                       Text="This is Pane Left 1 to fill the area with some senseless text." />
                        </telerik:RadPane.Content>
                    </telerik:RadPane>
                    <telerik:RadPane Header="Pane Left 2" Content="Pane Left 2" >
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>

        <GridSplitter Grid.Row="1" Grid.Column="1"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Stretch"
                      Width="5"
                      ShowsPreview="True"
                      ResizeDirection="Columns"
                      Background="Transparent"/>

        <ContentControl x:Name="DesktopRegion"
                        Grid.Row="1" Grid.Column="2"
                        Margin="5,5,15,10">
            <ContentControl.Template>
                <ControlTemplate TargetType="ContentControl">
                    <Grid>
                        <controls:RoundedBox />
                        <ContentPresenter Margin="10,0,10,0" Content="{TemplateBinding Content}" />
                    </Grid>
                </ControlTemplate>
            </ContentControl.Template>
        </ContentControl>

    </Grid>
</Window>

[Dani]

Hi Jan,

In order for the RadDocking control to fit your scenario, you will need to have the following widths for the grid columns:

<Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

However, the RadDocking control is designed to be used as a root control. When it is placed in another element that measures its children with infinity, such as a Grid Row / Column, a StackPanel or a ScrollViewer, it will throw an exception. This is because the control is not allowed to be measured with infinity.

What you could do is to set AllowUnsafeMode to True (and also align the control to the left), which will allow the grid column to shrink and the grid splitter to reposition itself. Yet, please keep in mind that setting AllowUnsafeMode to True might trigger some runtime exceptions.

  <telerik:RadDocking x:Name="LeftRadDocking"
                            telerikControls:StyleManager.Theme="Transparent"
                            HasDocumentHost="False"
                            HorizontalAlignment="Left"
                            Grid.Row="1" Grid.Column="0"
                            Margin="10,5,5,10"
                            AllowUnsafeMode="True">
...
</telerik:RadDocking>

I hope this helps.

Kind regards,
Dani
the Telerik team