Skip to content

Commit 364ecc8

Browse files
qian-oqian-o
committed
更新 README.md 文件，添加 WinUI.Dock 介绍
新增 DockManager、Document、DocumentGroup 和 LayoutPanel 的详细说明。提供在 MainWindow.xaml 和 MainWindow.xaml.cs 中使用控件的步骤，以及安装 NuGet 包的指令和代码示例，帮助用户快速上手。
1 parent 861a6a7 commit 364ecc8

File tree

1 file changed

+109
-2
lines changed

1 file changed

+109
-2
lines changed

‎README.md

Lines changed: 109 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,115 @@ WinUI.Dock is a docking control similar to Visual Studio, based on WinUI 3. Its
88
- [x] WinUI 3.0
99
- [x] Uno Platform (partially available)
1010

11-
## Usage
12-
- See the example projects under the Examples directory.
11+
## Control Introduction
12+
- **DockManager**: DockManager is the manager of the entire layout, responsible for managing all intermediate layouts, windows, and sidebars.
13+
- **Panel**: Intermediate layout, its type is LayoutPanel.
14+
- **ActiveDocument**: The currently active Document.
15+
- **ParentWindow**: Parent window, used to activate when dragging a Document to the current window.
16+
- **LeftSide, TopSide, RightSide, BottomSide**: Sidebars, their child items are of type Document.
17+
- **CreateNewDocument**: Event triggered when restoring the layout.
18+
- **CreateNewGroup**: Event triggered when dragging a Document to a specified target.
19+
- **CreateNewWindow**: Event triggered when dragging a Document outside the window.
20+
- **ClearLayout, SaveLayout, LoadLayout**: Clear layout, save layout, load layout.
21+
22+
- **Document**: Document.
23+
- **Title**: Document title.
24+
- **Content**: Document content.
25+
- **CanPin**: Whether it can be pinned.
26+
- **CanClose**: Whether it can be closed.
27+
28+
- **DocumentGroup**: Document group.
29+
- **Children**: Document group child items, their type is Document.
30+
- **TabPosition**: Tab position.
31+
- **IsTabWidthBasedOnContent**: Whether the tab width is based on content.
32+
- **SelectedIndex**: Selected index.
33+
34+
- **LayoutPanel**: Layout panel.
35+
- **Children**: Layout panel child items, their type is LayoutPanel or DocumentGroup.
36+
- **Orientation**: Layout orientation.
37+
38+
- **Document, DocumentGroup, LayoutPanel**: Common properties.
39+
- **Owner**: Owner, representing the parent.
40+
- **Root**: Root node, representing the top-level DockManager.
41+
- **DockMinWidth, DockMinHeight**: Minimum width, minimum height.
42+
- **DockMaxWidth, DockMaxHeight**: Maximum width, maximum height.
43+
- **DockWidth, DockHeight**: Width, height. (When in the intermediate layout, it will be allocated as a proportion, similar to Grid's RowDefinition and ColumnDefinition)
44+
45+
## Quick Start
46+
1. Install the NuGet package
47+
```nuget
48+
Install-Package WinUI.Dock
49+
```
50+
51+
2. Add the DockManager control in MainWindow.xaml
52+
```xaml
53+
<Window xmlns:dock="using:WinUI.Dock"
54+
x:Name="Main">
55+
<dock:DockManager CreateNewDocument="OnCreateNewDocument"
56+
CreateNewGroup="OnCreateNewGroup"
57+
CreateNewWindow="OnCreateNewWindow"
58+
ParentWindow="{Binding ElementName=Main}">
59+
<dock:LayoutPanel Orientation="Vertical">
60+
<dock:LayoutPanel DockHeight="2" Orientation="Horizontal">
61+
<dock:DocumentGroup DockWidth="2">
62+
<dock:Document Title="Document" CanClose="False" CanPin="False" />
63+
</dock:DocumentGroup>
64+
65+
<dock:DocumentGroup DockWidth="1">
66+
<dock:Document Title="Solution Explorer" />
67+
</dock:DocumentGroup>
68+
</dock:LayoutPanel>
69+
70+
<dock:LayoutPanel DockHeight="1" Orientation="Horizontal">
71+
<dock:DocumentGroup IsTabWidthBasedOnContent="True" TabPosition="Bottom">
72+
<dock:Document Title="Side##Error List" />
73+
</dock:DocumentGroup>
74+
<dock:DocumentGroup IsTabWidthBasedOnContent="True" TabPosition="Bottom">
75+
<dock:Document Title="Side##Output" />
76+
</dock:DocumentGroup>
77+
</dock:LayoutPanel>
78+
</dock:LayoutPanel>
79+
</dock:DockManager>
80+
</Window>
81+
```
82+
83+
3. Add the following code in MainWindow.xaml.cs
84+
```csharp
85+
// This event is triggered when restoring the layout, you can add content to the Document in this event.
86+
private void OnCreateNewDocument(object _, CreateNewDocumentEventArgs e)
87+
{
88+
e.Document.Content = new TextBlock()
89+
{
90+
HorizontalAlignment = HorizontalAlignment.Center,
91+
VerticalAlignment = VerticalAlignment.Center,
92+
Text = $"New Document {e.Title}"
93+
};
94+
}
95+
96+
// A special character "##" is added in the Title, and only the content after "##" will be displayed in the final interface.
97+
// When dragging a Document to a specified target, a new DocumentGroup will be created, and this event will be triggered, allowing you to customize the properties of the DocumentGroup.
98+
private void OnCreateNewGroup(object _, CreateNewGroupEventArgs e)
99+
{
100+
if (e.Title.Contains("Side"))
101+
{
102+
e.Group.TabPosition = TabPosition.Bottom;
103+
e.Group.IsTabWidthBasedOnContent = true;
104+
}
105+
}
106+
107+
// When dragging a Document out, a new window will be created, and this event will be triggered, allowing you to customize the title bar of the window.
108+
private void OnCreateNewWindow(object _, CreateNewWindowEventArgs e)
109+
{
110+
e.TitleBar.Child = new TextBlock()
111+
{
112+
HorizontalAlignment = HorizontalAlignment.Center,
113+
VerticalAlignment = VerticalAlignment.Center,
114+
Text = "Custom Title"
115+
};
116+
}
117+
```
118+
119+
4. Run the program to see the effect.
13120

14121
## Notes
15122
- The project is currently in an early stage and may have many issues. Please do not use it in production environments.

0 commit comments

Comments
 (0)