版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
一、演示概述
此演示展示了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]
二、运行效果
效果如下图所示:
三、关键代码
四、相关资源
1、Telerik实例代码下载:
此演示展示了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