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

AvalonDock2.0 getting started guide PART 1

AvalonDock 2.0 allows to create an interface for WPF verysimilar to Visual Studio GUI. It’s important to understand that has beendeveloped with this in mind so it’s most suited for projects that havedocuments and tools.
In this tutorial I’ll show you how to start using with AvalonDock. Belowinformation are relative to version 2.0 and connot be valid for earlierversions.
AvalonDock is composed of a layout model, a series of controls representing theviews and a DockingManager class which reppresents the docking area where usercan drag and drop documents and tools.
Looking at the below screenshot we can identify the AvalonDock components.

AvalonDock 2.0允许创建一个非常类似于VS的GUI的接口提供给WPF，已经发展到这一点所以它最适合于具有文档和工具的项目。

在这个教程里我要展示给你的是怎么开始使用AVALonDock,以下信息是关于2.0版本的和早点可用版本的。

Avalondock是一个布局模型的组成，一系列的控件来代表视图，并且一个DockingManager类代表停靠的用可以进行拖拉文档和工具的区域。

看下面的截图我们可以区分，鉴别出avalondock组件。

 

DockingManager This is the core control in AvalonDock. It arrangescontained panes, handles fly out panes and floating windows. In the above imagethe DockingManager object contains everything (in WPF terms) from the toolbar ontop and the status bar on bottom. DockingManager class also handles saving andrestoring layout.

DockingManager类， 是avalonDock的核心控件，它包含了面板，控制浮出面板和浮动窗口，在上图中的DockingManager对象包含从顶部工具栏和底部的状态栏中的一切（ WPF中的条款） 。 DockingManager类也处理保存和恢复布局

LayoutPanel This panel arranges children panes along a direction (selected withproperty Orientation) adding a resizer between them. Above a LayoutPanel withhorizontal orientation arranges three panes: a LayoutAnchorablePane on left, aLayoutDocumentPane in the central area, and a LayoutDockablePane on right.

LayoutPanel此面板安排孩子沿着方向（与属性Orientation选择）增加它们之间的大小调整窗格

与上述水平方向一LayoutPanel安排三个窗格：在LayoutAnchorablePane离开，在中心区一个LayoutDocumentPane ，并在右边的LayoutDockablePane 。

LayoutAnchorablePaneThis layout element contains a collection of LayoutAnchorable obiects. Usuallyit arranges contents like a tabcontrol. In the above screenshotLayoutDockablePanes are the container of contents ‘Strumenti’ and ‘Progetti'(Tools and Projects in English) on the left and the container of ‘Classi’ and’Proprieta” (Classes and Properties in English) on the right. ALayoutDockablePane can be auto-hidden (like that containing contents’Errori'(errors), ‘Lista Azioni'(action list) and ‘Uscita'(output)) and can bedragged over the DockingManager as floating window or anchored to a border ofthe parent DockingManager.

LayoutAnchorablePane此布局元素包含LayoutAnchorableobiects的集合。通常它安排像一个tabcontrol的内容。在上面的截图LayoutDockablePanes是内容’ Strumenti ‘和’ PROGETTI “ （在英语中的工具和工程）左侧的容器和’CLASSI ‘的容器和’ Proprieta ”（类和英语的属性）在右侧。一个LayoutDockablePane可以自动隐藏（如含内容“ ERRORI” （错误） ， ‘利斯塔AZIONI “ （动作列表）和” Uscita ‘ （输出） ），可拖过DockingManager那样的浮动窗口或者锚定边界父DockingManager

LayoutDocumentPane A pane of this type contains usuallydocuments (object of type DocumentContent) but optionally can also containDockableContents object like the above ‘Tools’ or ‘Classes’ contents. Above adocument content is placed inside a ResizingPanel (horizontally orienteted) inthe central area between the too DockablePane object just mentioned. A documentpane can’t be moved.

LayoutDocumentPane这种类型的窗格中通常包含的文件（类型DocumentContent的对象） ，但选择性也可以包含DockableContents对象像上面的’工具’或’类’的内容。上面的文件内容被放置在一个ResizingPanel （水平orienteted ）在刚才提到的太DockablePane对象之间的中心区域。文档窗格中无法移动。

LayoutAnchorable A anchorable content is the container ofapplication controls. It’s always contained in a pane (LayoutAnchorablePane orLayoutDocumentPane). In the above screen shot, LayoutAnchorable objects are the’classi'(classes) object (which contains a SharpDevelop object), the’strumenti'(tools) object but also the ‘Errori’ (errors) (which is in theAutoHidden state and is contained in a autohidden pane). A LayoutAnchorable asname suggests can be dragged away from its container pane and be repositionedinto another esisting pane, or to a border of the parent DockingManager or leftin a floating window (LayoutAnchorableFloatingWindow).

LayoutAnchorable一个锚定的内容是应用控制的容器。它总是包含在一个窗格（ LayoutAnchorablePane或LayoutDocumentPane） 。在上面的屏幕截图， LayoutAnchorable对象是“ CLASSI ” （类）对象（其中包含了SharpDevelop的对象）中，“ strumenti ” （工具）对象也有’ ERRORI “ （错误） （这是在自动隐藏状态，被包含在一个自动隐藏窗格） 。一个LayoutAnchorable作为顾名思义可以拖离它的容器窗格和重新定位到另一个esisting窗格中，或者父DockingManager的边界，或留在一个浮动窗口（LayoutAnchorableFloatingWindow ） 。

LayoutDocument is a content that can be hosted only in aLayoutDocumentPane. It’s a particular content because can’t be anchored to aborder but can be positioned only into a LayoutDocumentPane or floated in aLayoutDocumentFloatingWindow. Above LayoutDocument objects are the ‘program.cs’or ‘MainForm.cs’ files.

LayoutDocument是，只能在LayoutDocumentPane托管内容。它是一个特定的内容，因为不能被锚定到一个边界，但可以仅定位成LayoutDocumentPane或漂浮在一LayoutDocumentFloatingWindow。上述LayoutDocument对象是“Program.cs中’或’MainForm.cs中”文件。

LayoutFloatingWindow It’s a window that contains contents when are dragged or moved over aDockingManager. A LayoutFloatingWindow (and its specializationsLayoutAnchorableFloatingWindow and LayoutDocumentFloatingWindow) derives fromWindow, and always contains a pane (LayoutAnchorablePane or LayoutDocumentPane)which in turn contains one or more contents (LayoutAnchorable orLayoutDocument). The LayoutFloatingWindow object is created directly from theDockingManager when user start a dragging operation for a content or aDockablePane or manually by code calling the LayoutContent.Float() method.

LayoutFloatingWindow这是一个包含内容或拖移过DockingManager当一个窗口。一个LayoutFloatingWindow （及其专业LayoutAnchorableFloatingWindow和LayoutDocumentFloatingWindow）从窗口派生的，并始终包含一个窗格（ LayoutAnchorablePane或LayoutDocumentPane ），其中又包含一个或多个内容（ LayoutAnchorable或LayoutDocument ） 。该LayoutFloatingWindow对象从DockingManager直接创建时用户开始拖动操作用于调用LayoutContent.Float （）方法的内容或DockablePane或手动代码。

LayoutPane It’s a base class for LayoutDockablePane andLayoutDocumentPane. It provides common properties and methods for both.

LayoutPane这对LayoutDockablePane和LayoutDocumentPane的基类。它提供了常见的属性和两个方法。

LayoutContent It’s a base class for LayoutAnchorable andLayoutDocument. It provides common properties and methods for both.

LayoutContent这对LayoutAnchorable和LayoutDocument的基类。它提供了常见的属性和两个方法

it’s important to understand that layout elements are classes belonging tothe layout model not to the view. So they are not deriving fromFrameworkElement class. Instead AvalonDock contains a different section ofclasses that represent the view of the component. These classes are usuallynamed as the corresponding layout element plus the “Control” string.So for example when a LayoutAnchorable is created inside the layout AvalonDockcreates a LayoutAnchorableControl (a FrameworkElement derived class) and bindsthe LayoutAnchorableControl.Model to the LayoutAnchorable object.

Every view control that is created is always bound to the layout elementthru the Model property. It’s possible to restyle AvalonDock componentsproviding a WPF style for the relative view control.

To start create a new .NET 4/.NET 4.5 solution and add a reference toAvalonDock.dll (directly or using NuGet). Then add the AD namespace to theMainWindow.xaml.

Under the root grid place the DockingManager and a sample layout:

重要的是要明白，布局元素都属于布局模型不给视图类。所以他们不从FrameworkElement类派生。相反AvalonDock包含表示组件的视图类不同的部分。这些类通常命名为相应的布局元素，加上了“控制”的字符串。因此，例如，当一个LayoutAnchorable是布局AvalonDock内部创建创建一个LayoutAnchorableControl （FrameworkElement派生类）和LayoutAnchorableControl.Model绑定到LayoutAnchorable对象。

创建的每个视图控件始终绑定到直通Model属性的布局元素。这是可能的RESTYLE AvalonDock组件的相对视图控件提供了一个WPF的风格。
要开始创建一个新的。NET 4/.NET 4.5解决方案，并添加一个引用到AvalonDock.dll （或直接使用的NuGet ） 。然后，命名空间添加到MainWindow.xaml 。下面为创建一个布局的例子文件

<Window x:Class=”MainWindow”

       xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

       xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

       xmlns:avalonDock=”http://avalondock.codeplex.com”

       Title=”MainWindow” Height=”434″Width=”684″>

   <Grid>

       <avalonDock:DockingManager x:Name=”dockingManager”>

            <avalonDock:LayoutRoot>

                <avalonDock:LayoutPanelOrientation=”Horizontal”>

                   <avalonDock:LayoutDocumentPane/>

                   <avalonDock:LayoutAnchorablePane DockWidth=”150″>

                        <avalonDock:LayoutAnchorableTitle=”Sample Tool Pane”>

                            <TextBox/>

                       </avalonDock:LayoutAnchorable>

                   </avalonDock:LayoutAnchorablePane>

                </avalonDock:LayoutPanel>

               <avalonDock:LayoutRoot.LeftSide>

                   <avalonDock:LayoutAnchorSide>

                       <avalonDock:LayoutAnchorGroup>

                           <avalonDock:LayoutAnchorable Title=”Autohidden Content”>

                                <TextBox/>

                           </avalonDock:LayoutAnchorable>

                       </avalonDock:LayoutAnchorGroup>

                   </avalonDock:LayoutAnchorSide>

               </avalonDock:LayoutRoot.LeftSide>

            </avalonDock:LayoutRoot>

       </avalonDock:DockingManager>

   </Grid>

</Window>

The DockingManager class is the core of AvalonDock. It’s responsible tocreate and manage the layout. The layout is defined as a tree of ILayoutElementobjects. The root is represented by the LayoutRoot class which is composed bysome foundamental children:

1.   The root panelaccessible thru the Root property points to the main LayoutPanel, which is alsothe content property of the LayoutRoot class.

2.   RightSide/LeftSide/TopSide/BottonSideare (roughly speaking) collection properties of type LayoutAnchorGroup objects.They represent the four side of the docking manager hosting anchorables thatare autohidden. When user move the mouse over one of these areas the linkeanchorable is shown in a autohidden window.

3.    FloatingWindowsproperties is a collection of FloatingWindow. A Floating window is createdevery time the user drags a pane (LayoutAnchorable or LayoutDocument). Thiscollection is automatically updated by AvalonDock but one can create a floatingwindow calling the Float() method of the LayoutContent class.

4.  Hidden is acollection of Anchorable object. By default when user click the x button of aLayoutAnchorable AvalonDock hides it: that is it removes the anchorable fromthe layout and put it in the Hidden collection. When user wants to show itagain AD removes the content from this collection and tries to re-shown thepane where it was hidden.

该DockingManager类是AvalonDock的核心。它负责创建和管理布局。布局是指ILayoutElement对象树。根是由是由一些foundamental儿童组成的LayoutRoot的类来表示：
根面板访问直通Root属性点主要LayoutPanel，这也是LayoutRoot的类的内容属性。
RightSide /侧别/上部/BottonSide的类型LayoutAnchorGroup对象（粗略地讲）集合属性。他们所代表的四个侧面对接经理托管anchorables的被自动隐藏。当用户将鼠标移动到这些区域之一的临客锚定会显示在自动隐藏窗口。
FloatingWindows性质是FloatingWindow的集合。浮动窗口被创建的每个用户拖动窗格（ LayoutAnchorable或LayoutDocument ）的时间。这个系列是由AvalonDock自动更新，但我们可以创建一个浮动窗口调用浮动的LayoutContent类的（ ）方法。
隐藏的是锚定对象的集合。默认情况下，当用户点击一个LayoutAnchorable AvalonDock的X按钮隐藏它：那就是它消除了锚定的布局，并把它在隐藏集合。当用户想再次显示公元移除此集合中的内容，并试图重新显示它被隐藏的窗格。

Working with the layout tree, one could create any complexinterface. The LayoutAnchorablePane DockWidth/Height can be used to give theinitial Width/Height of a pane. The LayoutDocumentPane class instead alwaysoccupies all the available space. AvalonDock manages the widths and heights ofthe contents in order to occupies all the available spaces. So if anLayoutAnchorablePane is contained in a LayoutPanel where is present aLayoutDocumentPane it uses a fixed size for the LayoutAnchorablePane and a starlength for the LayoutDocumentPane. If it’s contained in a LayoutPanel whereonly LayoutAnchorablePanes are present, it gives star lengths to theLayoutAnchorable objects.

A LayoutDocumentGroup/LayoutAnchorableGroup class can be used to arrange moreLayoutDocumentPane/LayoutAnchorablePane. For example let’s change the aboveexample to show a more complex scenario.

与树的布局工作，人们可以创建任何复杂的界面。该LayoutAnchorablePaneDockWidth /高度可以用来给一个窗格的初始宽度/高度。该LayoutDocumentPane类，而不是始终占据全部可用空间。 AvalonDock管理的内容的宽度和高度，以便占据了所有可用的空间。因此，如果一个LayoutAnchorablePane包含在LayoutPanel其中存在时，它使用一个固定大小的LayoutAnchorablePane和星形长度为LayoutDocumentPane一个LayoutDocumentPane。如果它包含在一个LayoutPanel其中只有LayoutAnchorablePanes都存在，它给明星的长度为LayoutAnchorable对象。
一个LayoutDocumentGroup / LayoutAnchorableGroup类可用于安排更多LayoutDocumentPane / LayoutAnchorablePane 。例如，让我们改变上面的例子中展现出更复杂的情况。

<Window x:Class="AvalonDock2Tutorial.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:avalonDock="http://avalondock.codeplex.com"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <avalonDock:DockingManager x:Name="dockingManager">

            <avalonDock:LayoutRoot>

                <avalonDock:LayoutPanel Orientation="Horizontal">

                    <avalonDock:LayoutDocumentPaneGroup>

                        <avalonDock:LayoutDocumentPane>

                            <avalonDock:LayoutDocument Title="Doc1">

                                <TextBox/>

                            </avalonDock:LayoutDocument>

                            <avalonDock:LayoutDocument Title="Doc2">

                                <TextBox/>

                            </avalonDock:LayoutDocument>

                        </avalonDock:LayoutDocumentPane>

                        <avalonDock:LayoutDocumentPane>

                            <avalonDock:LayoutDocument Title="Doc3">

                                <TextBox/>

                            </avalonDock:LayoutDocument>

                        </avalonDock:LayoutDocumentPane>                        

                    </avalonDock:LayoutDocumentPaneGroup>

                    <avalonDock:LayoutAnchorablePaneGroup DockWidth="150" Orientation="Vertical">

                        <avalonDock:LayoutAnchorablePane>

                            <avalonDock:LayoutAnchorable Title="Tool 1">

                                <TextBox/>

                            </avalonDock:LayoutAnchorable>

                            <avalonDock:LayoutAnchorable Title="Tool 2">

                                <TextBox/>

                            </avalonDock:LayoutAnchorable>

                        </avalonDock:LayoutAnchorablePane>

                        <avalonDock:LayoutAnchorablePane>

                            <avalonDock:LayoutAnchorable Title="Tool 3">

                                <TextBox/>

                            </avalonDock:LayoutAnchorable>

                            <avalonDock:LayoutAnchorable Title="Tool 4">

                                <TextBox/>

                            </avalonDock:LayoutAnchorable>

                        </avalonDock:LayoutAnchorablePane>

                    </avalonDock:LayoutAnchorablePaneGroup>

                </avalonDock:LayoutPanel>

                <avalonDock:LayoutRoot.LeftSide>

                    <avalonDock:LayoutAnchorSide>

                        <avalonDock:LayoutAnchorGroup>

                            <avalonDock:LayoutAnchorable Title="Autohidden Content">

                                <TextBox/>

                            </avalonDock:LayoutAnchorable>

                        </avalonDock:LayoutAnchorGroup>

                    </avalonDock:LayoutAnchorSide>

                </avalonDock:LayoutRoot.LeftSide>

            </avalonDock:LayoutRoot>

        </avalonDock:DockingManager>

    </Grid>

</Window>

Running the project you should be able to rearrangecontents, move them to floating window. To get more confident with AvalonDock Isuggest you to make some tries reworking the sample to arrange contents in evenmore complex layout.

In Part 2 of the guide we’ll see how to save layouts, attach events likeDocumentClose/Closing or ActiveContent changed.

Last edited Oct 13, 2012 at 6:23 PM by adospace, version 8

运行项目，你应该能够重新排列内容，将它们移动到浮动窗口。为了获得更多的自信与AvalonDock我建议你做一些尝试改造的样品，安排内容更为复杂的布局。
在本指南的第2部分中，我们将看到如何保存布局，附加活动，如DocumentClose /关闭或ActiveContent改变。
最后编辑2012年10月13日于下午6:23由adospace ，第8版