Creating a symmetric two-by-two grid

[Jonathan]

Hi,

I'm trying to position four RadPanes as shown in the attached image, but I'm having some issues. I can get the width to scale when the browser window is resized, but in order to get the height of each pane to be half the window's height, I need to set it explicitly, which I obviously don't want to do.

This is my XAML so far:

<telerik:RadDocking x:Name="radDocking" HasDocumentHost="False">
    <telerik:RadSplitContainer x:Name="radSplitContainer" InitialPosition="DockedTop" telerik:DockingPanel.InitialSize="500, 500">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Test1" Content="...">
            </telerik:RadPane>
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Test2" Content="...">
            </telerik:RadPane>
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
    <telerik:RadSplitContainer x:Name="radSplitContainer2" InitialPosition="DockedBottom" telerik:DockingPanel.InitialSize="500, 500">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Test3" Content="...">
            </telerik:RadPane>
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Test4" Content="...">
            </telerik:RadPane>
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

[Vladi]

Hi Jonathan,

Thank you for contacting us.

In order to achieve the described layout you could use the built-in RelativeSize of our ProportionalStackPanel. Setting the RelativeSize is done on the parent RadSplitContainer of a specific RadPane instance, more details could be found in our online documentation here. The next code snippet shows how you could achieve the desired layout using RadDocking and the RelativeSize feature:

<telerik:RadDocking x:Name="radDocking"
                    HasDocumentHost="False">
    <telerik:RadSplitContainer Orientation="Vertical">
        <telerik:RadSplitContainer x:Name="radSplitContainer"
                                    telerik:ProportionalStackPanel.RelativeSize="50, 50">
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Test1" Content="...">
                </telerik:RadPane>
            </telerik:RadPaneGroup>
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Test2" Content="...">
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>

        <telerik:RadSplitContainer x:Name="radSplitContainer2"
                                    telerik:ProportionalStackPanel.RelativeSize="50, 50">
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Test3" Content="...">
                </telerik:RadPane>
            </telerik:RadPaneGroup>
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Test4" Content="...">
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadSplitContainer>
</telerik:RadDocking>

Hope this is helpful.

Regards,
Vladi
Telerik

 

 

[Jonathan]

Thanks Vladi. That's just what I needed :)