步驟1 下載庫文件
加載指定的庫，在項目上點擊右鍵，打開管理NuGet程序包
輸入Avalondock
安裝 Xceed.Products.Wpf.Toolkit.AvalonDock和 Xceed.Products.Wpf.Toolkit.AvalonDock.Themes兩個庫一個是控件庫，一個是皮膚庫，缺少任何一個，都會造成程序無法編譯。
步驟2 引入命名空間
在項目中，定義命名空間如下：
xmlns:avalondock="http://schemas.xceed.com/wpf/xaml/avalondock" |
步驟3 編寫基礎代碼
- 建立DockingManager
DockingManager停靠管理器類，是AvalonDock中的核心控件之一，負責管理浮動窗體、布局存儲、恢復，樣式主題等。在XAML中，是AvaDock元素的根節點
<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> </Grid.RowDefinitions> <avalondock:DockingManager Grid.Row="0">
</avalondock:DockingManager> </Grid> |
2、指定當前的皮膚
<avalondock:DockingManager> <avalondock:DockingManager.Theme> <avalondock:Office2007BlackTheme></avalondock:Office2007BlackTheme> </avalondock:DockingManager.Theme> </avalondock:DockingManager> |
3、創建LayoutRoot根結點
布局根節點類，DockingManager中的內容控件完全占滿DockingManager中的空間。LayoutRoot包含四個屬性，LeftSide，RightSide,TopSide,BottomSide,分別用於展示DockingManager中左右上下四個位置的內容，但初始狀態為隱藏狀態。另外兩個屬性FloatingWindows，Hidden分別為浮動窗體集合和隱藏窗體集合。當一個窗格浮動時，AvalonDock會將其從其所在組中刪除，然后放置到FloatingWindows集合中。當一個窗格關閉時，會將其放置在Hidden集合中。
<avalondock:DockingManager> <avalondock:DockingManager.Theme> <avalondock:Office2007BlackTheme></avalondock:Office2007BlackTheme> </avalondock:DockingManager.Theme> <avalondock:LayoutRoot> </avalondock:LayoutRoot> </avalondock:DockingManager> |
4、構建面板LayoutPanel
布局面板類，LayoutRoot中的內容控件，完全占滿LayoutRoot中的空間，在LayoutPanel中，可以有多個LayoutGroup,可以設定Orientation 屬性，控件布局組的浮動方向。實際的窗格都位於LayoutPanel節點下。
<avalondock:DockingManager> <avalondock:DockingManager.Theme> <avalondock:Office2007BlackTheme></avalondock:Office2007BlackTheme> </avalondock:DockingManager.Theme> <avalondock:LayoutRoot> <avalondock:LayoutPanel x:Name="Panel" > </avalondock:LayoutPanel> </avalondock:LayoutRoot> </avalondock:DockingManager> |
5、構建可停靠面板LayoutAnchorablePane
可停靠窗格類，浮動窗格是可停靠控件LayoutAnchorable的容器。一個窗格中，可以有多個可停靠控件。浮動窗格中的可停靠控件只能是LayoutAnchorable.窗格大小設定后，不能自動改變。
<avalondock:DockingManager> <avalondock:DockingManager.Theme> <avalondock:Office2007BlackTheme></avalondock:Office2007BlackTheme> </avalondock:DockingManager.Theme> <avalondock:LayoutRoot> <avalondock:LayoutPanel x:Name="Panel" > <avalondock:LayoutAnchorablePane x:Name="Pane1"> </avalondock:LayoutAnchorablePane> <avalondock:LayoutAnchorablePane x:Name="Pane2"> </avalondock:LayoutAnchorablePane> <avalondock:LayoutAnchorablePane x:Name="Pane3"> </avalondock:LayoutAnchorablePane> </avalondock:LayoutPanel> </avalondock:LayoutRoot> </avalondock:DockingManager> |
6、構建停靠內容控件LayoutAnchorable
可停靠內容類，一般放置在LayoutAnchorablePane中，其內容可以是用戶自定義控件類型，比如，在UserControl中設置好WPF基礎控件布局,然后將整個UserControl放置在LayoutAnchorable中，這樣，整個UserControl內容就可以隨着可停靠控件一起浮動或者停靠。
<avalondock:DockingManager> <avalondock:DockingManager.Theme> <avalondock:Office2007BlackTheme></avalondock:Office2007BlackTheme> </avalondock:DockingManager.Theme> <avalondock:LayoutRoot> <avalondock:LayoutPanel x:Name="Panel" > <avalondock:LayoutAnchorablePane x:Name="Pane1"> <avalondock:LayoutAnchorable x:Name="Solution1" Title="解決方案1" ContentId="Solution"/> </avalondock:LayoutAnchorablePane> <avalondock:LayoutAnchorablePane x:Name="Pane2"> <avalondock:LayoutAnchorable x:Name="Solution2" Title="解決方案2" ContentId="Solution"/> <avalondock:LayoutAnchorable x:Name="Solution3" Title="解決方案3" ContentId="Solution"/> </avalondock:LayoutAnchorablePane> </avalondock:LayoutPanel> </avalondock:LayoutRoot> </avalondock:DockingManager> |
以上定義了兩個停靠面板且第一個停靠面板，有一個停靠控件，第二個停靠面板有三個停靠控件
其顯示的效果如下圖：
由知其基本層次關系如下：
DockingManager 包含LayoutRoot
LayoutRoot下面包含LayoutPanel
LayoutPanel下面包含LayoutAnchorablePane
LayoutAnchorablePane下面包含LayoutAnchorable