Skip to content

Migrate from WinForms and WPF Docking to Avalonia Docking UI

If you have built IDE-style interfaces with a docking manager in Windows Forms or WPF and are moving to Avalonia UI, the Docking UI of the Eremex Avalonia UI Controls library will look familiar. The library is built for Avalonia UI only: it does not include controls for Windows Forms or WPF. The Dock Manager component creates tool panels that can be docked, auto-hidden and floated, plus tabbed document areas, all in a cross-platform Avalonia UI application (Windows, Linux, macOS).

This topic maps the concepts you already know to the building blocks of the library, and shows where to find the details.

Concept Map

What you want Building block in the Eremex library
The component that manages the whole docking layout DockManager - see Dock Manager and Dock Items
A tool window (Solution Explorer, Properties, Output, and so on) DockPane - see Dock Panes and Containers
A document tab in the main area (tabbed MDI) DocumentPane - see Document Panes
A group of tabs TabbedGroup (tab container for Dock Panes) and DocumentGroup (tab container for Document Panes)
Panels side by side or stacked, separated by splitters DockGroup (split container) - see Split Panels
A panel that slides out from the window edge Auto-hide - see Auto-Hide Panels
A panel in its own window FloatGroup - see Floating Panels
Drag-and-drop guides that show where a panel will dock Dock hints - see Dock Manager and Dock Items, and the DockManager.CustomizeDockGuide event (version 1.5) to hide specific guides
Ctrl+Tab window switching Document Switcher
Saving and restoring the layout between sessions Save and Restore the Layout of Panels
Building the layout from code (arrange, split, float, activate, close) Perform Dock Operations in Code
A view-model-driven layout Use MVVM Pattern to Populate Dock Items

Differences Worth Knowing

  • XAML first. A layout is declared in XAML (the Dock Manager contains Dock Panes, Document Panes and groups) and docking operations can also be performed in code.
  • MVVM support. Panels can be created from a collection of view models, so a docking layout fits an MVVM application without code-behind.
  • Layout serialization. The layout of dock panels and documents can be saved and restored with the DockManager.SaveLayout and DockManager.RestoreLayout methods.
  • Cross-platform. The same Docking UI works on every platform supported by Avalonia UI.

A Minimal Layout

The following example shows the shape of a typical layout: a document area with an Error List panel below it, and a tab container with two tool panels beside them. See Get Started with Docking for a step-by-step walk-through.

xmlns:mxd="https://schemas.eremexcontrols.net/avalonia/docking"

<mxd:DockManager>
    <mxd:DockGroup>
        <mxd:DockGroup Orientation="Vertical">
            <mxd:DocumentGroup></mxd:DocumentGroup>
            <mxd:DockPane Header="Error List"/>
        </mxd:DockGroup>
        <mxd:TabbedGroup>
            <mxd:DockPane Header="Properties"/>
            <mxd:DockPane Header="Debug"/>
        </mxd:TabbedGroup>
    </mxd:DockGroup>
</mxd:DockManager>

Where to Go Next