ProportionalStackPanel.RelativeSize Property doesn't work in RadDocking

[Philipp]

In my MainWindow I am using a RadDocking container for displaying 3 RadSplitContainer. My problem is that I cannot set the size of those RadSplitContainers correctly.

I set the HasDocumentHost property of the RadDocking to False.

I tried setting the ProportionalStackPanel.RelativeSize property on each of my RadPaneGroups. These settings get completely ignored.

Here is my MainWindow.xaml code:

<DockPanel>
        <views:MenuBarView DataContext="{Binding MenuBar}" DockPanel.Dock="Top"/>
        <telerik:RadDocking Name="radDocking" HasDocumentHost="False">
                <telerik:RadSplitContainer HorizontalContentAlignment="Stretch"
                                        InitialPosition="DockedLeft">
                    <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="200,600">
                        <telerik:RadPane Header="{helpers:SwitchBinding DirtyBit, Pages*, Pages}" telerik:RadDocking.SerializationTag="PagesPane"
                                        CanUserClose="False" CanUserPin="False" >
                            <views:PagesView DataContext="{Binding PagesViewModel}" />
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
                <telerik:RadSplitContainer InitialPosition="DockedTop">
                    <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="400,400">
                        <telerik:RadPane Header="{helpers:SwitchBinding DirtyBit, Editor*, Editor}" Name="MainEditor"
                                    CanUserClose="False" CanUserPin="False">
                            <views:EditorView DataContext="{Binding Editor}" />
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
                <telerik:RadSplitContainer InitialPosition="DockedBottom">
                    <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="400,200">
                        <telerik:RadPane Header="Info" Name="Output" CanUserClose="False" CanUserPin="False">
                            <views:InfoView DataContext="{Binding InfoViewModel}"/>
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
        </telerik:RadDocking>
    </DockPanel>

The result looks something like shown in MainWindow_Layout.PNG. But I would like a layout (and I would have guessed that my ProportionalStackPanel.RelativeSize properties set this behavior) like the one shown in MainWindow_Layout_desired.PNG.

How can I set the RadSplitContainers' relative size correctly?

[Stenly]

Would it be possible to review the following section of the Pane Groups article from our documentation, which shows how to size each RadPaneGroup using the ProportionalStackPanel class?

WPF Docking - Pane Groups - Telerik UI for WPF

[Philipp]

I don't really see how the linked documentation is relevant?
The one take-away for me was that I can only set the relative size of multiple RadPaneGroups within a single RadSplitContainer? Is that correct? Because as you can see in my XAML above, I would instead like to set the initial Layout of multiple RadSplitContainers.

[Stenly]

I have misunderstood the question and have provided a suggestion, which is not relevant to the case. Please excuse me for this. 

Generally, the ProportionalStackPanel.RelativeSize property is intended for elements that are placed in the same container. For example, it could be utilized in the scenario where two or more RadSplitContainers are set in one parent RadSplitContainer to dictate their relative size. Another scenario would be where two or more RadPaneGroups are set in one parent RadSplitContainer.

With this in mind, to achieve the desired layout, you could utilize the following code snippet:

<telerik:RadDocking HasDocumentHost="False">
    <telerik:RadSplitContainer InitialPosition="DockedLeft"
                               Orientation="Vertical" 
                               telerik:ProportionalStackPanel.RelativeSize="0.3, 1">
        <telerik:RadPaneGroup>
            <telerik:RadPane Title="Pane 1">
            </telerik:RadPane>
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
    
    <telerik:RadSplitContainer InitialPosition="DockedRight"
                               Orientation="Vertical"
                               telerik:ProportionalStackPanel.RelativeSize="0.7, 1">

        <telerik:RadSplitContainer InitialPosition="DockedTop"
                                   telerik:ProportionalStackPanel.RelativeSize="1, 0.6">
            <telerik:RadPaneGroup>
                <telerik:RadPane Title="Pane 2">
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>

        <telerik:RadSplitContainer InitialPosition="DockedBottom" 
                                   telerik:ProportionalStackPanel.RelativeSize="1, 0.4">
            <telerik:RadPaneGroup>
                <telerik:RadPane Title="Pane 3">
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadSplitContainer>
    
</telerik:RadDocking>

The general layout consists of two RadSplitContainers. In the second one, the additional RadSplitContainer elements are added, and the ProportionalStackPanel.RelativeSize is set to apply the desired ratio. Furthermore, this second parent RadSplitContainer's Orientation property is set to Vertical, in order to display its two RadSplitContainer elements one over another.

The produced result is as follows:

With this being said, I hope the provided information will be of help to you.

 

[Philipp]

Stenly, thank you for your tips. I had to adapt your code a little bit further.

I'm using:

• VS 16.11.17
• telerik for WPF 2021.3.1109

Your first ProportionalStackPanel.RelativeSize property did not work for me. Changig its values did not influence the layout in the RadDocking element.

So I introduced another RadSplitContainer - that encapsulates all of the "actual" RadSplitContainer elements - directly below RadDocking.

My final solution looks like this:

<DockPanel>
	<views:MenuBarView DataContext="{Binding MenuBar}" DockPanel.Dock="Top"/>
	<telerik:RadDocking Name="radDocking" HasDocumentHost="False">
		<telerik:RadSplitContainer>
			<telerik:RadSplitContainer HorizontalContentAlignment="Stretch"
										InitialPosition="DockedLeft"
							   Orientation="Vertical" 
							   telerik:ProportionalStackPanel.RelativeSize="0.3, 1">
				<telerik:RadPaneGroup>
					<telerik:RadPane Header="{helpers:SwitchBinding DirtyBit, Pages*, Pages}" telerik:RadDocking.SerializationTag="PagesPane"
									CanUserClose="False" CanUserPin="False" >
						<views:PagesView DataContext="{Binding PagesViewModel}" />
					</telerik:RadPane>
				</telerik:RadPaneGroup>
			</telerik:RadSplitContainer>
			<telerik:RadSplitContainer InitialPosition="DockedRight"
							   Orientation="Vertical"
							   telerik:ProportionalStackPanel.RelativeSize="0.7, 1">
				<telerik:RadSplitContainer InitialPosition="DockedTop"
										   Orientation="Horizontal"
											telerik:ProportionalStackPanel.RelativeSize="1, 0.75">
					<telerik:RadPaneGroup>
						<telerik:RadPane Header="{helpers:SwitchBinding DirtyBit, Editor*, Editor}" telerik:RadDocking.SerializationTag="DecodedMessagePane" Name="MainEditor"
									CanUserClose="False" CanUserPin="False">
							<views:EditorView DataContext="{Binding Editor}" />
						</telerik:RadPane>
					</telerik:RadPaneGroup>
				</telerik:RadSplitContainer>
				<telerik:RadSplitContainer InitialPosition="DockedBottom"
										   Orientation="Vertical"
										   telerik:ProportionalStackPanel.RelativeSize="1, 0.25">
					<telerik:RadPaneGroup>
						<telerik:RadPane Header="Info" Name="Output" CanUserClose="False" CanUserPin="False">
							<views:InfoView DataContext="{Binding InfoViewModel}"/>
						</telerik:RadPane>
					</telerik:RadPaneGroup>
				</telerik:RadSplitContainer>
			</telerik:RadSplitContainer>
		</telerik:RadSplitContainer>
	</telerik:RadDocking>
</DockPanel>

[Stenly]

I am happy to hear that you were able achieve the desired result and that you have shared your solution with us.