wpf停靠

介绍 (Introduction)

Some years ago, I created a commercial application with a large number of documents windows and tool windows. I wanted the user to be able to arrange the windows in the most convenient manner for them as per Microsoft Visual Studio. I chose to build the application around the free version of AvalonDock. I chose AvalonDock because it was free and it had a good reputation. I learnt that it is indeed a very good control, with an extremely powerful and flexible UI. I also learnt that it can be very hard to customise as it is a complex piece of software. I had requests from users to add or change features, and quite often, I was unable to figure out a way to make these changes. The most common request was to improve the tab control when multiple tools were docked together in a group. We had so many tool panes that it could be very hard to figure out which tab was which. We also had requests to add a close button to each tabbed tool or document pane. I found some solutions online, but quite often I couldn't get them to work. It is possible that the solutions were for an earlier version of AvalonDock.

几年前，我创建了一个带有大量文档窗口和工具窗口的商业应用程序。 我希望用户能够按照Microsoft Visual Studio以最方便的方式为他们安排窗口。 我选择围绕免费版本的AvalonDock构建应用程序。 我选择AvalonDock是因为它是免费的，并且享有很高的声誉。 我了解到，它确实是一个非常好的控件，具有极其强大且灵活的UI。 我还了解到，由于它是一个复杂的软件，因此很难自定义。 我收到用户的添加或更改功能的请求，但很多时候，我无法找到进行这些更改的方法。 最常见的要求是在将多个工具组合在一起时改进标签的控制。 我们有太多的工具窗格，以至于很难确定哪个选项卡是哪个。 我们还要求向每个选项卡式工具或文档窗格添加一个关闭按钮。 我在网上找到了一些解决方案，但很多时候我无法使它们起作用。 解决方案可能是针对较早版本的AvalonDock的。

Recently, I have had some spare time available, and I decided to create my own docking window manager library with the following key design goals:

最近，我有一些空闲时间，我决定创建具有以下主要设计目标的自己的停靠窗口管理器库：

1. It should allow the creation of applications with the look and feel of class leading applications such as Microsoft Visual Studio.它应允许创建具有类领先应用程序(如Microsoft Visual Studio)外观的应用程序。
2. It should allow the developer to easily customise the appearance using themes.它应该允许开发人员使用主题轻松自定义外观。
3. The code should be reasonably simple so that a developer can modify it to suit their own needs if the built in behaviour is inadequate.该代码应该相当简单，以便在内置行为不足的情况下，开发人员可以对其进行修改以满足自己的需求。
4. It should be fully compliant with the MVVM pattern.它应该完全符合MVVM模式。
5. It should allow the layout to be serialised to and from a file.它应该允许布局在文件之间进行序列化。

Key features of the docking window control are as follows:

停靠窗口控件的主要功能如下：

1. Support for documents and tools.支持文档和工具。
2. Documents represent editable content such as a text document, or the output from a calculation such as a 3D surface plot.文档代表可编辑的内容(例如文本文档)，或来自计算的输出(例如3D表面图)。
3. Tools represent a collection of controls that in some way influence the content of documents, e.g., settings for a 3D surface plot.工具代表控件的集合，这些控件以某种方式影响文档的内容，例如3D表面图的设置。
4. Documents can be laid out in a tiled pattern. Two or more documents can be grouped together into a tabbed group. The documents occupy a rectangular region (the document area).可以以平铺模式布置文档。 可以将两个或更多文档分组为一个选项卡式组。 文件占据一个矩形区域(文件区域)。
5. Tools can be laid out in a tiled pattern. Two or more tools can be grouped together into a tabbed group. The tools occupy the regions on either side of the document area.可以以平铺模式布置工具。 可以将两个或更多工具组合到一个选项卡式组中。 这些工具占据了文档区域两侧的区域。
6. A tool can be unpinned, such that the pane is removed from the tiled area, and replaced with a title bar in the margin.可以取消固定工具，以便将窗格从平铺区域中删除，并在边距中替换为标题栏。
7. Clicking on the title bar of an unpinned tool shows the previously hidden content. Clicking outside of the content hides it again.单击未固定工具的标题栏将显示以前隐藏的内容。 在内容之外单击将其再次隐藏。
8. An unpinned tool can be re-pinned by clicking on the pin button in its header.可以通过单击标题中的固定按钮来重新固定未固定的工具。
9. Both documents and tools can be floated. They can be floated individually or as a tabbed group.文档和工具都可以浮动。 它们可以单独浮动或作为选项卡组浮动。
10. The tools or documents in a tabbed group can be reordered by dragging each tab header.可以通过拖动每个选项卡标题对选项卡式组中的工具或文档进行重新排序。
11. A tabbed group has a drop down menu item with a list of all documents/tools, allowing the user to quickly select the desired content.一个选项卡式的组具有一个下拉菜单项，其中包含所有文档/工具的列表，从而使用户可以快速选择所需的内容。
12. A tool and a document can be closed by clicking on a close button in the tab header. This will prompt the user to save unsaved data, discard unsaved data, or cancel the operation, assuming there is unsaved data.单击选项卡标题中的关闭按钮可以关闭工具和文档。 如果存在未保存的数据，这将提示用户保存未保存的数据，丢弃未保存的数据或取消操作。
13. The control maintains a documents view model list and a tools view model list.该控件维护一个文档视图模型列表和一个工具视图模型列表。
14. There is a one to one correspondance between views and view models. Thus removing a view model will automatically close the associated view. Conversely, adding a view model will automatically display the associated view.视图和视图模型之间存在一对一的对应关系。 因此，删除视图模型将自动关闭关联的视图。 相反，添加视图模型将自动显示关联的视图。

The following can be customized:

可以自定义以下内容：

1. The style for the side tool bars (which display the titles for unpinned tools)侧面工具栏的样式(显示未固定工具的标题)
2. The styles for the selected and unselected tab headers选定和未选定的选项卡标题的样式
3. The styles for all buttons所有按钮的样式
4. All fonts所有字体
5. The scroll arrows in tabbed groups选项卡组中的滚动箭头
6. The title bar in tool panes工具窗格中的标题栏
7. The border around each tool and each document每个工具和每个文档的边框

Note that the buttons in the example applications are defined using paths rather than bitmaps (or similar), which makes it trivial to change the colours and sizes to suit the theme.

请注意，示例应用程序中的按钮是使用路径而不是位图(或类似图形)定义的，这使得更改颜色和大小以适合主题很简单。

I have called the component the Open Controls Dock Manager, 'open' indicating that the control is free. This article has an accompanying zip file containing the source code and a couple of example applications demonstrating how to use the library and create themes.

我称该组件为Open Controls Dock Manager，“打开”表示该控件是免费的。 本文有一个随附的zip文件，其中包含源代码和几个示例应用程序，这些示例应用程序演示了如何使用该库和创建主题。

应用范例 (Example Applications)

The first example application uses a theme that emulates Visual Studio 2109 as follows:

第一个示例应用程序使用模拟Visual Studio 2109的主题，如下所示：

The main window view model has five documents and five tools. The five documents are grouped together in one pane. Of the five tools, two are unpinned on the right hand side of the UI, one is docked to the left of the documents, and two are docked as a group below the documents.

主窗口视图模型包含五个文档和五个工具。 这五个文档在一个窗格中分组在一起。 在这五个工具中，有两个未固定在UI的右侧，一个停靠在文档的左侧，两个停靠在文档的下方。

The second example application uses a different theme that I have called modern as follows:

第二个示例应用程序使用了一个不同的主题，我将其称为“现代”，如下所示：

A given document or view can be closed by clicking on the close button icon in the pane, or by means of the Documents and Tools application menus.

通过单击窗格中的关闭按钮图标，或通过“ 文档和工具”应用程序菜单，可以关闭给定的文档或视图。

An unpinned tool pane can be displayed by clicking on the item in the margin:

通过单击空白处的项目，可以显示未固定的工具窗格：

The unpinned tool pane (and other tool panes in the same group) can be added back into the dock pane layout by clicking on the pin icon in the header bar.

单击标题栏中的固定图标，可以将未固定的工具窗格(和同一组中的其他工具窗格)重新添加到停靠窗格布局中。

A group of tools can be floated by dragging the header bar:

可以通过拖动标题栏来浮动一组工具：

The small window icons at each side of the main window are location indicators. To insert the floating tool pane group back into the dock pane layout, drag the window until the cursor is over the appropriate location indicator. As the location indicators are defined in the theme, they are fully customisable.

主窗口两侧的小窗口图标是位置指示器。 要将浮动工具窗格组重新插入停靠窗格布局中，请拖动窗口，直到光标位于适当的位置指示器上方。 由于位置指示符是在主题中定义的，因此它们是完全可定制的。

Similarly, an individual tool (or document) pane can be floated by dragging its tab header.

同样，可以通过拖动其选项卡标题来浮动单个工具(或文档)窗格。

A tool, or document, can be separated from a floating pane containing multiple tools, or document, in the same manner so that it becomes a floating pane containing one view.

可以用相同的方式将工具或文档与包含多个工具或文档的浮动窗格分离，以使其成为包含一个视图的浮动窗格。

Each pane group has a file list button which displays a list of the tools/document in the group allowing the user to quickly select the desired item. This is particularly useful when the group contains a large number of tools/documents. For example:

每个窗格组都有一个文件列表按钮，该按钮显示该组中工具/文档的列表，允许用户快速选择所需的项目。 当该组包含大量工具/文档时，这特别有用。 例如：

The tab order can be changed by dragging an item into a new location:

可以通过将项目拖动到新位置来更改选项卡顺序：

运行演示应用程序 (Running the Demo Applications)

Start a demo application running. Click on the Window drop down menu (top right) and then click on the Load Layout menu item:

启动演示应用程序运行。 单击“窗口”下拉菜单(右上角)，然后单击“加载布局”菜单项：

Choose the desired layout file. There are five sample layouts in the top level source code folder:

选择所需的布局文件。 顶级源代码文件夹中有五个示例布局：

背景 (Background)

In order to use the library, you will need to understand how to create WPF applications using the MVVM pattern and have a good understanding of C#. You will not need an in depth understanding of WPF although that will do no harm.

为了使用该库，您将需要了解如何使用MVVM模式创建WPF应用程序，并且对C＃有很好的理解。 您将不需要深入了解WPF，尽管这不会造成任何危害。

使用代码 (Using the Code)

The main window XAML for each example application contains an instance of the LayoutManager class as follows:

每个示例应用程序的主窗口XAML包含LayoutManager类的实例，如下所示：

<dockManager:LayoutManager x:Name="_layoutManager" Grid.Row="1" Grid.Column="0" DocumentsSource="{Binding Documents}" ToolsSource="{Binding Tools}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Gray" ><dockManager:LayoutManager.Theme><themes:ModernTheme/></dockManager:LayoutManager.Theme><dockManager:LayoutManager.DocumentTemplates><DataTemplate DataType="{x:Type viewModel:DocumentOneViewModel}"><view:DocumentOneView x:Name="_documentOneView"/></DataTemplate><DataTemplate DataType="{x:Type viewModel:DocumentTwoViewModel}"><view:DocumentTwoView x:Name="_documentTwoView"/></DataTemplate><DataTemplate DataType="{x:Type viewModel:DocumentThreeViewModel}"><view:DocumentThreeView x:Name="_documentThreeView"/></DataTemplate></dockManager:LayoutManager.DocumentTemplates><dockManager:LayoutManager.ToolTemplates><DataTemplate DataType="{x:Type viewModel:ToolOneViewModel}"><view:ToolOneView x:Name="_toolOneView"/></DataTemplate><DataTemplate DataType="{x:Type viewModel:ToolTwoViewModel}"><view:ToolTwoView x:Name="_toolTwoView"/></DataTemplate><DataTemplate DataType="{x:Type viewModel:ToolThreeViewModel}"><view:ToolThreeView x:Name="_toolThreeView"/></DataTemplate><DataTemplate DataType="{x:Type viewModel:ToolFourViewModel}"><view:ToolFourView x:Name="_toolFourView"/></DataTemplate><DataTemplate DataType="{x:Type viewModel:ToolFiveViewModel}"><view:ToolFiveView x:Name="_toolFiveView"/></DataTemplate></dockManager:LayoutManager.ToolTemplates>
</dockManager:LayoutManager>

The DocumentsSource property is bound to the Documents property on the view model. This is an observable collection of view models, each derived from the IViewModel class.

DocumentsSource属性绑定到视图模型上的Documents属性。 这是视图模型的可观察集合，每个视图模型都从IViewModel类派生。

The ToolsSource property is bound to the Tools property on the view model. This is an observable collection of view models, each derived from the IViewModel class.

ToolsSource属性绑定到视图模型上的Tools属性。 这是视图模型的可观察集合，每个视图模型都从IViewModel类派生。

The LayoutManager.DocumentTemplates property contains a list of data templates for documents, each defining the mapping between a view model and the corresponding view. Thus the DocumentOneViewModel view model class provides the data displayed by the DocumentOneView view class.

LayoutManager.DocumentTemplates属性包含用于文档的数据模板的列表，每个模板都定义视图模型和相应视图之间的映射。 因此， DocumentOneViewModel视图模型类提供了DocumentOneView视图类显示的数据。

The LayoutManager.ToolTemplates property contains a list of data templates for tools, each defining the mapping between a view model and the corresponding view. Thus the ToolOneViewModel view model class provides the data displayed by the ToolOneView view class.

LayoutManager.ToolTemplates属性包含用于工具的数据模板的列表，每个模板都定义视图模型和相应视图之间的映射。 因此， ToolOneViewModel视图模型类提供了ToolOneView视图类显示的数据。

There is a direct one to one correspondance between a tool view and a tool view model, and there can only be one instance of a given tool view. The Name property is essential as it identifies the view model when serialising the view to and from file. The value of the Name property must be unique.

工具视图和工具视图模型之间存在直接的一对一对应关系，并且给定工具视图只能有一个实例。 Name属性是必不可少的，因为它在将视图与文件进行序列化时标识视图模型。 Name属性的值必须唯一。

In contrast, there may be multiple instances of a document view model, and hence multiple instances of the view. Each instance is distinguished by a unique URI, which could, for example, be the file path for the data, e.g., C:\Data\Document1.txt.

相反，可能有文档视图模型的多个实例，因此有视图的多个实例。 每个实例都由唯一的URI区分，它可以是例如数据的文件路径，例如C：\ Data \ Document1.txt 。

The appearance of the UI is set using a theme which consists of a dictionary defining styles, and a class derived from the Theme class which provides the URI for the dictionary. For example:

UI的外观是使用一个主题来设置的，该主题包括一个定义样式的字典以及一个从Theme类派生的类，该类为字典提供URI。 例如：

public class ModernTheme : Theme
{public override Uri Uri{get{return new Uri("/OpenControls.Wpf.DockManager.Themes.Modern;component/Dictionary.xaml",UriKind.Relative);}}
}

The theme class implements one method called Uri which returns the Uri for the Theme dictionary.

主题类实现了一种称为Uri方法，该方法返回Theme字典的Uri。

The Theme is set in the LayoutManager.Theme property as per the following example:

根据以下示例，在LayoutManager.Theme属性中设置Theme ：

<dockManager:LayoutManager.Theme> <themes:ModernTheme/>
</dockManager:LayoutManager.Theme>

The Theme cannot be changed while the application is running.

在应用程序运行时无法更改Theme 。

Dictionary styles are for the most part not optional and a failure to include a required style will cause the application to crash.

字典样式在大多数情况下不是可选的，并且如果未能包含必需的样式，则会导致应用程序崩溃。

The application needs to add a reference to the theme assembly, assuming it is external. The theme can, of course, be implemented in the application assembly. The main application window must reference the namespaces for the docking manager and the theme. For example:

假设应用程序是外部的，则应用程序需要添加对主题程序集的引用。 当然，主题可以在应用程序组装中实现。 主应用程序窗口必须引用对接管理器和主题的名称空间。 例如：

xmlns:dockManager="clr-namespace:OpenControls.Wpf.DockManager;
assembly=OpenControls.Wpf.DockManager"
xmlns:themes="clr-namespace:OpenControls.Wpf.DockManager.Themes;
assembly=OpenControls.Wpf.DockManager.Themes.Modern"

Anyone familiar with AvalonDock will realise that I have used the same Theme mechanism.

任何熟悉AvalonDock的人都会意识到，我使用了相同的Theme机制。

As explained above, the application provides a list of view model instances for the documents and the tools. Each view model class must implement the IViewModel interface which is defined as follows:

如上所述，该应用程序提供了文档和工具的视图模型实例的列表。 每个视图模型类都必须实现IViewModel接口，该接口定义如下：

public interface IViewModel
{// A user friendly titlestring Title { get; }string Tooltip { get; }/** Not used by tools.* Uniquely identifies a document instance.* For example a file path for a text document.*/string URL { get; }bool CanClose { get; }/** Return true if there are edits that need to be saved* Not used by Tool view model*/bool HasChanged { get; }void Save();
}

The Title property returns a string that is displayed in the tab header.

Title属性返回一个显示在选项卡标题中的string 。

The Tooltip property returns a string that is displayed as a tooltip for the tab header.

Tooltip属性返回一个string ，该string显示为选项卡标题的工具提示。

The URL property is only used by document view models, not by tools. It returns the URL for the document, which will be the file path in most cases.

URL属性仅由文档视图模型使用，而不由工具使用。 它返回文档的URL，在大多数情况下，它将作为文件路径。

The CanClose property returns true if the document/tool can be closed and false otherwise.

如果可以关闭文档/工具，则CanClose属性返回true否则返回false 。

The HasChanged property returns true if the document has unsaved changes and false otherwise. This property is only valid for documents.

如果文档有未保存的更改，则HasChanged属性返回true否则返回false 。 此属性仅对文档有效。

The Save method is invoked by the system to save the data associated with the document.

系统调用Save方法来保存与文档关联的数据。

建筑 (Architecture)

The key classes and their relationships are illustrated by the following UML diagram:

下面的UML图说明了键类及其关系：

The layout management logic is divided over a small number of key components, each with its own responsibilities, each interacting with others via well defined interfaces using dependency injection. This reduces coupling and dependencies, making it easier to maintain and extend the code.

布局管理逻辑被划分为少量关键组件，每个关键组件都有自己的职责，每个关键组件都使用依赖注入通过定义明确的接口与其他组件交互。 这样可以减少耦合和依赖性，从而更易于维护和扩展代码。

The LayoutManager class is derived from the Grid control class, and it is the top level of a binary tree of documents and tools. Each node in the tree may be a splitter pane, or a document pane group or a tool pane group. A splitter pane is implemented by the SplitterPane class, and it represents two nodes (which may be tool pane groups for example) separated by a GridSplitter. Thus it represent a leaf in a binary tree. The grid splitter may be horizontal or vertical.

LayoutManager类是从Grid控件类派生的，它是文档和工具的二进制树的顶层。 树中的每个节点都可以是拆分器窗格，文档窗格组或工具窗格组。 拆分器窗格由SplitterPane类实现，它表示由GridSplitter分隔的两个节点(例如，可能是工具窗格组)。 因此，它代表二叉树中的叶子。 栅格分离器可以是水平或垂直的。

The DockPaneManager class manages the layout of docked panes. It interacts with the LayoutManager instance by means of the IDockPaneHost and ILayoutFactory interfaces. The latter interface provides services to instantiate nodes in the document/tool tree including document pane groups, and tool pane groups.

DockPaneManager类管理停靠窗格的布局。 它通过IDockPaneHost和ILayoutFactory接口与LayoutManager实例进行交互。 后一个接口提供了用于实例化文档/工具树中的节点的服务，包括文档窗格组和工具窗格组。

The DocumentPaneGroup and ToolPaneGroup classes represent the document and tool pane groups respectively. Each contains an instance of a class derived from the IViewContainer interface which is responsible for the view content. Thus the ToolContainer class displays one or more tool views and the DocumentContainer class displays one or more document views.

DocumentPaneGroup和ToolPaneGroup类分别表示文档和工具窗格组。 每个类都包含一个从IViewContainer接口派生的类的实例，该类负责视图内容。 因此， ToolContainer类显示一个或多个工具视图，而DocumentContainer类显示一个或多个文档视图。

The FloatingPaneManager class manages the floating panes. It interacts with the LayoutManager instance by means of the IFloatingPaneHost and ILayoutFactory interfaces.

FloatingPaneManager类管理浮动窗格。 它通过IFloatingPaneHost和ILayoutFactory接口与LayoutManager实例进行交互。

The FloatingDocumentPaneGroup and FloatingToolPaneGroup classes represent the floating document and tool pane groups respectively. Each contains an instance of a class derived from the IViewContainer interface.

FloatingDocumentPaneGroup和FloatingToolPaneGroup类分别表示浮动文档和工具窗格组。 每个实例都包含一个从IViewContainer接口派生的类的实例。

The UnpinnedToolManager class manages unpinned tools, i.e., tools that are shown as a title bar along one side of the docking area.

UnpinnedToolManager类管理未固定的工具，即，沿停放区域的一侧显示为标题栏的工具。

示例布局 (Example Layouts)

The sample code includes five example layouts in the top level folder.

该示例代码在顶层文件夹中包含五个示例布局。

翻译自: https://www.codeproject.com/Articles/5270871/A-WPF-Docking-Windows-Management-Library

wpf停靠