Tabbed document interface - RobinPerris/DarkUI GitHub Wiki

Wiki ▸ Tabbed document interface

DarkDockPanel is the control you use to create a tabbed document interface. The dock panel itself contains 4 DarkDockRegion controls - Left, Right, Bottom, and Document. Each of these regions can be assigned DarkDockContent which will then be further divided in to a DarkDockGroup control which allows for tabbing between visible content.

Ultimately the majority of this functionality occurs under the hood. All you really need to care about is creating the DarkDockPanel on the form you want to have your tabbed interface, and then creating the various documents and tool windows which it will contain.

Creating a DarkDockPanel

The DarkDockPanel control is easy enough to add. It'll appear in the toolbox with all the other DarkUI components and can be simply dragged on to a form.

It won't look like much, but set the Dock property to Fill and we'll go over how to create content for it.

Initialising message filters

One of the core concepts for the dock panel control is having single-pixel borders between components whilst allowing users to easily re-size content without struggling to grasp the splitters.

To achieve this the docking library uses an interface called IMessageFilter to pre-filter all incoming windows events and checks for splitter interaction before letting the events bubble down.

Enabling this functionality is fairly simple. The DarkDockPanel exposes two message filters: DockContentDragFilter and DockResizeFilter. The former deals with drag & drop functionality for tool windows whilst the latter deals with the resize splitters for regions.

Adding these to your application is done like this.

Application.AddMessageFilter(DockPanel.DockContentDragFilter);
Application.AddMessageFilter(DockPanel.DockResizeFilter);

With the DockContentDragFilter in place you'll be able to click & drag the tool window headers within your dock panel and drag them around to other dock groups and regions.

With the DockResizeFilter in place your single-pixel borders will actually act like they're 5 pixels wide, making them much easier for users to interact with. Dragging these splitters will also give you a nice semi-transparent guideline.

Creating DarkDockContent

The super class for all dock content is DarkDockContent. This is built on top of the UserControl class and can be modified in much the same way. As such, you can fully design your tabbed content using the visual designer.

DarkUI also exposes two specialised types of dock content called DarkDocument and DarkToolWindow. Documents are limited to the Document region of the dock panel and tool windows are limited to the Left, Right, and Bottom regions. DarkToolWindow objects have the additional ability to be dragged between dock groups and regions.

To inherit from these classes simply create a blank UserControl and change the super class.

public partial class ToolWindow : DarkToolWindow
{
    public ToolWindow()
    {
        InitializeComponent();
    }
}

This will leave you with a blank tool window with the header visible in the designer.

You can change the header/tab text with the DockText property. You can define which dock region the content will be added to by modifying the DefaultDockArea property. You can also set an image in the header with the Icon property.

Adding a DarkTreeView and DarkToolStrip control allows us to create a simple project explorer window.

Placing this content within the dock panel is incredibly simple.

DockPanel.AddContent(new ToolWindow());

If we run the application we'll see a very sparse dock panel.

However, once we add more tool windows across multiple regions and load in some DockDocument controls, we have a pretty feature complete tabbed document interface.