WPF實現選項卡效果（1）——使用AvalonDock

原文: WPF實現選項卡效果（1）——使用AvalonDock

簡介

　　公司最近一個項目，軟件採用WPF開發，須要實現相似於VS的選項卡(或者是瀏覽器的選項卡)效果。搜尋諸多資料後，發現不少同仁推薦AvalonDock這款開源控件。在其官方地址下載源碼和Demo後，對其進行了初步的研究，初步實現了預期效果。
　　完整系列
　　● 第一部分
　　● 第二部分
　　● 第三部分
　　在Git中下載工程源碼

AvalonDocking的結構樹

　　在下載的Demo中，咱們能夠發現AvalonDock的可視化結構樹以下:

<avalon:DockingManager x:Name="dockingManager">
            <avalon:LayoutRoot>
                <avalon:LayoutPanel Orientation="Horizontal">
                    <avalon:LayoutDocumentPane DockWidth="300">
                        <avalon:LayoutAnchorable Title="Sample Tool Pane">
                            <TextBox />
                        </avalon:LayoutAnchorable>
                    </avalon:LayoutDocumentPane>
                </avalon:LayoutPanel>
            </avalon:LayoutRoot>
        </avalon:DockingManager>

咱們來作一個Demo

Step 1-建立WPF項目

　　在Visual Studio中新建一個WPF項目，而後打開MainWindow.xaml文件,修改其代碼以下：　　

<Window x:Class="AvalonProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:avalon="http://schemas.xceed.com/wpf/xaml/avalondock" Title="MainWindow" Height="600" Width="800">
    <Grid>
        <avalon:DockingManager x:Name="dockingManager">
            <avalon:LayoutRoot>
                <avalon:LayoutPanel Orientation="Horizontal">
                    <avalon:LayoutDocumentPane DockWidth="300">
                        <avalon:LayoutAnchorable Title="Sample Tool Pane">
                            <TextBox />
                        </avalon:LayoutAnchorable>
                    </avalon:LayoutDocumentPane>
                </avalon:LayoutPanel>
                <avalon:LayoutRoot.LeftSide>
                    <avalon:LayoutAnchorSide>
                        <avalon:LayoutAnchorGroup>
                            <avalon:LayoutAnchorable Title="Autohidden Content">
                                <TextBox />
                            </avalon:LayoutAnchorable>
                        </avalon:LayoutAnchorGroup>
                    </avalon:LayoutAnchorSide>
                </avalon:LayoutRoot.LeftSide>
            </avalon:LayoutRoot>
        </avalon:DockingManager>
    </Grid>
</Window>

Step 2-添加AvalonDock引用

　　在剛剛建好的項目中，添加Xceed.Wpf.AvalonDock引用。
　　咱們回顧上面的xaml代碼，其中有一句代碼：

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

　　這一句就是xaml代碼對AvalonDock命名控件的引用，只有添加這一句才能在xaml代碼中對AvalonDock的控件進行使用。

Step 3-運行程序

　　運行程序，咱們發現效果以下：
　　
　　

總結

　　在上面的代碼中，咱們沒有書寫任何C#代碼，利用AvalonDock初步實現了咱們須要的選項卡效果。