AvalonDock 2.0 的簡單運用

     最近在研究AvalonDock的一些使用，碰到了一些問題。現在拿出來跟大家分享分享。

     網上找了一大把AvalonDock 1.3版本的資料，弄出Demo后發現屬性面板(DockableContent)設置成浮動后不能停靠其它的面板。最后只得試試AvalonDock 2.0版本的，還好2.0版本沒讓我們失望。

     首先需要庫文件：Xceed.Wpf.AvalonDock，若需要Aero或VS2010主題效果需引用Xceed.Wpf.AvalonDock.Themes.Aero或Xceed.Wpf.AvalonDock.Themes.VS2010，當然還有其它漂亮的主題可以在官網(http://avalondock.codeplex.com/)自行下載.

     首先需要在xaml文件頭部引入這些dll（當然在此之前您還得把前面說到的庫文件引入項目）：

xmlns:avalonDock="http://schemas.xceed.com/wpf/xaml/avalondock"

     xaml布局代碼：

<avalonDock:DockingManager Grid.Row="1" x:Name="DManager">
        <avalonDock:DockingManager.Theme>
            <!--<avalonDock:AeroTheme/>-->
            <avalonDock:VS2010Theme/>
            <!--<avalonDock:ExpressionDarkTheme/>-->
            <!--<avalonDock:ExpressionLightTheme/>-->
            <!--<avalonDock:GenericTheme/>-->
            <!--<avalonDock:MetroTheme/>-->
            </avalonDock:DockingManager.Theme>

        <avalonDock:LayoutRoot>
            <avalonDock:LayoutRoot.LeftSide  >
                <avalonDock:LayoutAnchorSide >
                    <avalonDock:LayoutAnchorGroup>
                        <avalonDock:LayoutAnchorable Title="left1" AutoHideWidth="50" ContentId="left1">
                            <TextBox Width="80" SelectionChanged="TextBox_SelectionChanged"></TextBox>
                        </avalonDock:LayoutAnchorable>

                        <avalonDock:LayoutAnchorable Title="left2" AutoHideWidth="20" ContentId="left2">
                            <TextBox Width="80"></TextBox>
                        </avalonDock:LayoutAnchorable>

                    </avalonDock:LayoutAnchorGroup>
                </avalonDock:LayoutAnchorSide>
            </avalonDock:LayoutRoot.LeftSide>

            <avalonDock:LayoutPanel>
                <avalonDock:LayoutAnchorablePaneGroup DockWidth="100">
                    <avalonDock:LayoutAnchorablePane>
                        <avalonDock:LayoutAnchorable Title="text1" ContentId="text1">
                            <TextBox  TextWrapping="Wrap" AcceptsReturn="True"></TextBox>
                        </avalonDock:LayoutAnchorable>

                        <avalonDock:LayoutAnchorable Title="text2" ContentId="text2">
                            <TextBox  TextWrapping="Wrap" AcceptsReturn="True"></TextBox>
                        </avalonDock:LayoutAnchorable>
                    </avalonDock:LayoutAnchorablePane>
                </avalonDock:LayoutAnchorablePaneGroup>

                <avalonDock:LayoutDocumentPane>
                        <avalonDock:LayoutDocument Title="document1" ContentId="doc1">
                        <TextBox AcceptsReturn="True" TextWrapping="Wrap"></TextBox>
                        </avalonDock:LayoutDocument>

                        <avalonDock:LayoutAnchorable Title="document2" ContentId="doc1">
                            <TextBox AcceptsReturn="True" TextWrapping="Wrap"></TextBox>
                        </avalonDock:LayoutAnchorable>
                    </avalonDock:LayoutDocumentPane>
            </avalonDock:LayoutPanel>
        </avalonDock:LayoutRoot>

    </avalonDock:DockingManager>

 

效果：

 

 

 

 

<avalonDock:LayoutAnchorablePane>和<avalonDock:LayoutDocumentPane>我分別把它們叫做屬性布局面板和文檔布局面板。屬性布局面板的特性是停靠在面板的邊緣時可以設置自動隱藏，而且屬性布局面板也可以作為一個可停靠面板供其它的屬性布局面板停靠。文檔布局面板只可以漂浮和停靠在主布局面板中，不可以停靠在屬性布局面板里面。

 <avalonDock:LayoutAnchorablePane>和<avalonDock:LayoutDocumentPane>布局面板需要位於<avalonDock:LayoutPanel>布局面板里面，若有需要設置多個屬性布局面板和文檔布局面板置於一個面板組中可以分別使用<avalonDock:LayoutAnchorablePaneGroup>和 <avalonDock:LayoutDocumentPaneGroup>。

      正在承載我們內容控件的是<avalonDock:LayoutAnchorable>和<avalonDock:LayoutDocument>，我們可以在它們里面添加我們自己的內容。它們只能放在<avalonDock:LayoutAnchorablePane>和<avalonDock:LayoutDocumentPane>里面，看自己的需求可以自己組合使用。

　　布局就到這里了，接下來讓我們看看如何保存和恢復布局，AvalonDock 2.0提供了相應的操作類XmlLayoutSerializer，需要添加引用using Xceed.Wpf.AvalonDock.Layout.Serialization;

     cs代碼：

         //保存布局
            var serializer = new XmlLayoutSerializer(DManager);
            using (var stream = new StreamWriter("lay.txt"))
                serializer.Serialize(stream);

       //恢復布局
       var serializer = new XmlLayoutSerializer(DManager);
         using (var stream = new StreamReader("lay.txt"))
          serializer.Deserialize(stream);

 

保存布局會把當前的布局（DManager）保存在文件“lay.txt”中，恢復布局會把“lay.txt”中的布局內容恢復到界面（DManager）中。這里有點必須注意，使用這個功能時必須為每個內容面板添加ContentId屬性，如 <avalonDock:LayoutAnchorable Title="left1" AutoHideWidth="50" ContentId="left1">，否則將不能恢復。

       分享就到這里結束了，其實AvalonDock還有許多其它方面的功能，比如可以使用<avalonDock:DockingManager.AnchorableHeaderTemplate>為屬性內容界面的頭部自定義內容等等，水平有限，內容可能存在紕漏之處還請見諒。

 

    源代碼下載