[Telerik]RadDocking第05篇

一、演示概述

此演示展示了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

温馨提示：如果屏幕录像和代码不能正常下载，可站内留言，或发邮件到[email protected]

二、运行效果

效果如下图所示：

三、关键代码

<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