Settin RadSplitContainer Size

[Luis Martinez]

Hello All,

I have two RadSplitContainers with graphics in a RadDocking, but i want to have control of each sizing:

<radDock:RadDocking x:Name="radDocking1">
          <telerikDocking:RadSplitContainer x:Name="ContenedorInferior" Orientation="Horizontal" InitialPosition="DockedBottom">
                <radDock:RadSplitContainer MinWidth="450">
                    <telerikDocking:RadPaneGroup AllowDragOverTab="False" AllowDragReorder="False">
                        <telerikDocking:RadPane x:Name="fichaTotales" Header="CENSO" CanDockInDocumentHost="False" CanFloat="False" CanUserClose="False" CanUserPin="True" >
                            <telerikDocking:RadPane.Content>
                                <telerikNavigation:RadTabControl FontSize="9" x:Name="tabControl" TabStripPlacement="Top" >
                                    <telerikNavigation:RadTabItem Header="DUCTOS POR SERVICIO">
                                        <telerikChart:RadChart x:Name="rcInventario"/>
                                    </telerikNavigation:RadTabItem>
                                </telerikNavigation:RadTabControl>
                            </telerikDocking:RadPane.Content>
                        </telerikDocking:RadPane>
                    </telerikDocking:RadPaneGroup>
                </radDock:RadSplitContainer>
                <radDock:RadSplitContainer x:Name="ContenedorPanelPie" MinWidth="335">
                    <telerikDocking:RadPaneGroup>
                        <telerikDocking:RadPane x:Name="panelPie" Header="Resumen" CanDockInDocumentHost="False" CanFloat="False" CanUserClose="False" CanUserPin="True">
                            <telerikDocking:RadPane.Content>
                                <chart:RadChart x:Name="rcInventario2" />
                            </telerikDocking:RadPane.Content>
                        </telerikDocking:RadPane>
                    </telerikDocking:RadPaneGroup>
                </radDock:RadSplitContainer>
            </telerikDocking:RadSplitContainer>
        </radDock:RadDocking>

For example i want to set the size of th first RadSplitContainer (ContenedorInferior) to have 70% width and the second RadSplitContainer (ContenedorPanelPie) to have 30% width.

any help?

Many Thanks

Luis.

[Miroslav Nedyalkov]

Hi Luis,

You could achieve this by using the RelativeSize attached property of the ProportionalStackPanel class. What you need to do is to set the relative size to the SplitContainer or PaneGroup that should have different size. The default value is 200, 200.

Here is an example:

<telerikDocking:RadDocking x:Name="radDocking1">
    <telerikDocking:RadSplitContainer x:Name="ContenedorInferior" Orientation="Horizontal"
            InitialPosition="DockedBottom">
        <telerikDocking:RadSplitContainer MinWidth="450" telerikDocking:ProportionalStackPanel.RelativeSize="120, 200">
            <telerikDocking:RadPaneGroup AllowDragOverTab="False" AllowDragReorder="False">
                <telerikDocking:RadPane x:Name="fichaTotales" Header="CENSO"
                        CanDockInDocumentHost="False" CanFloat="False" CanUserClose="False"
                        CanUserPin="True">
                    <telerikDocking:RadPane.Content>
                        <telerikNavigation:RadTabControl FontSize="9" x:Name="tabControl"
                                TabStripPlacement="Top">
                            <telerikNavigation:RadTabItem Header="DUCTOS POR SERVICIO">

                            </telerikNavigation:RadTabItem>
                        </telerikNavigation:RadTabControl>
                    </telerikDocking:RadPane.Content>
                </telerikDocking:RadPane>
            </telerikDocking:RadPaneGroup>
        </telerikDocking:RadSplitContainer>
        <telerikDocking:RadSplitContainer x:Name="ContenedorPanelPie" MinWidth="335" telerikDocking:ProportionalStackPanel.RelativeSize="280, 200">
            <telerikDocking:RadPaneGroup>
                <telerikDocking:RadPane x:Name="panelPie" Header="Resumen"
                        CanDockInDocumentHost="False" CanFloat="False" CanUserClose="False"
                        CanUserPin="True">

                </telerikDocking:RadPane>
            </telerikDocking:RadPaneGroup>
        </telerikDocking:RadSplitContainer>
    </telerikDocking:RadSplitContainer>
</telerikDocking:RadDocking>

Regards,
Miroslav Nedyalkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Luis Martinez]

Many Thanks!!, that solved my problem

Greetings

[Anuraj]

Thanks!!! It worked for me as well

[Pushpendra]

Hi Luis,

Here in this example is it possible to set different InitialPosition of inner RadSplitContainer? If yes then please help me so that I can able to set different InitialPosition for my inner RadSplitContainer.

Thanks,
Pushpendra

[Miroslav Nedyalkov]

Hello Pushpendra,

Could you please explain what you need to achieve by setting the InitialPosition property of the inner SplitContainer? This way we will be able to better assist you achieving the desired result.

Kind regards,
Miroslav Nedyalkov
the Telerik team

[Pushpendra]

Hi Miroslav,

I have attached the layout of my screen. Here you can see that my UI is divided into two parts i.e. left and right part, for that I have taken two RadSplitContainer inside them main RadSplitContainer. Now I want to set the InitialPosition = "DockedLeft"  for the RadPane  coming inside first inner RadSplitContainer, and InitialPosition = "DockedRight" for the RadPane coming inside second RadSplitContainer.
 

<Grid x:Name="LayoutRoot" Background="White">
        <radDock:RadDocking AllowUnsafeMode="True" HasDocumentHost="False">
            <radDock:RadSplitContainer>
                <!--Left Screen Starts-->
                <radDock:RadSplitContainer InitialPosition="DockedLeft" Orientation="Vertical">
                    <radDock:RadPaneGroup radDock:ProportionalStackPanel.RelativeSize="200,200">
                        <radDock:RadPane Header="L1" IsPinned="True" CanUserPin="True" CanFloat="False" CanUserClose="False" CanDockInDocumentHost="False" ContextMenuTemplate="{x:Null}">
                            <Grid></Grid>
                        </radDock:RadPane>
                    </radDock:RadPaneGroup>
                    <radDock:RadPaneGroup>
                        <radDock:RadPane Header="L2" IsPinned="True" CanUserPin="True" CanFloat="False" CanUserClose="False" CanDockInDocumentHost="False" ContextMenuTemplate="{x:Null}">
                            <Grid></Grid>
                        </radDock:RadPane>
                    </radDock:RadPaneGroup>
                    <radDock:RadPaneGroup>
                        <radDock:RadPane Header="L3" IsPinned="True" CanUserPin="True" CanFloat="False" CanUserClose="False" CanDockInDocumentHost="False" ContextMenuTemplate="{x:Null}">
                            <Grid></Grid>
                        </radDock:RadPane>
                    </radDock:RadPaneGroup>
                </radDock:RadSplitContainer>
                <!--Left Screen End-->
                <!--Right Screen Starts-->
                <radDock:RadSplitContainer InitialPosition="DockedRight" Orientation="Vertical">
                    <radDock:RadPaneGroup >
                        <radDock:RadPane Header="R1" IsPinned="True" CanUserPin="True" CanFloat="False" CanUserClose="False" CanDockInDocumentHost="False" ContextMenuTemplate="{x:Null}">
                            <Grid></Grid>
                        </radDock:RadPane>
                    </radDock:RadPaneGroup>
                    <radDock:RadPaneGroup>
                        <radDock:RadPane Header="R2" IsPinned="True" CanUserPin="True" CanFloat="False" CanUserClose="False" CanDockInDocumentHost="False" ContextMenuTemplate="{x:Null}">
                            <Grid></Grid>
                        </radDock:RadPane>
                    </radDock:RadPaneGroup>
                </radDock:RadSplitContainer>
                <!--Right Screen End-->
            </radDock:RadSplitContainer>
        </radDock:RadDocking>
    </Grid>

Thanks,
Pushpendra

[Miroslav Nedyalkov]

Hi Pushpendra,

Currently this cannot be achieved with the RadDocking control - it uses the root-level SplitContainer to determine in which AutoHideArea the unpinned pane should be placed.

As a work-around for this limitation you could use the Unpin event to move the pane that is being unpinned to a hidden pane group placed in a RadSplitContainer with InitialPosition DockedRight. This way the pane will be placed in the Right AutoHideArea. When the pane is being pinned again it should be moved back to its original group. The attached project demonstrates the described approach.

Please notice that this is a work-around and should be removed as soon as the corresponding limitation is removed.

All the best,
Miroslav Nedyalkov
the Telerik team

[Pushpendra]

Hi Miroslav,

Thanks for the workaround. Is the sample code available in Silverlight 4.0, since we are using silverlight 4.0 in our project.

Thnaks,
Pushpendra.

[Miroslav Nedyalkov]

Hello Pushpendra,

I think the code should work for Silverlight 4 as well. Please notice that Silverlight 4 is not supported by RadControls for Silverlight since 2012 Q1.

Kind regards,
Miroslav Nedyalkov
the Telerik team