AvalonDock是CodePlex上的一個開源項目，利用它可以很容易的做出類似于VS的UI效果。

下圖是AvalonDock源碼中自帶的一個Demo：

我們可以用這款第三方控件為基礎來制作多標簽瀏覽器。

下面是最終效果圖：

?

甚至可以把其中一個標簽拖出主窗體成為一個獨立的窗口：

是不是很像VS2010中新的TextEditor啊，呵呵。

但是觀察一下常用的瀏覽器，比如IE：

Chrome：

FireFox：

它們都有一個添加新標簽的按鈕，但是AvalonDock的DocumentPane默認并沒有新建一個DocumentContent的按鈕。

DocumentPane和DocumentContent是AvalonDock中眾多類型中的兩個，DocumentPane是DocumentContent的父級容器，DocumentContent中則可以置入任何UI元素，比如說一個WebBrowser。

所以我們的第一步就從給AvalonDock的DocumentPane寫一個添加新DocumentContent的按鈕開始吧。

首先ReStyle，從AvalonDock的源碼中找到DocumentPaneStyles.xaml這個文件，定位到

代碼<Button?x:Name="PART_ShowContextMenuButton"?DockPanel.Dock="Right"?Width="18"?Height="18"?Style="{StaticResource?PaneHeaderCommandStyle}"?Command="ad:DocumentPane.ShowDocumentsListMenuCommand">
????????????????????????????????????????<ad:AlignedImage>
????????????????????????????????????????????<Image?x:Name="ShowContextMenuIcon"?Source="Images\PinMenu.png"?Width="13"?Height="13"?Stretch="Uniform"/>
????????????????????????????????????????</ad:AlignedImage>
????????????????????????????????????</Button>

?

?

這段代碼

緊接著這段代碼添加如下代碼：

代碼<Button?DockPanel.Dock="Right"?Width="18"?Height="18"?Style="{StaticResource?PaneHeaderCommandStyle}"?Command="ad:DocumentPane.AddNewCommand">
????????????????????????????????????????<ad:AlignedImage>
????????????????????????????????????????????<Image?Source="Images\add.png"?Width="13"?Height="13"?Stretch="Uniform"/>
????????????????????????????????????????</ad:AlignedImage>
????????????????????????????????????</Button>

?

?

其中的add.png是我從網上隨便找的一個加號的圖片；

其中的ad:DocumentPane.AddNewCommand是緊接下來我們要給DocumentPane添加的一個Command。

找到DocumentPane.cs文件并添加代碼：

代碼public?static?RoutedCommand?AddNewCommand?=?new?RoutedCommand();
????????private?void?ExecutedAddNewCommand(object?sender,?ExecutedRoutedEventArgs?e)
????????{
????????????AddNew();
????????}
????????private?void?AddNew()
????????{
????????????DocumentContent?newContent?=?new?DocumentContent();
????????????newContent.Title?=?"new?content";
????????????newContent.IsFloatingAllowed?=?true;
????????????Items.Add(newContent);
????????}
????????private?void?CanExecuteAddNewCommand(object?sender,?CanExecuteRoutedEventArgs?e)
????????{
????????????e.CanExecute?=?true;
????????}

?

?

然后再在其OnInitialized方法中添加如下一句：

this.CommandBindings.Add(new?CommandBinding(AddNewCommand,?ExecutedAddNewCommand,?CanExecuteAddNewCommand));

?

?

這樣我們就給DocumentPane添加了一個加號按鈕并把它和AddNewCommand這個命令聯系了起來，點擊按鈕時我們添加的AddNew方法就會執行。由于DocumentPane是WPF中Selector的子類，而Selector又繼承自ItemsControl，所以DocumentPane會有一個Items屬性，我們在AddNew方法中做的就是給其Items中塞進一個新的DocumentContent。

這時再次運行AvalonDock自帶的Demo，可以看見右側有一個小加號按鈕，點擊按鈕則可以新建標簽頁：

OK！第一步搞定了。

但是每一個標簽都是空的，下一步要給每個標簽中添加一個WebBrowser。

是不是修改一下前面添加的AddNew方法，在里面new?up一個WebBrowser呢，不太好，這樣感覺不是在修改而是在破壞AvalonDock的源碼，畢竟AvalonDock是一個控件庫，添加一個新標簽時，其默認行為就應該是讓標簽為空。

給每個新添加的空標簽中置入一個WebBrowser應該是在客戶代碼中做的事兒。

這部分明天再寫吧，洗洗去看10-4?show了。（挺好看的視頻，講VS2010和.Net?4?new?features的：http://channel9.msdn.com/shows/10-4/?）

Over?and?out！Ciao！

轉載于:https://www.cnblogs.com/cuipengfei/archive/2010/03/15/1686699.html

總結

以上是生活随笔為你收集整理的使用AvalonDock制作WPF多标签浏览器（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。