Telerik Forums / UI for Silverlight Forum / Docking /

Settin RadSplitContainer Size

Telerik UI for Silverlight
Resources Buy Try

10 posts, 1 answers

Luis Martinez

2 posts

Member since:
Sep 2009

Posted 30 Sep 2009 Link to this post

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.

Answer

Miroslav Nedyalkov

Admin

1718 posts

Posted 01 Oct 2009 Link to this post

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

2 posts

Member since:
Sep 2009

Posted 01 Oct 2009 Link to this post

Many Thanks!!, that solved my problem

Greetings
Anuraj

3 posts

Member since:
Jan 2011

Posted 16 Aug 2011 Link to this post

Thanks!!! It worked for me as well
Pushpendra

32 posts

Member since:
Nov 2012

Posted 31 Dec 2012 Link to this post

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
Admin

1718 posts

Posted 02 Jan 2013 Link to this post

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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
Pushpendra

32 posts

Member since:
Nov 2012

Posted 02 Jan 2013 Link to this post

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>

                

                <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>

                

                

                <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>

                

            </radDock:RadSplitContainer>

        </radDock:RadDocking>

    </Grid>

Thanks,
Pushpendra
Miroslav Nedyalkov
Admin

1718 posts
Posted 03 Jan 2013 Link to this post

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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Docking-Unpinning.zip
Pushpendra

32 posts

Member since:
Nov 2012

Posted 03 Jan 2013 Link to this post

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
Admin

1718 posts

Posted 04 Jan 2013 Link to this post

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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Settin RadSplitContainer Size

Luis Martinez

Miroslav Nedyalkov

Luis Martinez

Anuraj

Pushpendra

Miroslav Nedyalkov

Pushpendra

Miroslav Nedyalkov

Pushpendra

Miroslav Nedyalkov