Avalonia Docking mit einem nativen Dock-Manager

TsgcAvaloniaDockManager macht aus einem Avalonia-12-Fenster einen Arbeitsbereich im IDE-Stil. Werkzeugfenster docken an den vier Seiten an, die Mitte ist ein Dokumentbereich mit Registerkarten, und der Benutzer zieht Titelleisten und Registerkarten auf Drop-Guides, blendet Fenster automatisch an den Rändern aus oder lässt sie in eigenen Fenstern schweben. Jedes Fenster hostet eines Ihrer eigenen Avalonia-Steuerelemente, und die gesamte Anordnung wird als JSON gespeichert. Der Dock-Manager ist Teil von sgcNavigation, neu in sgcUI 2026.11.

Ein Docking-Arbeitsbereich in Ihrer Avalonia-App

Ein Steuerelement in einem Fenster. Sie fügen die Fenster im Code hinzu, geben jedem Ihr eigenes Steuerelement, und der Benutzer ordnet sie an.

Dock-Site mit Explorer und Search als Registerkarten links, einer automatisch ausgeblendeten Toolbox-Leiste, vier Dokument-Registerkarten, Properties rechts und Output unten, mit den Drop-Guides und dem Vorschaurechteck auf der rechten Hälfte der Dokumente, während Output gezogen wird
Der Docking-Manager von sgcNavigation, während das Fenster Output gezogen wird: der Kompass, die Rand-Guides und das Vorschaurechteck.

Werkzeugfenster und Dokumente

Jedes TsgcDockPanel hat einen Name, eine Caption, ein Symbol, einen Kind (dpkTool oder dpkDocument) und das Control, das es anzeigt. Werkzeugfenster starten an der Seite ihres Placement, DockSize breit, und Fenster mit demselben GroupName werden zu Registerkarten zusammengefasst.

Ihre eigenen Steuerelemente

Der Inhalt eines Fensters ist ein gewöhnliches Avalonia-Control. Es wird logisches und visuelles Kind der Dock-Site, sodass der DataContext von Ihrem Fenster aus weitergegeben wird, und es wird angeordnet und angezeigt, solange sein Fenster das aktive ist. Ein verborgenes Fenster behält sein Steuerelement als verborgenes Kind.

Drop-Guides mit Vorschau

Während eine Titelleiste oder eine Registerkarte gezogen wird, teilt ein Kompass auf der Gruppe unter dem Zeiger diese Gruppe an einer Seite oder fügt das Fenster als Registerkarte ein, die Rand-Guides docken es an einem Rand der gesamten Site an, und ein Vorschaurechteck in der Akzentfarbe zeigt den Platz, den es einnehmen wird. Esc bricht das Ziehen ab.

Splitter

Gruppen sitzen in verschachtelten Teilungen, nebeneinander oder gestapelt, mit Splittern dazwischen. Ein Ziehen ändert die Größe der Nachbarn live, und jede Gruppe behält mindestens MinPanelSize. SplitterSize legt die Breite der Splitter fest.

Flyouts zum automatischen Ausblenden

Die Pin-Schaltfläche schickt ein Werkzeugfenster in die Leiste seiner Seite. Fährt man AutoHideDelay Millisekunden lang über seine Registerkarte oder klickt darauf, gleitet das Fenster als Flyout über den Inhalt heraus und gleitet zurück, wenn der Benutzer woanders arbeitet. Im Code bewirkt Model.SetAutoHide dasselbe.

Schwebende Fenster

Legen Sie ein Fenster abseits der Guides ab, doppelklicken Sie auf seine Titelleiste oder wählen Sie Float in seinem Menü, und es wechselt in ein randloses Avalonia-Fenster, das Ihrem Fenster gehört und nicht in der Taskleiste erscheint. Ein schwebendes Fenster hat einen eigenen Baum, sodass weitere Fenster darin andocken können. Jedes schwebende Fenster verwendet die Skalierung seines eigenen Monitors.

Dokumentgruppen

Der Dokumentbereich hat Registerleisten mit angehefteten und geänderten Registerkarten, Schließen-Schaltflächen, einer Schaltfläche für neue Registerkarten (DocumentShowNewButton, OnNewDocument) und einer Schaltfläche mit der Registerkartenliste. Zieht man eine Dokument-Registerkarte an eine Seite, wird sie in eine neue Dokumentgruppe geteilt, und ein Doppelklick auf eine Registerkarte maximiert ihre Gruppe.

Dock-Tasten und Fenstermenüs

Strg+F6 wechselt zwischen den Dokumenten, Alt+F7 zwischen den Werkzeugfenstern, Umschalt+Esc blendet das aktive Werkzeugfenster aus und Alt+Minus öffnet das Fenstermenü mit Float, Dock, Auto Hide, Hide und Close. Strg+Tab, Strg+W und Strg+F4 werden ebenfalls als Dock-Tasten behandelt. Mit TsgcAvaloniaCommandPalette listet der Dock-Manager außerdem einen Window-Befehl pro Fenster auf.

Barrierefreiheit, RTL und HiDPI

Screenreader sehen die Site über UI Automation als Bereich namens "Dock site", mit Bereichen für die Gruppen, Registerkarten-Elementen für die Leisten und Trennern mit einem Bereichswert für die Splitter. Mit FlowDirection von rechts nach links wird die gesamte Site gespiegelt. Das Chrome wird mit der Render-Skalierung des Fensters gezeichnet.

Layout als JSON

SaveLayout, SaveLayoutToFile und SaveLayoutToStream schreiben die Anordnung, die LoadLayout-Methoden lesen sie wieder ein und begrenzen schwebende Fenster auf den Arbeitsbereich der Bildschirme. Der JSON-Text ist identisch mit dem des Delphi-Modells. OnRestorePanel erzeugt das Steuerelement eines Fensters, das ein gespeichertes Layout nennt und das Ihre Sitzung noch nicht geöffnet hat.

Themes, Fluent inklusive

Theme schaltet den Dock-Manager zwischen hellen, dunklen, kontrastreichen und benutzerdefinierten Themes um, und AccentColor legt den Akzent der aktiven Titelleiste fest. Setzen Sie sgcUIApplication.ThemePreset auf das Fluent-Preset, und der Dock-Manager zeichnet mit den WinUI-3-Farben, wie jedes andere sgcUI-Steuerelement.

Lokalisierte Texte

Die Beschriftungen des Dock-Chrome (Close, Auto Hide, Maximize, Float, Dock, Hide, "No open documents" und die Namen, die Screenreader vorlesen) laufen über sgcUILang, und die sgcUI-Übersetzungspakete decken Spanisch, Deutsch, Französisch, Italienisch, Niederländisch, Polnisch, Portugiesisch, Türkisch, Japanisch, Koreanisch und Chinesisch ab.

Docking in einem Avalonia-12-Fenster

Das ist das vollständige Fenster einer kleinen Avalonia-12-App auf net8.0 mit FluentTheme. Es wurde gegen die aktuellen sgcNavigation-Quellen kompiliert, den Code von sgcUI 2026.11, mit 0 Fehlern und 0 Warnungen.

Das XAML

Die Avalonia-Assemblies von sgcUI ordnen ihre Steuerelemente einer einzigen Namespace-URI zu, sodass das Präfix sgc TsgcAvaloniaDockManager findet. Der Dock-Manager füllt das Fenster:

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>

Fenster, automatisches Ausblenden und das gespeicherte Layout

Drei Werkzeugfenster und zwei Dokumente werden innerhalb von BeginUpdate und EndUpdate hinzugefügt, sodass sie nur einmal platziert werden. Das Fenster Output startet automatisch ausgeblendet, die Schaltfläche + öffnet ein neues Dokument, und das Layout wird beim Schließen des Fensters gespeichert und beim erneuten Öffnen geladen:

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 };
        }
    }
}

Der Fluent-Look

Eine Zeile in App.Initialize schaltet jedes sgcUI-Steuerelement der App, den Dock-Manager eingeschlossen, auf das Fluent-Preset um:

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;
}

Im Code tun DockPanel, FloatPanel, ClosePanel, ShowPanel und ActivatePanel das, was der Benutzer mit der Maus tut. OnPanelDock wird zuerst ausgelöst und kann ein Andocken, Schweben oder eine Änderung des automatischen Ausblendens ablehnen, und OnPanelClose kann ein Fenster geöffnet halten. Wie die anderen sgcNavigation-Ereignisse sind dies Delegate-Eigenschaften, die im Code zugewiesen werden.

Ein Docking-Modell, fünf UI-Frameworks

Der Avalonia-Dock-Manager ist eine Ansicht eines Modells, das sgcNavigation auch unter WinForms, WPF und Delphi verwendet.

Framework Steuerelement Hinweise
Avalonia 12TsgcAvaloniaDockManagerNuGet esegece.sgcNavigation.Avalonia für net8.0, net9.0 und net10.0, unter Windows, Linux und macOS. Schwebende Fenster brauchen die klassische Desktop-Lifetime.
WPFTsgcWpfDockManagerGleiches Modell, gleiche Fenster, gleiche Ereignisse.
WinFormsTsgcWinFormsDockManagerGleiches Modell, gleiche Fenster, gleiche Ereignisse.
Delphi VCLTsgcVCLDockManagerDas Delphi-Modell schreibt denselben JSON-Layouttext.
Delphi FireMonkeyTsgcFMXDockManagerDas Delphi-Modell schreibt denselben JSON-Layouttext.

Alle fünf laufen auf TsgcDockManagerModel, sodass ein Team, das eine Delphi-Desktop-App und eine Avalonia-App ausliefert, ein Docking-Design und ein Layout-Format behält. WinForms, WPF und Avalonia sind in jeder sgcUI-.NET-Edition enthalten.

Wo der Docking-Manager enthalten ist

Registered Edition

Der Docking-Manager, seine schwebenden Fenster, der Dokumentbereich und die Layout-Persistenz sind Teil der Registered Edition von sgcNavigation für .NET. Kaufen Sie sgcNavigation .NET als Einzelpaket oder erhalten Sie es in den Editionen sgcUI .NET Standard, Professional und Enterprise, jeweils pro Entwickler lizenziert.

Community-Paket

Das kostenlose Community-Paket von sgcNavigation enthält den Rest von sgcNavigation, etwa die Navigationsleiste und ihren Baum mit Suche, aber nicht den Docking-Manager oder die Befehlspalette. Verwenden Sie für Docking die Registered-Pakete.

sgcNavigation oder die Dock-Bibliothek?

Wenn Sie nach Avalonia Docking suchen, finden Sie auch Dock, ein Open-Source-Docking-Projekt für Avalonia. Diese Seite vergleicht keine Funktionen damit, bewerten Sie also beide anhand Ihrer eigenen Anforderungen.

DockingShellAvalonia

Eine Docking-Shell für Avalonia unter Windows, Linux und macOS: ein Explorer-Baum links, Properties rechts, Output automatisch ausgeblendet unten und Textdokumente mit angehefteten und geänderten Registerkarten.

Was sie zeigt

Ziehen Sie eine Titelleiste oder eine Registerkarte auf die Guides, legen Sie sie abseits davon ab, damit sie schwebt, oder heften Sie ein Werkzeugfenster an, um es automatisch auszublenden. Die Befehlspalette (Strg+Umschalt+P) listet einen Window-Befehl pro Fenster auf, und ein Kontrollkästchen schaltet das dunkle Theme um.

Layout-Persistenz

Das Layout wird beim Schließen des Fensters in DockingShell.layout.json gespeichert und beim nächsten Start geladen, und Reset layout kehrt zum ursprünglichen Layout zurück. Ein gespeichertes Dokument erhält über OnRestorePanel ein neues Textfeld.

Wo sie liegt

In den sgcUI-.NET-Demos, Ordner Navigation\DockingShellAvalonia, neben den WinForms-Demos DockingShell und DockingShellWpf. dotnet run -- --test result.txt führt ihre Selbstprüfung aus.

Die sgcUI-Demos ansehen oder das Hilfethema zum Docking lesen.

Fragen zu Avalonia Docking

Kann ich meine eigenen Avalonia-Steuerelemente in den Dock-Fenstern hosten?

Ja. Das Control jedes TsgcDockPanel ist ein gewöhnliches Avalonia-Control, ein TreeView, eine TextBox, ein UserControl oder eine beliebige eigene View. Es wird zum Kind der Dock-Site, sodass sein DataContext vom Fenster aus weitergegeben wird, und der Dock-Manager ordnet es an und zeigt es an, solange sein Fenster das aktive ist. Der Dock-Manager gibt es nie frei.

Funktionieren schwebende Fenster unter Linux und macOS?

Schwebende Fenster sind Avalonia-Fenster, daher brauchen sie die klassische Desktop-Lifetime (IClassicDesktopStyleApplicationLifetime), die eine Avalonia-Desktop-App unter Windows, Linux und macOS verwendet. Unter den Browser- und Mobile-Lifetimes bleibt AllowFloating auf False und die Fenster bleiben angedockt.

Wie speichere und stelle ich das Layout wieder her?

SaveLayout gibt die Anordnung als JSON-Text zurück, und SaveLayoutToFile und SaveLayoutToStream schreiben sie. LoadLayout, LoadLayoutFromFile und LoadLayoutFromStream lesen sie wieder ein. Rufen Sie LoadLayout auf, nachdem das Fenster geöffnet wurde, weil die schwebenden Fenster mit dem Fenster angezeigt werden. Wenn ein gespeichertes Layout ein Fenster nennt, das noch nicht existiert, können Sie in OnRestorePanel sein Steuerelement erzeugen oder es ablehnen.

Welche Edition enthält den Docking-Manager?

Der Docking-Manager ist Teil der Registered Edition von sgcNavigation für .NET, wird als Einzelpaket verkauft und ist in den Editionen sgcUI .NET Standard, Professional und Enterprise enthalten. Das kostenlose Community-Paket von sgcNavigation enthält ihn nicht.

Ist das Layout mit den Versionen für WinForms, WPF und Delphi kompatibel?

TsgcAvaloniaDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager, TsgcVCLDockManager und TsgcFMXDockManager laufen alle auf demselben TsgcDockManagerModel, und das .NET-Modell schreibt JSON-Text, der mit dem des Delphi-Modells identisch ist.

Bestes Preis-Leistungs-Verhältnis: All-AccessAlle eSeGeCe-Produkte, inklusive Premium-Support, ab €1,059 pro Jahr.
All-Access-Preise ansehen

Fügen Sie Ihrer Avalonia-App Docking hinzu

Fügen Sie das Registered-Paket sgcNavigation für Avalonia hinzu, platzieren Sie einen TsgcAvaloniaDockManager in Ihrem Fenster und öffnen Sie die Demo DockingShellAvalonia neben Ihrer App.