DotNet开发者的终极布局神器：DockPanel Suite 在 .NET 8.0 中的实践开发

1. 前言

如果需要灵活、可定制的窗口布局和管理功能的应用程序，你最先想到使用什么方案？思考三秒中？叮，三秒过去了，你是不是和我一样想到了使用DockPanelSuite。如果你曾经使用过DockPanelSuite库或者非常熟悉DockPanelSuite库，那么可以跳过本文内容。如果你想深入了解DockPanelSuite，那么，我们可以一起讨论它的用法。下面我们一起开始吧！

2.什么是DockPanelSuite？

DockPanelSuite 是一个用于 Windows 窗体应用程序的开源库，它提供了一个灵活的、可定制的窗口布局管理器，允许用户像 Visual Studio 那样将窗口停靠在主窗口的不同位置，也可以自由地浮动和停靠窗口。

官网地址：
http://dockpanelsuite.com/

github地址：
https://github.com/dockpanelsuite/dockpanelsuite

nuget地址：
https://www.nuget.org/packages/DockPanelSuite#supportedframeworks-body-tab

3.实践开发

3.1 新建项目DockPanelSuiteApp

1、基于Net8.0环境，新建项目DockPanelSuiteApp命名的winform项目。

2、Nuget集成DockPanelSuite库的开发环境。
在Nuget中输入DockPanelSuite。获取依赖库，当前最新版本是3.1.0版本。虽然这个版本最新的发布日期是2021年8月28日。但是这个项目仍然兼容Net8.0的开发环境。我们需要安装DockPanelSuite配套的主题库。根据需要，我们选择了
DockPanelSuite.ThemeVS2015。当然如果你需要其他的主题，也可以添加。

3、查看工具箱
安装完DockPanelSuite。部分机器可能需要重启。之后，在工具箱中，加载用户控件。即可看到DockPanel控件和主题控件。

4、配置控件
我们从工具箱中，将DockPanel控件拖入Form1窗体，并且设置
dockPanel1.Dock = DockStyle.Fill;
dockPanel1.Theme = vS2015DarkTheme1;
其他属性默认

3.2 熟悉语法规则

1. 了解DockState的状态

这个枚举类型定义了 DockContent 窗体可能的状态，在 DockPanel 中的不同布局和显示方式：

• Unknown：未知状态，表示窗体的状态未知或未定义。
• Float：浮动状态，窗体作为独立的浮动窗口显示，可以在主窗口之外自由移动和调整大小。
• DockTopAutoHide：顶部自动隐藏状态，窗体停靠在 DockPanel 控件的顶部边缘，并且可以自动隐藏。
• DockLeftAutoHide：左侧自动隐藏状态，窗体停靠在 DockPanel 控件的左侧边缘，并且可以自动隐藏。
• DockBottomAutoHide：底部自动隐藏状态，窗体停靠在 DockPanel 控件的底部边缘，并且可以自动隐藏。
• DockRightAutoHide：右侧自动隐藏状态，窗体停靠在 DockPanel 控件的右侧边缘，并且可以自动隐藏。
• Document：文档状态，窗体作为文档显示在 DockPanel 控件中，通常用于显示文档类型的内容，如文本编辑器中的文档。
• DockTop：顶部停靠状态，窗体停靠在 DockPanel 控件的顶部边缘。 DockLeft：左侧停靠状态，窗体停靠在
• DockPanel 控件的左侧边缘。 DockBottom：底部停靠状态，窗体停靠在 DockPanel 控件的底部边缘。
• DockRight：右侧停靠状态，窗体停靠在 DockPanel 控件的右侧边缘。
• Hidden：隐藏状态，窗体处于隐藏状态，不可见，并且不占用任何空间。

2. 了解 DockAlignment布局

DockAlignment（停靠对齐）是指在使用 DockPanel 控件进行停靠布局时，控件相对于父容器的停靠位置。在 DockPanelSuite 中，DockAlignment 是一个枚举类型，定义了窗体或控件可以停靠的几个方向，包括：

• Top（顶部）：控件停靠在父容器的顶部边缘。
• Left（左侧）：控件停靠在父容器的左侧边缘。
• Bottom（底部）：控件停靠在父容器的底部边缘。
• Right（右侧）：控件停靠在父容器的右侧边缘。

3. 了解DockContent窗体

DockContent 是 DockPanelSuite 中的一个重要类，它是可停靠窗口的基类，用于创建和管理可在 DockPanel 中停靠的窗体。

• 继承关系：DockContent 类位于 WeifenLuo.WinFormsUI.Docking 命名空间中，并继承自 Form 类。因此，可以像使用普通的窗体一样使用 DockContent 窗体，并且可以将其添加到 DockPanel 控件中进行停靠管理。
• 停靠功能：DockContent 窗体具有与 DockPanelSuite 集成的停靠功能，允许用户将窗体停靠在主窗口的不同位置，例如顶部、底部、左侧、右侧或浮动在主窗口之上。可以通过调用 Show 方法将 DockContent 窗体显示在 DockPanel 中，并指定停靠位置。
• 自定义行为：可以根据需要自定义 DockContent 窗体的行为和外观，例如设置窗体的标题、图标、大小、停靠状态等。此外，还可以在窗体中添加控件和事件处理程序，实现各种功能和交互。
• 与其他控件的集成：DockContent 窗体可以与其他 Windows 窗体控件一起使用，例如按钮、文本框、列表框等，以构建丰富的用户界面。可以通过将这些控件添加到 DockContent 窗体中，实现各种功能和交互。
• 事件处理：DockContent 窗体提供了许多事件供你处理，例如窗体加载、关闭、大小变化等事件，可以根据需要添加事件处理程序来实现自定义逻辑。

4. 了解DockPanel控件

DockPanel 控件是 DockPanelSuite 中的核心控件之一，它是一个强大的、灵活的窗口布局管理器，用于管理和组织可停靠的窗体（DockContent）以及其他控件。

• 窗口布局：DockPanel 控件可以帮助你创建复杂的窗口布局，允许用户将多个窗体停靠在主窗口的不同位置，例如顶部、底部、左侧、右侧或浮动在主窗口之上。这使得用户可以自由地调整和重新排列窗口，以适应不同的工作需求。
• 停靠功能：DockPanel 控件集成了强大的停靠功能，允许将窗体停靠在主窗口的边缘或中心位置，并支持自动隐藏、分组、标签页等功能。用户可以通过拖放窗口的标题栏或边框来实现停靠操作，从而实现灵活的窗口管理。
• 自动隐藏：DockPanel 控件支持自动隐藏功能，允许将窗体停靠在主窗口的边缘，并在需要时自动展开或隐藏。这种功能特别适用于工具窗口或工具栏，可以最大化工作区域的可用空间，并提高用户体验。
• 自定义外观：可以根据需要自定义 DockPanel 控件的外观和行为，例如设置背景颜色、边框样式、分隔条样式等。此外，你还可以通过自定义渲染器来实现更高级的外观定制，以满足特定的设计需求。
• 与其他控件的集成：DockPanel 控件可以与其他 Windows 窗体控件一起使用，例如按钮、文本框、列表框等，以构建丰富的用户界面。可以将这些控件添加到 DockPanel 控件的各个停靠区域中，并根据需要进行布局和排列。
• 事件处理：DockPanel 控件提供了许多事件供处理，例如窗口停靠、浮动、关闭等事件，可以根据需要添加事件处理程序来实现自定义逻辑。

3.3 编码实践

为了便于区分每个区域，定义Document类继承DockContent类

public partial class Document : DockContent
{
    public Document()
    {
        InitializeComponent();
    }
    private void Document_Load(object sender, EventArgs e)
    {
        label1.Text = TabText;
    }
}

在Form1窗体中写入如下代码：

using WeifenLuo.WinFormsUI.Docking;

namespace DockPanelSuiteApp
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private void Form1_Load(object sender, EventArgs e)
        {
            LoadDockContent();
        }
        private void LoadDockContent()
        {
            #region 中间
            Document Document0 = new Document() { TabText = @"Document0" };
            Document0.Show(dockPanel1, DockState.Document);
            Document Document1 = new Document() { TabText = @"Document1" };
            Document1.Show(dockPanel1, DockState.Document);
            Document Document2 = new Document() { TabText = @"Document2" };
            Document2.Show(dockPanel1, DockState.Document);
            #endregion
            #region 左边
            Document dockContent2 = new Document() { TabText = @"Left Pane2" };
            dockContent2.Show(dockPanel1, DockState.DockLeft);
            Document dockContent23 = new Document() { TabText = @"Left Pane3" };
            dockContent23.Show(dockPanel1, DockState.DockLeft);
            #endregion
            #region 右上
            Document dockContent3 = new Document() { TabText = @"Right Top Pane" };
            dockContent3.Show(dockPanel1, DockState.DockRight);
            #endregion
            #region 右下
            Document dockContent4 = new Document() { TabText = @"Right Bottom Pane" };
            // 把窗体添加到dockContent3的下方
            dockContent4.Show(dockContent3.Pane, DockAlignment.Bottom, 0.5);
            #endregion
        }

        private void Form1_FormClosing(object sender, FormClosingEventArgs e)
        {
            dockPanel1.SaveAsXml(@".\Config.xml");
        }
    }
}

运行起来后：

拖动布局：

随意改变布局：

4.总结

DockPanelSuite 在以下几种场景下特别有用：

• 复杂的用户界面：当应用程序需要复杂的用户界面布局时，例如同时显示多个工具窗口、属性窗口、输出窗口等，DockPanelSuite 可以帮助轻松地管理和布局这些窗口，提高用户体验和工作效率。
• IDE 和开发工具：DockPanelSuite 最初就是为 Visual Studio 风格的开发环境而设计的，因此在构建 IDE 和其他开发工具时特别有用。它允许用户自由地将代码编辑器、解决方案资源管理器、属性窗口等停靠在主窗口的不同位置，并支持浮动和自动隐藏等功能。
• 数据管理和监控系统：对于需要同时显示多个数据视图、监控图表或日志窗口的应用程序，DockPanelSuite 可以提供一个灵活的布局管理器，帮助用户轻松地自定义布局和调整窗口大小，以适应不同的工作需求。
• CAD/CAM 软件：在 CAD/CAM 软件中，用户通常需要同时查看和编辑多个图形对象或工具面板。DockPanelSuite 可以帮助实现类似 AutoCAD 或 SolidWorks 那样的窗口布局，提供更灵活、更高效的工作环境。
• 多文档编辑器：对于需要同时编辑多个文档或文件的应用程序，例如文本编辑器、图像编辑器或电子表格软件，DockPanelSuite 可以提供一个方便的方式来管理和切换多个文档窗口，并支持标签页、分组和自定义布局等功能。