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

          如今可以動態加載文檔了，就幾行代碼就能搞定，但是，文檔也是空的喲，怎麼辦？

實例源碼

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