使用AvalonDock制作WPF多标签浏览器（一）

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>