Sizing RadSplitContainer

[Todd Millett]

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?

[George]

Hello Todd,

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

Regards,
George
the Telerik team

[Todd Millett]

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

[Todd Millett]

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. 

[Dani]

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

[Todd Millett]

Thanks, that worked.

[Todd Millett]

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?

[Dani]

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