AvalonDock 是一个.NET库,用于在停靠模式布局(docking)中排列一系列WPF/WinForm控件。最新发布的版本原生支持MVVM框架、Aero Snap特效并具有更好的性能。
AvalonDock 2.0版本已经发布了,新版本是用MVVM框架重新编写,似乎也用了Command(命令)模式。2.0版的文档尚未发布,但你可以参考Avalon.TestApp 或者2.0版源码中的Avalon.MVVMTestApp文件夹来查看新的API。
前一篇博文有介绍关于AvalonDock使用-《Docking For WPF–AvalonDock》
还有一篇也是同类的关于多文档界面设计《基于WPF系统框架设计-Ribbon整合Avalondock 2.0实现多文档界面设计(一)》
单文档界面样式是Windows应用程序比较常用的布局选项。Microsoft Windows中的“记事本”是单文档界面应用程序的一个典型示例。在“记事本”中,同一时间只能打开一个文档。资源管理器样式界面是包含两个“窗格”或区域的单个窗口,通常由左侧的树或分层视图以及右侧的显示区域组成,与“Microsoft Windows资源管理器”一样。资源管理器样式界面适合于定位或浏览大量的文档、图片或文件。
多文档界面是从Windows 2.0下的Microsoft Excel电子表格程序开始引入的,由于Excel电子表格用户有时需要同时操作多份表格。
基于多文档,多任务模式操作的灵活性,Ribbon框架设计中也整合多文档界面布局功能,下面就来实施做一个案例。
- 准备工作:在这网址上下载AvalonDock和实例: http://avalondock.codeplex.com/
- 主要布局框架:
- Xceed.Wpf.AvalonDock.dll
- 其他的是主题样式模板:
- Xceed.Wpf.AvalonDock.Themes.Expression.dll
- Xceed.Wpf.AvalonDock.Themes.Metro.dll
- Xceed.Wpf.AvalonDock.Themes.VS2010.dll
- 添加引用
把这些程序集添加到项目引用中,如下图:
- XAML中添加Dock标签
以XAML模式打开MainWindow.xaml,添加Dock标签,如下:
<ad:DockingManager x:Name="dockManager" Grid.Row="1"> <ad:DockingManager.Theme> <themes:ExpressionBlueTheme/><!--主题样式,跟Ribbon主题一致--> </ad:DockingManager.Theme> <xcad:LayoutRoot> <xcad:LayoutPanel Orientation="Vertical"> <xcad:LayoutDocumentPaneGroup> <xcad:LayoutDocumentPane> <xcad:LayoutDocument ContentId="Document1" Title="查询用户"> </xcad:LayoutDocument> <xcad:LayoutDocument ContentId="Documen2" Title="添加用户"> </xcad:LayoutDocument> <xcad:LayoutDocument ContentId="Documen3" Title="更新用户"> </xcad:LayoutDocument> </xcad:LayoutDocumentPane> </xcad:LayoutDocumentPaneGroup> </xcad:LayoutPanel> </xcad:LayoutRoot> <!--<xcad:LayoutRoot> <xcad:LayoutPanel Orientation="Vertical"> <xcad:LayoutDocumentPane/> <xcad:LayoutAnchorablePane Name="ToolsPane" DockHeight="150"> </xcad:LayoutAnchorablePane> </xcad:LayoutPanel> </xcad:LayoutRoot>--> </ad:DockingManager>
- 运行程序后效果
同样这个布局控件也有主题,我针对Ribbon框架设计了三个Dock主题Silver,Blue,Black。
如下图:
Silver:
Blue:
Black:
- 如何做到支持动态加载Dock主题呢?
添加如下代码即可以实现动态更改Dock主题:
public static void ChangeTheme(DockingManager dockingManager, ThemeStyle themeStyle) { #region 设置控件背景的样式 Xceed.Wpf.AvalonDock.Themes.Theme theme = null; switch (themeStyle) { case ThemeStyle.Blue: theme = new ExpressionBlueTheme(); break; case ThemeStyle.Black: theme = new ExpressionDarkTheme(); break; case ThemeStyle.Silver: theme = new ExpressionSilverTheme(); break; default: theme=new ExpressionBlueTheme(); break; } dockingManager.Theme = theme; #endregion }
- 如何做到动态加载文档界面呢?
现在的效果只是在XAML中固定的多文档界面,但是实际的系统是要支持动态创建文档的,比如我点“查询用户”就会显示这个文档内容,
我把上面改成动态生成文档的标签,参考如下源码:
<ad:DockingManager x:Name="dockManager" Grid.Row="1"> <ad:DockingManager.Theme> <ad:ExpressionBlueTheme/> </ad:DockingManager.Theme> <ad:LayoutRoot> <ad:LayoutPanel Orientation="Vertical"> <ad:LayoutDocumentPane/> <ad:LayoutAnchorablePane Name="ToolsPane" DockHeight="150"> </ad:LayoutAnchorablePane> </ad:LayoutPanel> </ad:LayoutRoot> </ad:DockingManager>
运行后如下图:
现在只是一个空的框架,还没有添加文档界面喔,下面就来实现动态加载文档页面。
后台代码,我实现了动态创建三个文档:
private void BtnAddUser_Click(object sender, RoutedEventArgs e) { Fluent.Button button = (Fluent.Button) sender; CreateFunctionTab(button.Header.ToString()); } private void CreateFunctionTab(string tabName) { var firstDocumentPane = dockManager.Layout.Descendents().OfType<LayoutDocumentPane>().FirstOrDefault(); if (firstDocumentPane != null) { LayoutDocument doc2 = new LayoutDocument(); doc2.Title = tabName; doc2.IsActive = true; firstDocumentPane.Children.Add(doc2); } } private void BtnModifyUser_Click(object sender, RoutedEventArgs e) { Fluent.Button button = (Fluent.Button)sender; CreateFunctionTab(button.Header.ToString()); } private void BtnQueryUser_Click(object sender, RoutedEventArgs e) { Fluent.Button button = (Fluent.Button)sender; CreateFunctionTab(button.Header.ToString()); }
现在能够动态加载文档了,就几行代码就能搞定,可是,文档也是空的哟,怎么办?
附:我想到下一篇博文介绍这一块的设计,我向来喜欢短小精悍文章。