C# WPF Dockable

WPF Dockable

Posted by Leo Yang on 2020-07-02

讓WPF有Dockable的功能

Dockable

使用

Nuget安裝Wpf Toolkit

nuget搜尋WPF Toolkit，有一個作者是Xceed的就是了
Nuget

xaml加入引用資源
1
xmlns:avalondock="http://schemas.xceed.com/wpf/xaml/avalondock"
實際使用

Result

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<Grid>      
  <avalondock:DockingManager x:Name="mtTab" Grid.Row="0" Visibility="{Binding Render}">
    <!-- 設定Dockable元件樣式 -->
    <avalondock:DockingManager.Theme>
    <avalondock:VS2010Theme/>
    </avalondock:DockingManager.Theme>

    <!-- LayoutRoot : 在LayoutRoot中的所有元素可以互相停靠 -->
    <avalondock:LayoutRoot>
      <!-- Left side -->
      <avalondock:LayoutRoot.LeftSide>
        <avalondock:LayoutAnchorSide>
          <avalondock:LayoutAnchorGroup>
            <avalondock:LayoutAnchorable Title="Left1">
              <TextBox Text="123"/>
            </avalondock:LayoutAnchorable>
            <avalondock:LayoutAnchorable Title="Left2">
              <TextBox Text="123"/>
            </avalondock:LayoutAnchorable>
            </avalondock:LayoutAnchorGroup>
        </avalondock:LayoutAnchorSide>
      </avalondock:LayoutRoot.LeftSide>

      <!-- Right Side -->
      <avalondock:LayoutRoot.RightSide>
        <avalondock:LayoutAnchorSide>
          <avalondock:LayoutAnchorGroup>
            <avalondock:LayoutAnchorable Title="Right1">
             <TextBox Text="123"/>
            </avalondock:LayoutAnchorable>
            <avalondock:LayoutAnchorable Title="Right2">
             <TextBox Text="123"/>
            </avalondock:LayoutAnchorable>
          </avalondock:LayoutAnchorGroup>
        </avalondock:LayoutAnchorSide>
      </avalondock:LayoutRoot.RightSide>

      <!-- Center -->
      <avalondock:LayoutPanel>
        <avalondock:LayoutDocumentPane>
          <avalondock:LayoutDocument Title="Main1" >
            <TextBox Text="123"/>
          </avalondock:LayoutDocument>
          <avalondock:LayoutDocument Title="Main2" >
            <TextBox Text="123"/>
          </avalondock:LayoutDocument>
        </avalondock:LayoutDocumentPane>
      </avalondock:LayoutPanel>
    </avalondock:LayoutRoot>
  </avalondock:DockingManager>
</Grid>

tips

avalondock外層的結構基本上都是

1
2
3
4
DockingManager
  LayoutRoot
    LayoutPanel
    LayoutRoot.XXXXSide

在LayoutRoot裡面的LayoutAnchorable、LayoutDocument可以停靠在LayoutRoot中的其他容器裡面

在LayoutRoot裡面可以配置上、下、左、右、中間的布局
基本的就是這幾種

1
2
3
4
5
6
7
8
9
10
<!-- 不是主要Panel類型 -->
LayoutRoot.TopSide(LayoutRoot.LeftSide、LayoutRoot.RightSide、LayoutRoot.BottomSide)
  LayoutAnchorSide
    LayoutAnchorGroup
      LayoutAnchorable Title="Type1"
        Grid
<!-- 主要Panel類型 -->
LayoutPanel
  LayoutDocumentPane
    LayoutDocument Title="Type2"

改變DockingManager裡面Tabitem的顏色

1
2
3
4
5
6
7
8
9
<avalondock:DockingManager.Resources>
  <Style TargetType="{x:Type avalondock:LayoutDocumentTabItem}">
    <Setter Property="Background" Value="#2D2D2F"/>
    <Setter Property="Foreground" Value="White"/>
  </Style>
  <Style TargetType="{x:Type avalondock:DockingManager}">
    <Setter Property="Background" Value="#2D2D2F"/>
  </Style>
</avalondock:DockingManager.Resources>

LayoutAnchorable、LayoutDocument重要屬性

1
2
3
4
<!-- 可否按X關閉(隱藏) -->
CanHide="False"
<!-- 點選TabItem打開時的預設高度 -->
AutoHideHeight="300"
FEATURED TAGS
C# WPF Dockable
FRIENDS