程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> 基於WPF系統框架設計(5) Ribbon整合Avalondock 2.0實現多文檔界面設計(二)

基於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/

主要布局框架:

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

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

實例源碼: http://files.cnblogs.com/aganqin/TLAgent.SecurityManager.WPF.Avalondock.Demo.rar

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved