|
AvalonDock 是一個(gè).NET庫，用于在?？磕Ｊ讲季郑╠ocking）中排列一系列WPF/WinForm控件。最新發(fā)布的版本原生支持MVVM框架、Aero Snap特效并具有更好的性能。
AvalonDock 2.0版本已經(jīng)發(fā)布了，新版本是用MVVM框架重新編寫，似乎也用了Command（命令）模式。2.0版的文檔尚未發(fā)布，但你可以參考Avalon.TestApp 或者2.0版源碼中的Avalon.MVVMTestApp文件夾來查看新的API。
前一篇博文有介紹關(guān)于AvalonDock使用-《Docking For WPF–AvalonDock》
還有一篇也是同類的關(guān)于多文檔界面設(shè)計(jì)《基于WPF系統(tǒng)框架設(shè)計(jì)-Ribbon整合Avalondock 2.0實(shí)現(xiàn)多文檔界面設(shè)計(jì)(一)》
單文檔界面樣式是Windows應(yīng)用程序比較常用的布局選項(xiàng)。Microsoft Windows中的“記事本”是單文檔界面應(yīng)用程序的一個(gè)典型示例。在“記事本”中，同一時(shí)間只能打開一個(gè)文檔。資源管理器樣式界面是包含兩個(gè)“窗格”或區(qū)域的單個(gè)窗口，通常由左側(cè)的樹或分層視圖以及右側(cè)的顯示區(qū)域組成，與“Microsoft Windows資源管理器”一樣。資源管理器樣式界面適合于定位或?yàn)g覽大量的文檔、圖片或文件。
多文檔界面是從Windows 2.0下的Microsoft Excel電子表格程序開始引入的，由于Excel電子表格用戶有時(shí)需要同時(shí)操作多份表格。
基于多文檔，多任務(wù)模式操作的靈活性，Ribbon框架設(shè)計(jì)中也整合多文檔界面布局功能，下面就來實(shí)施做一個(gè)案例。
- Xceed.Wpf.AvalonDock.dll
- Xceed.Wpf.AvalonDock.Themes.Expression.dll
- Xceed.Wpf.AvalonDock.Themes.Metro.dll
- Xceed.Wpf.AvalonDock.Themes.VS2010.dll
把這些程序集添加到項(xiàng)目引用中，如下圖：
以XAML模式打開MainWindow.xaml,添加Dock標(biāo)簽，如下：
<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>
同樣這個(gè)布局控件也有主題，我針對(duì)Ribbon框架設(shè)計(jì)了三個(gè)Dock主題Silver,Blue,Black。
如下圖：
Silver:
Blue:
Black:
- 如何做到支持動(dòng)態(tài)加載Dock主題呢？
添加如下代碼即可以實(shí)現(xiàn)動(dòng)態(tài)更改Dock主題：
public static void ChangeTheme(DockingManager dockingManager, ThemeStyle themeStyle)
{
#region 設(shè)置控件背景的樣式
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
}
- 如何做到動(dòng)態(tài)加載文檔界面呢?
現(xiàn)在的效果只是在XAML中固定的多文檔界面，但是實(shí)際的系統(tǒng)是要支持動(dòng)態(tài)創(chuàng)建文檔的，比如我點(diǎn)“查詢用戶”就會(huì)顯示這個(gè)文檔內(nèi)容，
我把上面改成動(dòng)態(tài)生成文檔的標(biāo)簽，參考如下源碼：
<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>
運(yùn)行后如下圖:
現(xiàn)在只是一個(gè)空的框架，還沒有添加文檔界面喔，下面就來實(shí)現(xiàn)動(dòng)態(tài)加載文檔頁面。
后臺(tái)代碼,我實(shí)現(xiàn)了動(dòng)態(tài)創(chuàng)建三個(gè)文檔：
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());
}
現(xiàn)在能夠動(dòng)態(tài)加載文檔了，就幾行代碼就能搞定，可是，文檔也是空的喲，怎么辦？
實(shí)例源碼
附:我想到下一篇博文介紹這一塊的設(shè)計(jì),我向來喜歡短小精悍文章。
|
