This is a migrated thread and some comments may be shown as answers.

Sizing RadSplitContainer

7 Answers 89 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Todd Millett
Top achievements
Rank 1
Todd Millett asked on 15 Mar 2011, 10:03 AM
I am placing a RadSplitContainer inside a Grid which has its width comming from the parent. I have two RadPaneGroups inside that. I want to make sure that the RadPanes inside it occupy the entire size of the ParentGrid. Is there any way, in which I can set the width in percentage like * or anything?

7 Answers, 1 is accepted

Sort by
0
George
Telerik team
answered on 15 Mar 2011, 10:16 AM
Hello Todd,

 
I would suggest you to place the Panes in a DocumentHost. I hope this helps.

Regards,
George
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Todd Millett
Top achievements
Rank 1
answered on 15 Mar 2011, 11:41 AM
Please find my code for the same :

<telerik:RadDocking x:Name="rootDocking" HasDocumentHost="True">
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer x:Name="splitContainer" Orientation="Horizontal">
                    <telerik:RadPaneGroup>
                        <telerik:RadDocumentPane Visibility="Collapsed" ContextMenuTemplate="{x:Null}" CanUserClose="False" CanFloat="False" CanUserPin="False" Header="Items">
                            <usercontrols:ItemsUserControl x:Name="pnlArchivedItems" />
                        </telerik:RadDocumentPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>
            <telerik:RadSplitContainer x:Name="splitContainer1" InitialPosition="DockedRight" Orientation="Horizontal">
                <telerik:RadPaneGroup>
                <telerik:RadPane x:Name="previewPane" Header="Preview" 
                                         CanUserClose="False" CanFloat="False" CanUserPin="True">
                            <usercontrols:PreviewUserControl x:Name="pnlPreviewItems"/>
                            <telerik:RadPane.ContextMenuTemplate>
                                <DataTemplate>
                                    <telerik:RadContextMenu>
                                        <telerik:RadMenuItem Click="RadMenuItem_Click" Header="|" />
                                        <telerik:RadMenuItem Header="--" Click="RadMenuItem_Click_1" />
                                    </telerik:RadContextMenu>
                                </DataTemplate>
                            </telerik:RadPane.ContextMenuTemplate>
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
        </telerik:RadDocking>

I was able to set the width properly, but when i dynamically try to change the Orientation of previewPane under splitContainer1 using the RadContextMenu, it was not getting reflected. Following is the code behind for the same. : 

private void RadMenuItem_Click(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            splitContainer1.Orientation = Orientation.Horizontal;
        }


        private void RadMenuItem_Click_1(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            splitContainer1.Orientation = Orientation.Vertical;
        }
0
Todd Millett
Top achievements
Rank 1
answered on 15 Mar 2011, 11:50 AM
Going on the same line. The intent of the above code is to arrange two controls in two different panes such that they can be positioned horizontally or vertically at runtime, and they should also occupy the entire available space. 
0
Dani
Telerik team
answered on 15 Mar 2011, 04:34 PM
Hello Todd Millett,

Try this layout:

<telerik:RadDocking x:Name="rootDocking" HasDocumentHost="False">                
               <telerik:RadSplitContainer x:Name="splitContainer1" InitialPosition="DockedTop" Orientation="Horizontal">
                   <telerik:RadPaneGroup>
                       <telerik:RadPane x:Name="previewPane" Header="Preview"  MinHeight="200"
                                        CanUserClose="False" CanFloat="False" CanUserPin="True">                           
                           <telerik:RadPane.ContextMenuTemplate>
                               <DataTemplate>
                                   <telerikNavigation:RadContextMenu>
                                       <telerikNavigation:RadMenuItem Click="RadMenuItem_Click" Header="|" />
                                       <telerikNavigation:RadMenuItem Header="--" Click="RadMenuItem_Click_1" />
                                   </telerikNavigation:RadContextMenu>
                               </DataTemplate>
                           </telerik:RadPane.ContextMenuTemplate>
                           <Grid>
                               <TextBlock Text="UserControl 1" />
                           </Grid>
                   </telerik:RadPane>
               </telerik:RadPaneGroup>
                     
               <telerik:RadPaneGroup>
                   <telerik:RadPane Header="Pane Left 1" MinHeight="200" ContextMenuTemplate="{x:Null}">
                       <Grid>
                           <TextBlock Text="UserControl 2" />
                       </Grid>                        
                   </telerik:RadPane>
               </telerik:RadPaneGroup>
                     
           </telerik:RadSplitContainer>
           </telerik:RadDocking>  

The Orientation property of the RadSplitContainer changes the orientation of its children much like the Orientation property of a StackPanel works. You need to have both your user controls inside the RadSplitContainer, into separate RadPaneGroups, in order for the handlers to work properly.

Greetings,
Dani
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Todd Millett
Top achievements
Rank 1
answered on 16 Mar 2011, 05:42 AM
Thanks, that worked.
0
Todd Millett
Top achievements
Rank 1
answered on 16 Mar 2011, 09:14 AM
The solution works in IE windows, but when i try the same thing in MAC the code behind code does not work i.e setting the orientation dynamically in code behind works in windows but not in MAC. Can you please verify this behavior?
0
Dani
Telerik team
answered on 17 Mar 2011, 10:45 AM
Hello Todd,

We tested this solution on a MAC and the result was positive - it works as expected.
Please, find attached the sample which we used to test the behavior and a short movie of how the Docking control behaves.
Please, note that the MAC version is 10.6.5 and the project is running on Firefox and on Safari.

Best wishes,
Dani
the Telerik team
Tags
Docking
Asked by
Todd Millett
Top achievements
Rank 1
Answers by
George
Telerik team
Todd Millett
Top achievements
Rank 1
Dani
Telerik team
Share this question
or