[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
温馨提示：如果屏幕录像和代码不能正常下载，可站内留言，或发邮件到524130780@QQ.COM

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


三、关键代码

<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