WPF随笔（十）–使用AvalonDock实现可停靠式布局「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

我们每天使用的许多软件都使用了可停靠式布局，可以方便的打开、关闭、收起、展开、移动选项卡。今天就来说明如何使用AvalonDock实现这种可停靠式布局。

AvalonDock安装

最新版本的AvalonDock类库包含在程序包Extended.Wpf.Toolkit中，属于Xceed旗下的一款产品。使用Nuget管理器搜索安装，最新版本是3.4.0。

除了AvalonDock，Extended.Wpf.Toolkit套件中还包含了Xceed.Wpf.DataGrid和Xceed.Wpf.Toolkit，有兴趣的 也可以了解下。

代码示例

        <avalon:DockingManager>
            <avalon:DockingManager.Theme>
                <avalon:MetroTheme></avalon:MetroTheme>
            </avalon:DockingManager.Theme>
            <avalon:LayoutRoot>
                <avalon:LayoutPanel Orientation="Horizontal">
                    <avalon:LayoutAnchorablePaneGroup DockMinWidth="240" FloatingWidth="240">
                        <avalon:LayoutAnchorablePane x:Name="panelLeft">
                            <avalon:LayoutAnchorable Title="Left1"></avalon:LayoutAnchorable>
                            <avalon:LayoutAnchorable Title="Left2"></avalon:LayoutAnchorable>
                        </avalon:LayoutAnchorablePane>
                    </avalon:LayoutAnchorablePaneGroup>
                    <avalon:LayoutPanel Orientation="Vertical">
                        <avalon:LayoutDocumentPaneGroup>
                            <avalon:LayoutDocumentPane x:Name="panelTop">
                                <avalon:LayoutDocument Title="Top1"></avalon:LayoutDocument>
                                <avalon:LayoutDocument Title="Top2"></avalon:LayoutDocument>
                            </avalon:LayoutDocumentPane>
                        </avalon:LayoutDocumentPaneGroup>
                        <avalon:LayoutAnchorablePaneGroup DockMinHeight="180" FloatingHeight="180">
                            <avalon:LayoutAnchorablePane x:Name="panelBottom">
                                <avalon:LayoutAnchorable Title="Bottom1"></avalon:LayoutAnchorable>
                                <avalon:LayoutAnchorable Title="Bottom2"></avalon:LayoutAnchorable>
                                <avalon:LayoutAnchorable Title="Bottom3"></avalon:LayoutAnchorable>
                            </avalon:LayoutAnchorablePane>
                        </avalon:LayoutAnchorablePaneGroup>
                    </avalon:LayoutPanel>
                    <avalon:LayoutAnchorablePaneGroup DockMinWidth="270" FloatingWidth="270">
                        <avalon:LayoutAnchorablePane x:Name="panelRight" DockWidth="240" FloatingWidth="240">
                            <avalon:LayoutAnchorable Title="Right1"></avalon:LayoutAnchorable>
                            <avalon:LayoutAnchorable Title="Right2"></avalon:LayoutAnchorable>
                        </avalon:LayoutAnchorablePane>
                    </avalon:LayoutAnchorablePaneGroup>
                </avalon:LayoutPanel>
            </avalon:LayoutRoot>
        </avalon:DockingManager>

首先写段代码来看效果如何，结果就如同下图所示，可以自由的拖动、改变或停靠选项卡。

层级结构

结合上面的示例和官方文档的说明，使用AvalonDock时的页面元素结构大体如下：

各个类的说明如下：

其中DockingManager仅能包含一个LayoutRoot，而LayoutRoot仅能包含一个LayoutPanel，但LayoutPanel内能包含多个LayoutPanel并能多层嵌套。
此外LayoutAnchorablePaneGroup和LayoutDocumentPaneGroup也可以多层嵌套。
LayoutAnchorable和LayoutDocument内包含的就是实际内容了，可以是WPF控件或自定义控件。

了解了AvalonDock中各个元素的意义及用途，就能更加快速的规划自己的布局了。