基於WPF系統框架設計(5)-Ribbon整合Avalondock 2.0實現多文檔界面設計(二)

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());
        }

          現在能夠動態加載文檔了，就幾行代碼就能搞定，可是，文檔也是空的喲，怎么辦？

實例源碼

          附:我想到下一篇博文介紹這一塊的設計,我向來喜歡短小精悍文章。