[原譯]AVALONDOCK 2.0入門指南第一部分

AvalonDock 2.0可以用來為WPF創建一個類似Visual Studio的界面，深入理解如何使用AvalonDock進行開發是很重要的。

在這個入門指南里，我將演示如何開始使用AvalonDock，下面的文章都是基於2.0版本的。並且不能用於早期的版本。

AvalonDock是一個組合的布局模型，很多的控件都在視圖上顯示，一個DockingManager 類也顯示在停靠區，用於可以拖拽文檔和工具。

從下面這個截圖中我們可以理解AvalonDock組件

DockingManager 這是AvalonDock中的核心控件，它將包含的窗格排序，處理飛出的窗格，還有浮動的窗口。在上面這個圖中，DockingManager 對象包含了所有空間（WPF控件），從頂部的工具欄到底部的狀態欄都算。同時。DockingManager 也可以處理保存和恢復布局。

LayoutPanel 這個面板用來管理在一個方向上的子窗口（通過Orientation屬性來選擇方向），並且在它們之間添加了一個大小調節控件，在一個Orientation屬性是Horizontal（水平）的LayoutPanel 上，排列了三個窗格。一個LayoutAnchorablePane在左，一個LayoutDocumentPane在中間。一個LayoutDockablePane在右邊。

LayoutDockablePane 這個布局元素包含一個LayoutAnchorable對象的集合。通過它用來管理想TabControl這樣的控件，在上面的截圖中，LayoutDockablePanes是在左邊的’Strumenti’ 和 ‘Progetti’ (工具和項目) 和在右邊的’Classi’ 和 ‘Proprieta” (類視圖和屬性視圖)的容器，一個LayoutDockablePane可以自動隱藏，就像’Errori’(錯誤)和’Lista Azioni’(操作列表) and ‘Uscita’(輸出)。並且LayoutDockablePane可以被拖動到DockingManager上，成為一個浮動窗口或者附着到它的父控件DockingManager的邊緣上。

LayoutDocumentPane 通常包含文檔（DocumentContent類型）的一種窗格，但是其實也可以包含像上面提到的工具視圖和類視圖這樣的DockableContents。在一個文檔里。LayoutDocumentPane 被放置在ResizingPanel（水平方向）里。ResizingPanel則是上賣弄提到的在兩個DockablePane中間的區域。注意。文檔窗格是不能被移動的。

LayoutAnchorable 一個停靠內容，是軟件控件的容器，總是被包含在一個窗格里（LayoutAnchorablePane或是LayoutDocumentPane），在截圖里。LayoutAnchorable是一類對象（包含一個SharpDevelop對象），工具對象，但是錯誤窗口（它處於自動隱藏狀態，被好辦在一個自動隱藏窗格里）不是。LayoutAnchorable就像它名字所暗示的那樣。可以被從他的容器窗格里拖走。然后重新放置在一個存在的窗格里。或者是放置在父DockingManager的邊緣，或者是放置在一個浮動窗口里（LayoutAnchorableFloatingWindow）。

LayoutDocument 是一個僅可以被寄宿到LayoutDocumentPane的內容。它是一個特殊的內容，因為不能被停靠到邊緣。僅能被放置到LayoutDocumentPane里。或者浮動在一個LayoutDocumentFloatingWindow窗口里。在途中，DocumentContent對象是program.cs’ 或 ‘MainForm.cs’ 文件視圖

LayoutFloatingWindow ，是一個包含內容的窗口，當被拖動到一個DockingManager上面的時候，LayoutFloatingWindow（LayoutAnchorableFloatingWindow和LayoutDocumentFloatingWindow繼承自他）集成在Window，總是包含一個窗格（LayoutAnchorablePane或是LayoutDocumentPane），窗格包含更多的內容（LayoutAnchorable或LayoutDocument），當用戶對一個內容或是DockablePane執行拖拽，或者直接手工使用代碼調用LayoutContent.Float()方法 LayoutFloatingWindow就被直接從DockingManager創建出來了。

LayoutPane 一個基類，LayoutDockablePane和LayoutDocumentPane繼承自它。它為他們提供了一些共有的屬性和方法。

LayoutContent 是LayoutAnchorable 和LayoutAnchorable類的父類。提供了共有的屬性和方法。

理解布局元素是一些屬於布局模型的類而不是屬於視圖是很重要的。因為，他們不是繼承自FrameworkElement類，取而代之。AvalonDock包含了另一些類來展示這些組件的視圖。這些類通常被命名為相關聯的類名+Control字串。舉個例子，在布局里創建的LayoutAnchorable創建了一個LayoutAnchorableControl（繼承自FrameworkElement的類），並且綁定了LayoutAnchorableControl.Model 到這個LayoutAnchorable對象上。

每一個被創建的視圖控件總是有着Model屬性的布局元素。因此，重新設計一個相關視圖控件的樣式是可以的。

為了開始創建一個新的.net 4/.net 4.5的解決方案。並且添加對AvalonDock.dll的引用（可以直接添加也可以使用NuGet），然后添加AD命名空間到MainWindow.xaml中。

在根Grid下放置DockingManager組件和一個簡單的布局。

 

<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:LayoutPanel Orientation="Horizontal">
                    <avalonDock:LayoutDocumentPane/>
                    <avalonDock:LayoutAnchorablePane DockWidth="150">
                        <avalonDock:LayoutAnchorable Title="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>

 

 

DockingManager是AvalonDock的核心類，他的責任就是創建管理布局。布局被定義成一個ILayoutElement的樹。樹的根由LayoutRoot類指定。LayoutRoot由一些基本的子樹來構成。。

1.根面板的 根屬性指向主 LayoutPanel，也是LayoutRoot的內容屬性。

2.大體上講，RightSide/LeftSide/TopSide/BottonSide是LayoutAnchorGroup對象的集合屬性，他們表示了停靠管理器的四個邊。停靠管理器的錨通常是隱藏的。當用戶移動鼠標到這些區域的時候。就會在自動隱藏的窗口里顯示出來。

3.FloatingWindows屬性是FloatingWindow的集合。一個浮動窗口當用戶拖動一個窗格（LayoutAnchorable或是LayoutDocument）的時候就被創建出來，這個集合可以被AvalonDock自動更新，但是用戶依然可以通過調用LayoutContent的Float()方法來創建一個浮動窗口。

Hidden是一個Anchorable（停靠）對象的集合。默認情況下，當用戶點擊一個LayoutAnchorable對象的關閉按鈕，AvalonDock隱藏它：通過從布局里移除停靠元素，並且把他放入Hidden集合，當用戶想要再一次顯示的時候，AD又把這個內容從隱藏集合里刪除重新顯示在他被隱藏的那個窗格里。

當使用布局樹的時候，程序員可以創建任何復雜的界面，LayoutAnchorablePane的DockWidth和DockHeight屬性可以被用來設置窗格的初始寬度和高度。而LayoutDocumentPane類通常則填滿可用的空間。AvalonDock管理內容元素的寬度和高度以使得可以使用所有的可用空間。因此如果一個LayoutAnchorablePane被放置在一個LayoutPanel里，為LayoutAnchorablePane使用一個固定尺寸而為LayoutDocumentPane使用一個比例長度。也就是說為停靠對象使用了比例長度。

一個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>

 

運行這個工程你就可以重新排列內容了。移動他們到浮動窗口。為了更加熟悉AvalonDock，我建議你多試幾次，然后重新排列內容實現更復雜的布局。

在入門指南的第二部分。我將演示我們如何保存布局。附加事件像DocumentClose/ DocumentClosing 或者ActiveContent 改變的事件。
原文地址：AvalonDock 2.0 getting started guide PART 1
著作權聲明：本文由http://leaver.me 翻譯，歡迎轉載分享。請尊重作者勞動，轉載時保留該聲明和作者博客鏈接，謝謝！