[Telerik]RadDocking第05篇 在同一个RadSplitContainer中定义多个面板分组

一、演示概述
此演示展示了RadDocking控件的如下三方面内容：
1、通过设置RadSplitContainer的Orientation属性来控制多分组面板的排列方向，分别有横向排列(Horizontal)和纵向排列(Vertical)两种。
2、通过在RadSplitContainer中放置多个RadPaneGroup来达到分组的目的，这点不同于一个分组(RadPaneGroup)中有多个面板(RadPane)的情况。
3、通过给RadPanGroup设置附加属性ProportionalStackPanel.RelativeSize来控制分组的高度和宽度。
相关下载（屏幕录像）：http://yunpan.cn/cKH65n5EbRXYG  访问密码 268c
在线播放：http://v.youku.com/v_show/id_XODgwODgwNzI4.html
温馨提示：如果屏幕录像和代码不能正常下载，可站内留言，或发邮件到[e-mail]

二、运行效果
效果如下图所示：


三、关键代码

<telerik:RadDocking telerikQuickStart:ThemeAwareBackgroundBehavior.IsEnabled="True"                    BorderThickness="0"                    Padding="0">    <telerik:RadDocking.DocumentHost>        <telerik:RadSplitContainer>            <telerik:RadPaneGroup>                <telerik:RadDocumentPane Header="Document 1"                                            Title="Document 1" />            </telerik:RadPaneGroup>        </telerik:RadSplitContainer>    </telerik:RadDocking.DocumentHost>    <telerik:RadSplitContainer Orientation="Horizontal"                                InitialPosition="DockedLeft">        <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="200, 300">            <telerik:RadPane Header="Pane Left 1">                <TextBlock Text="Pane Left 1" />            </telerik:RadPane>        </telerik:RadPaneGroup>        <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="200, 100">            <telerik:RadPane Header="Pane Left 2">                <TextBlock Text="Pane Left 2" />            </telerik:RadPane>        </telerik:RadPaneGroup>        <telerik:RadPaneGroup>            <telerik:RadPane Header="Pane Left 3">                <TextBlock Text="Pane Left 3" />            </telerik:RadPane>        </telerik:RadPaneGroup>    </telerik:RadSplitContainer>    <telerik:RadSplitContainer Orientation="Horizontal"                                InitialPosition="DockedRight">        <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="150, 200">            <telerik:RadPane Header="Pane Right 1">                <TextBlock Text="Pane Right 1" />            </telerik:RadPane>        </telerik:RadPaneGroup>        <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="250, 200">            <telerik:RadPane Header="Pane Right 2">                <TextBlock Text="Pane Right 2" />            </telerik:RadPane>        </telerik:RadPaneGroup>    </telerik:RadSplitContainer>    <telerik:RadSplitContainer Orientation="Horizontal"                                InitialPosition="DockedBottom">        <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="100, 200">            <telerik:RadPane Header="Pane Bottom 1">                <TextBlock Text="Pane Bottom 1" />            </telerik:RadPane>        </telerik:RadPaneGroup>        <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="300, 200">            <telerik:RadPane Header="Pane Bottom 2">                <TextBlock Text="Pane Bottom 2" />            </telerik:RadPane>        </telerik:RadPaneGroup>    </telerik:RadSplitContainer></telerik:RadDocking>

四、相关资源
1、Telerik实例代码下载：

2、Telerik官方帮助文档地址：http://docs.telerik.com/devtools/wpf/controls/raddocking/overview2