Creating a symmetric two-by-two grid

3 posts, 1 answers
  1. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Dec 2014

    Posted 10 Apr 2015 Link to this post

    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>

  2.
  3. Answer
    Vladi
    Admin
    Vladi avatar
    749 posts

    Posted 15 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  5. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Dec 2014

    Posted 15 Apr 2015 in reply to Vladi Link to this post

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