Trouble with RadDocking Layout

[David]

Hi,

I'm having a lot of difficulties in understanding how to create the layout that I am looking for with RadDocking.  I have read the documentation and have looked at the examples however I am still having difficulties.

https://docs.telerik.com/devtools/wpf/controls/raddocking/getting-started/getting-started2#adding-radpane

Is it possible for someone to help me understand how to create the layout attached in my wireframe?

I am having a hard time getting tabs to be on the left, how to size things with RadSplitContainer and understanding the need of DocumentHost.

Thank you.

David

[Kalin]

Hi David,

RadDocking is designed to achieve layout similar to MS Visual Studio. However as I can see on the image you need to have slightly different layout, which can be done using nested Docking controls for the inner groups on the right side. Note that when using nested Dockings it won't be possible to transfer the Pane from one Docking to another.

I will prepare you a quick example of such appearance, and will get back you later today.

Regards,
Kalin
Progress Telerik

[David]

Hi Kalin,

Great, thank you for letting me know that this is possible with Telerik, if you could comment your code, that would be really helpful in understanding and for the community also.  I feel the online documentation at least for me is a little confusing in places.

Thanks

David

[Kalin]

Hello David,

Please test the following XAML definition - should be pretty straight forward. Keep in mind you would always need to stick to the following structure in order to have the control working as expected:

RadDocking -> DocumentHost (optional) -> RadSplitContainer -> RadPaneGroup -> RadPane(s)

And if you need Docking in Docking - it should be always placed in RadPane (not in one of the other controls).

<telerik:RadDocking Grid.Row="1">
    <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Top Pane 01">
                    <telerik:RadDocking>
                        <telerik:RadSplitContainer InitialPosition="DockedRight">
                            <telerik:RadPaneGroup>
                                <telerik:RadPane Header="Right Pane 01" IsPinned="True" />
                                <telerik:RadPane Header="Right Pane 02" IsPinned="False" />
                                <telerik:RadPane Header="Right Pane 03" IsPinned="False" />
                            </telerik:RadPaneGroup>
                        </telerik:RadSplitContainer>
                    </telerik:RadDocking>
                </telerik:RadPane>
                <telerik:RadPane Header="Top Pane 02" />
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
    <telerik:RadSplitContainer InitialPosition="DockedBottom">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Bottom Pane 01">
                <telerik:RadDocking>
                    <telerik:RadSplitContainer InitialPosition="DockedRight">
                        <telerik:RadPaneGroup>
                            <telerik:RadPane Header="Right Pane 01" IsPinned="True" />
                            <telerik:RadPane Header="Right Pane 02" IsPinned="False" />
                            <telerik:RadPane Header="Right Pane 03" IsPinned="False" />
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
                </telerik:RadDocking>
            </telerik:RadPane>
            <telerik:RadPane Header="Bottom Pane 02" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
    <telerik:RadSplitContainer InitialPosition="DockedLeft">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Left Pane 01" />
            <telerik:RadPane Header="Left Pane 02" />
            <telerik:RadPane Header="Left Pane 03" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

I'm attaching a sample project as well - if you have any additional questions, let me know.

Regards,
Kalin
Progress Telerik

[David]

Hi Kalin,

Thank you very much for your code sample.  It looks like I was over complicating things to achieve my layout.

I have some questions regarding sizing now, such as I would like the Bottom Pane 01 & 02 to be 50% in height of the whole layout window when the app starts.  It seems that it because it is DockedBottom, it will fill only like 20% of the window height when the app starts.  Is it possible to force this to be at 50% height?

I've attached some screen shots of what I am looking for.

Thank you again

David

[Kalin]

Hi David,

What you can do would be set initial Height of the bottom RadSplitContainer:

<telerik:RadSplitContainer x:Name="bottomContainer" InitialPosition="DockedBottom" Height="550">

If you don't know the actual desired height, you could calculate it in the Loaded event handler of RadDocking:

private void RadDocking_Loaded(object sender, RoutedEventArgs e)
{
    this.bottomContainer.Height = (sender as RadDocking).ActualHeight / 2;
}

Hope this helps.


Regards,
Kalin
Progress Telerik