Avalonia Docking with a Native Dock Manager

TsgcAvaloniaDockManager turns an Avalonia 12 window into an IDE style workspace. Tool panels dock on the four sides, the centre is a tabbed document area, and the user drags captions and tabs to drop guides, auto hides panels to the edges or floats them in their own windows. Every panel hosts one of your own Avalonia controls, and the whole arrangement is saved as JSON. The dock manager is part of sgcNavigation, new in sgcUI 2026.11.

A Docking Workspace Inside Your Avalonia App

One control placed in a window. You add panels in code, give each one your own control, and the user arranges them.

Dock site with Explorer and Search tabbed on the left, an auto hidden Toolbox strip, four document tabs, Properties on the right and Output at the bottom, with the drop guides and the preview rectangle on the right half of the documents while Output is dragged
The sgcNavigation docking manager while the Output panel is dragged: the compass, the edge guides and the preview rectangle.

Tool panels and documents

Each TsgcDockPanel has a Name, a Caption, an icon, a Kind (dpkTool or dpkDocument) and the Control it shows. Tool panels start on the side of their Placement, DockSize wide, and panels with the same GroupName tab together.

Your own controls

The content of a panel is an ordinary Avalonia Control. It becomes a logical and visual child of the dock site, so the DataContext flows from your window, and it is arranged and shown while its panel is the active one. A hidden panel keeps its control as a hidden child.

Drop guides with preview

While a caption or a tab is dragged, a compass on the group under the pointer splits that group on a side or tabs the panel into it, the edge guides dock it on an edge of the whole site, and a preview rectangle in the accent colour shows the room it will take. Esc cancels the drag.

Splitters

Groups sit in nested splits, side by side or stacked, with splitters between them. A drag resizes the neighbours live, and every group keeps MinPanelSize at least. SplitterSize sets the width of the splitters.

Auto hide flyouts

The pin button sends a tool panel to the strip of its side. Hovering its tab for AutoHideDelay milliseconds, or clicking it, slides the panel out as a flyout above the content, and it slides back when the user works elsewhere. In code, Model.SetAutoHide does the same.

Floating windows

Drop a panel away from the guides, double click its caption or choose Float in its menu, and it moves to a borderless Avalonia window owned by your window, outside the taskbar. A float holds a tree of its own, so more panels dock into it. Each float uses the scale of its own monitor.

Document groups

The document area has tab strips with pinned and modified tabs, close buttons, a new tab button (DocumentShowNewButton, OnNewDocument) and a tab list button. Dragging a document tab to a side arm splits it into a new document group, and a double click on a tab maximizes its group.

Dock keys and panel menus

Ctrl+F6 cycles the documents, Alt+F7 the tool panels, Shift+Esc hides the active tool panel and Alt+Minus opens the panel menu with Float, Dock, Auto Hide, Hide and Close. Ctrl+Tab, Ctrl+W and Ctrl+F4 are handled as dock keys as well. With TsgcAvaloniaCommandPalette the dock manager also lists one Window command per panel.

Accessibility, RTL and HiDPI

Screen readers see the site through UI Automation as a pane named "Dock site", with panes for the groups, tab items for the strips and separators with a range value for the splitters. With FlowDirection right to left the whole site is mirrored. The chrome is drawn at the render scaling of the window.

Layout as JSON

SaveLayout, SaveLayoutToFile and SaveLayoutToStream write the arrangement, the LoadLayout methods read it back and clamp floats to the work area of the screens. The JSON text is identical to the one of the Delphi model. OnRestorePanel creates the control of a panel that a saved layout names and your session has not opened yet.

Themes, Fluent included

Theme switches the dock manager between light, dark, high contrast and custom themes, and AccentColor sets the accent of the active caption. Set sgcUIApplication.ThemePreset to the Fluent preset and the dock manager paints with the WinUI 3 colours, like every other sgcUI control.

Localized texts

The captions of the dock chrome (Close, Auto Hide, Maximize, Float, Dock, Hide, "No open documents" and the names that screen readers hear) go through sgcUILang, and the sgcUI translation packs cover Spanish, German, French, Italian, Dutch, Polish, Portuguese, Turkish, Japanese, Korean and Chinese.

Docking in an Avalonia 12 Window

This is the complete window of a small Avalonia 12 app on net8.0 with FluentTheme. It was compiled against the current sgcNavigation sources, the code of sgcUI 2026.11, with 0 errors and 0 warnings.

The XAML

The sgcUI Avalonia assemblies map their controls to one namespace URI, so the sgc prefix finds TsgcAvaloniaDockManager. The dock manager fills the window:

MainWindow.axaml
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sgc="https://www.esegece.com/sgcui"
        x:Class="DockSample.MainWindow"
        Title="Avalonia docking" Width="1100" Height="720">
  <sgc:TsgcAvaloniaDockManager x:Name="dockManager"
                               DocumentShowNewButton="True"
                               SplitterSize="5"
                               AutoHideDelay="400"/>
</Window>

Panels, auto hide and the saved layout

Three tool panels and two documents are added inside BeginUpdate and EndUpdate, so they are placed once. The Output panel starts auto hidden, the + button opens a new document, and the layout is saved when the window closes and loaded when it opens again:

MainWindow.axaml.cs
using System;
using System.IO;
using Avalonia.Controls;
using esegece.sgcNavigation;

namespace DockSample
{
    public partial class MainWindow : Window
    {
        private readonly string FLayoutFile = Path.Combine(AppContext.BaseDirectory, "layout.json");
        private int FUntitled;

        public MainWindow()
        {
            InitializeComponent();

            // three tool panels and two documents, placed once at EndUpdate
            dockManager.Panels.BeginUpdate();
            try
            {
                AddTool("Explorer", new TreeView(), TsgcDockPlacement.dplLeft, 240);
                AddTool("Properties", new StackPanel(), TsgcDockPlacement.dplRight, 260);
                AddTool("Output", new TextBox { IsReadOnly = true }, TsgcDockPlacement.dplBottom, 180);
                AddDocument("main.cs").Pinned = true;
                AddDocument("readme.md");
            }
            finally
            {
                dockManager.Panels.EndUpdate();
            }

            // the Output panel starts auto hidden at the bottom edge
            dockManager.Model.SetAutoHide(dockManager.Model.FindPanel("Output"), true);

            // the + button of the document area
            dockManager.OnNewDocument = (s, aPanel) => AddDocument("Untitled " + (++FUntitled));
            // a saved layout names a document this session has not opened yet
            dockManager.OnRestorePanel = DockRestorePanel;

            // floats show with the window, so load the layout once it is open
            Opened += (s, e) =>
            {
                if (File.Exists(FLayoutFile))
                    dockManager.LoadLayoutFromFile(FLayoutFile);
            };
            Closing += (s, e) => dockManager.SaveLayoutToFile(FLayoutFile);
        }

        private TsgcDockPanel AddTool(string aName, Control aControl, TsgcDockPlacement aPlacement, int aSize)
        {
            TsgcDockPanel oPanel = dockManager.Panels.Add();
            oPanel.Name = aName;
            oPanel.Caption = aName;
            oPanel.Control = aControl;
            oPanel.Placement = aPlacement;
            oPanel.DockSize = aSize;
            return oPanel;
        }

        private TsgcDockPanel AddDocument(string aName)
        {
            TsgcDockPanel oPanel = dockManager.Panels.Add();
            oPanel.Name = aName;
            oPanel.Caption = aName;
            oPanel.Kind = TsgcDockPanelKind.dpkDocument;
            oPanel.Control = new TextBox { AcceptsReturn = true };
            return oPanel;
        }

        private void DockRestorePanel(object Sender, TsgcDockPanel aPanel, ref bool aAccept)
        {
            aAccept = aPanel.Kind == TsgcDockPanelKind.dpkDocument;
            if (aAccept)
                aPanel.Control = new TextBox { AcceptsReturn = true };
        }
    }
}

The Fluent look

One line in App.Initialize switches every sgcUI control of the app, the dock manager included, to the Fluent preset:

App.axaml.cs
public override void Initialize()
{
    AvaloniaXamlLoader.Load(this);
    // every sgcUI control, the dock manager included, paints with the Fluent preset
    sgcUIApplication.ThemePreset = sgcUICore_Theme.CS_UI_THEME_FLUENT;
}

In code, DockPanel, FloatPanel, ClosePanel, ShowPanel and ActivatePanel do what the user does with the mouse. OnPanelDock fires first and can refuse a dock, a float or an auto hide change, and OnPanelClose can keep a panel open. Like the other sgcNavigation events, these are delegate properties assigned in code.

One Docking Model, Five UI Frameworks

The Avalonia dock manager is one view of a model that sgcNavigation also uses on WinForms, WPF and Delphi.

Framework Control Notes
Avalonia 12TsgcAvaloniaDockManagerNuGet esegece.sgcNavigation.Avalonia for net8.0, net9.0 and net10.0, on Windows, Linux and macOS. Floating windows need the classic desktop lifetime.
WPFTsgcWpfDockManagerSame model, same panels, same events.
WinFormsTsgcWinFormsDockManagerSame model, same panels, same events.
Delphi VCLTsgcVCLDockManagerThe Delphi model writes the same JSON layout text.
Delphi FireMonkeyTsgcFMXDockManagerThe Delphi model writes the same JSON layout text.

All five run on TsgcDockManagerModel, so a team that ships a Delphi desktop app and an Avalonia app keeps one docking design and one layout format. WinForms, WPF and Avalonia come in every sgcUI .NET edition.

Where the Docking Manager Is Included

Registered edition

The docking manager, its floating windows, document area and layout persistence are part of the Registered edition of sgcNavigation for .NET. Buy sgcNavigation .NET as a single package, or get it in the sgcUI .NET Standard, Professional and Enterprise editions, each licensed per developer.

Community package

The free Community package of sgcNavigation has the rest of sgcNavigation, such as the navigation bar and its tree with search, but not the docking manager or the command palette. Use the Registered packages for docking.

sgcNavigation or the Dock Library?

If you search for Avalonia docking you will also find Dock, an open source docking project for Avalonia. This page does not compare features with it, so evaluate both against your own requirements.

DockingShellAvalonia

A docking shell for Avalonia on Windows, Linux and macOS: an Explorer tree on the left, Properties on the right, the Output auto hidden at the bottom and text documents with pinned and modified tabs.

What it shows

Drag a caption or a tab to the guides, drop it away from them to float it, or pin a tool panel to auto hide it. The command palette (Ctrl+Shift+P) lists one Window command per panel, and a check box switches the dark theme.

Layout persistence

The layout is saved to DockingShell.layout.json when the window closes and loaded on the next start, and Reset layout goes back to the initial one. A saved document gets a new text box through OnRestorePanel.

Where it is

In the sgcUI .NET demos, folder Navigation\DockingShellAvalonia, next to the WinForms DockingShell and DockingShellWpf. dotnet run -- --test result.txt runs its self check.

See the sgcUI demos or read the docking help topic.

Avalonia Docking Questions

Can I host my own Avalonia controls in the dock panels?

Yes. The Control of every TsgcDockPanel is an ordinary Avalonia Control, a TreeView, a TextBox, a UserControl or any view of your own. It becomes a child of the dock site, so its DataContext flows from the window, and the dock manager arranges it and shows it while its panel is the active one. The dock manager never frees it.

Do floating windows work on Linux and macOS?

Floating windows are Avalonia windows, so they need the classic desktop lifetime (IClassicDesktopStyleApplicationLifetime), which is what an Avalonia desktop app on Windows, Linux and macOS uses. Under the browser and mobile lifetimes AllowFloating stays False and the panels stay docked.

How do I save and restore the layout?

SaveLayout returns the arrangement as JSON text, and SaveLayoutToFile and SaveLayoutToStream write it. LoadLayout, LoadLayoutFromFile and LoadLayoutFromStream read it back. Call LoadLayout after the window opened, because the floats show with the window. When a saved layout names a panel that does not exist yet, OnRestorePanel lets you create its control or refuse it.

Which edition includes the docking manager?

The docking manager is part of the Registered edition of sgcNavigation for .NET, sold as a single package and included in the sgcUI .NET Standard, Professional and Enterprise editions. The free Community package of sgcNavigation does not include it.

Is the layout compatible with the WinForms, WPF and Delphi versions?

TsgcAvaloniaDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager, TsgcVCLDockManager and TsgcFMXDockManager all run on the same TsgcDockManagerModel, and the .NET model writes JSON text identical to the Delphi model.

Best value: All-AccessEvery eSeGeCe product, Premium Support included, from €1,059/year.
See All-Access pricing

Add Docking to Your Avalonia App

Add the Registered sgcNavigation package for Avalonia, place a TsgcAvaloniaDockManager in your window and open the DockingShellAvalonia demo next to your app.