AvalonDock是优秀的开源项目,用于创建可停靠式布局,能够在WPF中方便开发出类似VS2010的软件界面。对于复杂的软件系统,大量控件的使用会使的界面变得难以管理。AvalonDock帮我们解决了这一问题。想要在WPF项目中使用AvalonDock的功能,首先要加载AvalonDock所提供的动态库,下载地址:http://avalondock.codeplex.com/releases/view/107371,目前最新的库版本为2.02。下载AvalonDock的动态库与主题库,解压后如图所示:
在WPF项目的引用中添加这些库,然后使用在xaml中引入命名空间:xmlns:avalon="http://schemas.xceed.com/wpf/xaml/avalondock",便可以在WPF中开发AvalonDock应用程序了。
下图是AvalonDock主页展示的示例截图。
AvalonDock库中提供了一些基本的类,熟悉这些类的功能是使用AvalonDock的第一步。
DockingManager : 停靠管理器类,是AvalonDock中的核心控件之一,负责管理浮动窗体、布局存储、恢复,样式主题等。在XAML中,是AvaDock元素的根节点。
LayoutRoot : 布局根节点类,DockingManager中的内容控件完全占满DockingManager中的空间。LayoutRoot包含四个属性,LeftSide,RightSide,TopSide,BottomSide,分别用于展示DockingManager中左右上下四个位置的内容,但初始状态为隐藏状态。另外两个属性FloatingWindows,Hidden分别为浮动窗体集合和隐藏窗体集合。当一个窗格浮动时,AvalonDock会将其从其所在组中删除,然后放置到FloatingWindows集合中。当一个窗格关闭时,会将其放置在Hidden集合中。
LayoutPanel:布局面板类,LayoutRoot中的内容控件,完全占满LayoutRoot中的空间,在LayoutPanel中,可以有多个LayoutGroup,可以设定Orientation 属性,控件布局组的浮动方向。实际的窗格都位于LayoutPanel节点下。
LayoutAnchorablePane:可停靠窗格类,浮动窗格是可停靠控件LayoutAnchorable的容器。一个窗格中,可以有多个可停靠控件。浮动窗格中的可停靠控件只能是LayoutAnchorable.窗格大小设定后,不能自动改变。
LayoutDocumentPane:文档窗格类,与LayoutAnchorablePane类似,也是可停靠控件的容器,文档窗格类中可以放置可停靠控件LayoutAnchorable,也可以放置文档控件LayoutDocument,LayoutDocunemtPane会自动占满窗体的窗体布局中的剩余空间。
LayoutAnchorablePaneGroup:可停靠窗格组类,是可停靠窗格LayoutAnchorablePane的容器。通过设置Orientation 属性,用于管理多个可停靠窗格的浮动方向。
LayoutDocumentPaneGroup:文档窗格组类,是文档窗格LayoutDocumentPane的容器。通过设置Orientation 属性,用于管理多个文档窗格的浮动方向。
LayoutAnchorable:可停靠内容类,一般放置在LayoutAnchorablePane中,其内容可以是用户自定义控件类型,比如,在UserControl中设置好WPF基础控件布局,然后将整个UserControl放置在LayoutAnchorable中,这样,整个UserControl内容就可以随着可停靠控件一起浮动或者停靠。
LayoutDocument:文档类,与LayoutAnchorable功能类似,区别在于LayoutDoucument会随着LayoutDocumentPane一起占满窗体剩余空间。
介绍了这么多内容,目的只是为了让大家对AvalonDock中的类有个简单的了解。其实AvalonDock中的类有着明显的层次结构,其实就是容器的嵌套。DockingManager作为顶层容器,然后包含一个LayoutRoot对象,LayoutRoot中又包含一个LayoutPanel对象。LayoutPanel中便是LayoutAnchroablePane对象和LayouDocumentPane对象的集合。同时,可以对LayoutAnchroablePane对象和LayouDocumentPane对象进行分组,每个组可以单独设定组内的浮动方向。LayoutAnchorablePane又是LayoutAnchorable的容器,LayioutDocumanePane又是LayoutDocument的容器。一层一层进行嵌套,在最后的LayoutAnchorable中或者LayoutDocument中,我们放入我们真正的控件对象,这样,就可以对他们进行分类摆放布局。
下面介绍具体的用法。
1.窗体布局存储与恢复
DockingManager中提供了将窗体布局序列化为xml文件内容的方法,同时提供了从xml布局文件中恢复布局的方法。
(1)保存布局
XmlLayoutSerializer serializer = new XmlLayoutSerializer(DockManager); using (var stream = new StreamWriter("Layout.xml")) { serializer.Serialize(stream); }
(2)恢复布局
XmlLayoutSerializer serializer = new XmlLayoutSerializer(DockManager); using (var stream = new StreamReader("Layout.xml")) { serializer.Deserialize(stream); }
恢复布局时,有一点需要注意,需要为LayoutAnchrobale对象和LayoutDocument对象设置ContentId属性,否则,DockingManager会忽略内容的恢复。
2.主题更换
AvalonDock中提供了六种主题样式,要使用这些主题,需要在程序中导入主题库。DockManger为DockingManager对象,通过改变DockingManager中的Theme属性,便可以改变整个界面的样式。
DockManager.Theme = new GenericTheme(); //DockManager.Theme = new AeroTheme(); //DockManager.Theme = new ExpressionDarkTheme(); //DockManager.Theme = new ExpressionLightTheme(); //DockManager.Theme = new MetroTheme(); //DockManager.Theme = new VS2010Theme();
3.RootSide操作
动态改变LayoutRoot.LeftSide对象内容。
(1)xaml中的代码
<avalon:LayoutRoot.LeftSide> <avalon:LayoutAnchorSide> <avalon:LayoutAnchorGroup x:Name="LeftGroup"> </avalon:LayoutAnchorGroup> </avalon:LayoutAnchorSide> </avalon:LayoutRoot.LeftSide>
(2)后台代码
private void miLeft_Click_1(object sender, RoutedEventArgs e) { try { LayoutAnchorable anchorable = new LayoutAnchorable(); anchorable.Title = "Left"; LeftGroup.Children.Add(anchorable); } catch (Exception ex) { MessageBox.Show(ex.Message, "[MainWindow][miLeft_Click_1]"); } }
4.Pane操作
动态改变软件中的窗格布局。
(1)xaml中的代码
<avalon:DockingManager x:Name="DockManager"> <avalon:DockingManager.Theme> <avalon:ExpressionDarkTheme/> </avalon:DockingManager.Theme> <avalon:LayoutRoot x:Name="Root"> <avalon:LayoutPanel x:Name="Panel" > <avalon:LayoutAnchorablePaneGroup x:Name="LeftAnchorableGroup" DockWidth="300"> <avalon:LayoutAnchorablePane x:Name="LeftPane"> <avalon:LayoutAnchorable x:Name="Solution" Title="解决方案" ContentId="Solution"/> </avalon:LayoutAnchorablePane> </avalon:LayoutAnchorablePaneGroup> <avalon:LayoutAnchorablePane> <avalon:LayoutAnchorable ></avalon:LayoutAnchorable> </avalon:LayoutAnchorablePane> <avalon:LayoutDocumentPane> <avalon:LayoutDocument></avalon:LayoutDocument> </avalon:LayoutDocumentPane> <avalon:LayoutDocumentPaneGroup x:Name="DocumentGroup"> <avalon:LayoutDocumentPane x:Name="DocumentPane"> <avalon:LayoutDocument Title="document" ContentId="document"> </avalon:LayoutDocument> </avalon:LayoutDocumentPane> </avalon:LayoutDocumentPaneGroup> <avalon:LayoutAnchorablePaneGroup x:Name="RightAnchorableGroup" Orientation="Vertical" DockWidth="300"> <avalon:LayoutAnchorablePane x:Name="RightPane" > <avalon:LayoutAnchorable Title="属性" ContentId="Property"/> </avalon:LayoutAnchorablePane> </avalon:LayoutAnchorablePaneGroup> </avalon:LayoutPanel> </avalon:LayoutRoot> </avalon:DockingManager>
(2)添加水平AnchorablePane
private void miAnchorPane_Click_1(object sender, RoutedEventArgs e) { try { LayoutAnchorablePane pane = new LayoutAnchorablePane(); LayoutAnchorable anchorable = new LayoutAnchorable(); anchorable.Title="水平方向"; pane.Children.Add(anchorable); LeftAnchorableGroup.Children.Add(pane); } catch(Exception ex) { MessageBox.Show(ex.Message,"[MainWindow][miAnchorPane_Click_1]"); } }
(3)添加竖直AnchorablePane
private void miAnchorVerticalPane_Click_1(object sender, RoutedEventArgs e) { try { LayoutAnchorablePane pane = new LayoutAnchorablePane(); LayoutAnchorable anchorable = new LayoutAnchorable(); anchorable.Title = "竖直方向"; pane.Children.Add(anchorable); RightAnchorableGroup.Children.Add(pane); } catch (Exception ex) { MessageBox.Show(ex.Message, "[MainWindow][miAnchorVerticalPane_Click_1]"); } }
(4)添加DocumentPane
private void miDocumentPane_Click_1(object sender, RoutedEventArgs e) { try { LayoutDocumentPane documentPane = new LayoutDocumentPane(); LayoutDocument document = new LayoutDocument(); document.Title = "document"; document.Content = new RichTextBox(); documentPane.Children.Add(document); DocumentGroup.Children.Add(documentPane); } catch (Exception ex) { MessageBox.Show(ex.Message, "[MainWindow][miDocumentPane_Click_1]"); } }
5.浮动窗体显示
private void miSearchWnd_Click_1(object sender, RoutedEventArgs e) { LayoutAnchorable anchorable = new LayoutAnchorable(); anchorable.Title = "查询"; anchorable.FloatingWidth = 300; anchorable.FloatingHeight = 300; anchorable.FloatingTop = 200; anchorable.FloatingLeft = 300; Button button = new Button(); button.Content = "查询"; button.Width = 80; button.Height = 40; anchorable.Content = button; LeftPane.Children.Add(anchorable); anchorable.Float(); //调用Float方法,使窗体浮动显示 }
6.隐藏窗体显示
private void miRestoreHideWnd_Click_1(object sender, RoutedEventArgs e) { try { if (Root.Hidden != null) { while (Root.Hidden.Count > 0) { Root.Hidden[0].Show();//调用show方法,恢复窗体显示。 } } } catch(Exception ex) { MessageBox.Show(ex.Message, "[MainWindow][miRestoreHideWnd_Click_1]"); } }
7.窗体操作
(1)添加Anchorable
private void miAddAnchroable_Click_1(object sender, RoutedEventArgs e) { LayoutAnchorable anchorable = new LayoutAnchorable(); anchorable.Title = "工具"; Button btn = new Button(); btn.Content = "this is a test button"; anchorable.Content = btn; btn.Height = 30; btn.Width = 150; anchorable.IsActive = true; RightPane.Children.Add(anchorable); }
(2)添加Document
private void miAddDocument_Click_1(object sender, RoutedEventArgs e) { LayoutDocument document = new LayoutDocument(); document.Title = "doc"; document.Content = new RichTextBox(); document.IsActive = true; DocumentPane.Children.Add(document); }
(3)添加并显示窗体
private void miOutPutWnd_Click_1(object sender, RoutedEventArgs e) { LayoutAnchorable anchorable = new LayoutAnchorable(); anchorable.Title = "输出"; anchorable.Content = new RichTextBox(); anchorable.AddToLayout(DockManager, AnchorableShowStrategy.Bottom); }
(4)窗体切换自动隐藏
private void miAutoHide_Click_1(object sender, RoutedEventArgs e) { if (Solution != null) { Solution.ToggleAutoHide(); } }
至此,AvalonDock的基础用法,至于更改AvalonDock的外观样式,使用MVVM模式等高级的用法,需要自己慢慢去学习了。
完整的源码下载:http://download.csdn.net/detail/tianwenxue/8871487
本文原创,转载请注明出处。