Using WPF panels with RadDocking

[Per]

Hi!

I would like to mix WPF panels with RadDocking, something like this:

<telerik:RadDocking>
    <telerik:RadSplitContainer Orientation="Horizontal" InitialPosition="DockedLeft">
        <telerik:RadPaneGroup prism:RegionManager.RegionName="Left"/>
    </telerik:RadSplitContainer>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*"/>
            <RowDefinition Height="0.5*"/>
        </Grid.RowDefinitions>
        <telerik:DocumentHost>
            <telerik:RadSplitContainer>
                <telerik:RadPaneGroup prism:RegionManager.RegionName="Main1"/>
            </telerik:RadSplitContainer>
        </telerik:DocumentHost>
        <telerik:DocumentHost Grid.Row="1">
            <telerik:RadSplitContainer>
                <telerik:RadPaneGroup prism:RegionManager.RegionName="Main2"/>
            </telerik:RadSplitContainer>
        </telerik:DocumentHost>
    </Grid>
</telerik:RadDocking>

I have tried different ways of accomplishing this without success. Is it possible to mix WPF panels with RadDocking?

What I'm trying to achieve is to have two DocumentHosts inside a Grid so I can dynamically adjust the available space for them.

One idea I had was to use nested RadDocking instances, but that isn't supported in the current version. The error I get when trying this suggests to set AllowUnsafeMode property, but I can not find that property. Where is it?

Any suggestions on how to solve my problem is appreciated!

[Miroslav Nedyalkov]

Hello Per,

The Docking control items can only be RadSplitContainers and the items of the SplitContainers can only be either SplitContainer or PaneGroups. You cannot place Grids directly into the Docking control.

What I would suggest you to accomplish this scenario is to have two groups in the DocumentHost SplitContainer - it will automatically adjust the space between them. Here is an example of my suggestion:

<telerik:RadDocking>
    <telerik:RadSplitContainer Orientation="Horizontal" InitialPosition="DockedLeft">
        <telerik:RadPaneGroup prism:RegionManager.RegionName="Left"/>
    </telerik:RadSplitContainer>

    <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup prism:RegionManager.RegionName="Main1" />
            <telerik:RadPaneGroup prism:RegionManager.RegionName="Main1" />
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
</telerik:RadDocking>

Regards,
Miroslav Nedyalkov
the Telerik team

[Per]

Unfortunately that isn't a possible solution for me.

I'll try to illustrate the problem with another example that almost accomplish what I need.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0*" x:Name="_rowDefinition1"/>
        <RowDefinition Height="1*" x:Name="_rowDefinition2"/>
    </Grid.RowDefinitions>
    <telerik:RadDocking>
        <telerik:RadDocking.DocumentHost>
            <telerik:RadSplitContainer>
                <telerik:RadPaneGroup prism:RegionManager.RegionName="Main1"/>
            </telerik:RadSplitContainer>
        </telerik:RadDocking.DocumentHost>
    </telerik:RadDocking>
    <telerik:RadDocking Grid.Row="1">
        <telerik:RadSplitContainer Orientation="Horizontal" InitialPosition="DockedLeft">
            <telerik:RadPaneGroup prism:RegionManager.RegionName="Left"/>
        </telerik:RadSplitContainer>
        <telerik:RadDocking.DocumentHost>
            <telerik:RadSplitContainer>
                <telerik:RadPaneGroup prism:RegionManager.RegionName="Main2"/>
            </telerik:RadSplitContainer>
        </telerik:RadDocking.DocumentHost>
    </telerik:RadDocking>
</Grid>

This is a simplified example of the layout at application startup. As you can see the Main1 region is hidden from the beginning. I have a button the user can click that will animate a layout switch where _rowDefinition1 height goes from 0* to 1* and _rowDefinition2 height goes from 1* to 0*, and the result is that Main2 region is hidden instead.
The problem with the above solution is that the Left region will be hidden when Main2 is hidden. I would like the Left region (or other docked panes) to be visible all the time, regardless of Main1 or Main2 mode.

In my first post I asked for the AllowUnsafeMode property that an error message suggests when I tried using nested RadDocking, where can I find it?

[Miroslav Nedyalkov]

Hi Per,

 What I would suggest you is to use PropoprtionalStackPanel.RelativeSize attached property to change the relative width of a PaneGroup. As this property is of type Size you cannot directly animate it, but you could add an attached property for example:

public static double GetRelativeWidth(DependencyObject obj)
{
    return (double)obj.GetValue(RelativeWidthProperty);
}

public static void SetRelativeWidth(DependencyObject obj, double value)
{
    obj.SetValue(RelativeWidthProperty, value);
}

// Using a DependencyProperty as the backing store for RelativeWidth.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty RelativeWidthProperty =
    DependencyProperty.RegisterAttached("RelativeWidth", typeof(double), typeof(MainWindow), new PropertyMetadata(200d, OnRelativeWidthPropertyChanged));

private static void OnRelativeWidthPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var oldSize = ProportionalStackPanel.GetRelativeSize(d);
    ProportionalStackPanel.SetRelativeSize(d, new Size(GetRelativeWidth(d), oldSize.Height));
}

The default size of a item in a SplitContainer is 100,100. And to use the following XAML (the sample animation is included:

<telerik:RadDocking>
    <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer Orientation="Horizontal">
            <telerik:RadPaneGroup x:Name="main1Group" local:MainWindow.RelativeWidth="0">
                <telerik:RadPaneGroup.Resources>
                    <Storyboard x:Key="showAnimation">
                        <DoubleAnimation Storyboard.TargetName="main1Group" Storyboard.TargetProperty="(local:MainWindow.RelativeWidth)" To="100" Duration="0:0:1" />
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="main1Pane" Storyboard.TargetProperty="IsHidden">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <sys:Boolean>False</sys:Boolean>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </telerik:RadPaneGroup.Resources>
                <telerik:RadPane x:Name="main1Pane" Header="main1" IsHidden="True" />
            </telerik:RadPaneGroup>
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="main2">
                    <Button Content="Show main1" Click="Button_Click_1" />
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
    <telerik:RadSplitContainer>

        <telerik:RadPaneGroup>
            <telerik:RadPane Header="left" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

Hope this helps.

All the best,
Miroslav Nedyalkov
the Telerik team

[Per]

Thank you for your support, very detailed examples, appreciated! Now I know what my alternatives are, I'm sure we will solve it in some way.

A feature request from us is the possibility to mix default WPF panels with RadDocking for more flexibility when designing the UI.

Thank you for your time.

[Miroslav Nedyalkov]

Hi Per,

We will consider your suggestion, but I'm afraid that the Docking control will not be able to easily handle using arbitrary panels around its containers. We might consider enabling using arbitrary panels for the ItemsPanelTemplate property of the RadSplitContainer controls, which is not currently supported. This would be the correct way for more complex scenarios. The problem in this case will be that the SplitContainers are dynamically dragged created and destroyed.

All the best,
Miroslav Nedyalkov
the Telerik team