基于WPF系统框架设计(5)-Ribbon整合Avalondock 2.0实现多文档界面设计(二)_.NET_编程开发_程序员俱乐部

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/

• 主要布局框架:

1. Xceed.Wpf.AvalonDock.dll

• 其他的是主题样式模板：

1. Xceed.Wpf.AvalonDock.Themes.Expression.dll
2. Xceed.Wpf.AvalonDock.Themes.Metro.dll
3. 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());
        }

          现在能够动态加载文档了，就几行代码就能搞定，可是，文档也是空的哟，怎么办？

实例源码

          附:我想到下一篇博文介绍这一块的设计,我向来喜欢短小精悍文章。