Avalonia-docking met een native dockmanager

TsgcAvaloniaDockManager maakt van een Avalonia 12-venster een werkruimte in IDE-stijl. Gereedschapspanelen worden aan de vier zijden vastgezet, het midden is een documentgebied met tabbladen, en de gebruiker sleept titels en tabbladen naar dropgidsen, verbergt panelen automatisch aan de randen of laat ze zweven in eigen vensters. Elk paneel host een van je eigen Avalonia-besturingselementen, en de hele indeling wordt als JSON opgeslagen. De dockmanager is onderdeel van sgcNavigation, nieuw in sgcUI 2026.11.

Een dockingwerkruimte in je Avalonia-app

Eén besturingselement in een venster. Je voegt panelen toe in code, geeft elk paneel je eigen besturingselement, en de gebruiker rangschikt ze.

Docksite met Explorer en Search als tabbladen links, een automatisch verborgen Toolbox-strook, vier documenttabbladen, Properties rechts en Output onderaan, met de dropgidsen en het voorvertoningsrechthoek op de rechterhelft van de documenten terwijl Output wordt gesleept
De dockingmanager van sgcNavigation terwijl het paneel Output wordt gesleept: het kompas, de randgidsen en de voorvertoningsrechthoek.

Gereedschapspanelen en documenten

Elk TsgcDockPanel heeft een Name, een Caption, een pictogram, een Kind (dpkTool of dpkDocument) en het Control dat het toont. Gereedschapspanelen starten aan de zijde van hun Placement, DockSize breed, en panelen met dezelfde GroupName worden samen in tabbladen gezet.

Je eigen besturingselementen

De inhoud van een paneel is een gewoon Avalonia-Control. Het wordt een logisch en visueel kind van de docksite, zodat de DataContext vanuit je venster doorstroomt, en het wordt gerangschikt en getoond zolang zijn paneel het actieve is. Een verborgen paneel houdt zijn besturingselement als verborgen kind.

Dropgidsen met voorvertoning

Terwijl een titel of tabblad wordt gesleept, splitst een kompas op de groep onder de aanwijzer die groep aan een zijde of zet het paneel erin als tabblad, de randgidsen zetten het vast aan een rand van de hele site, en een voorvertoningsrechthoek in de accentkleur toont de ruimte die het inneemt. Esc annuleert het slepen.

Splitters

Groepen zitten in geneste splitsingen, naast elkaar of gestapeld, met splitters ertussen. Slepen wijzigt de grootte van de buren live, en elke groep houdt minstens MinPanelSize. SplitterSize bepaalt de breedte van de splitters.

Uitschuifpanelen met automatisch verbergen

De pinknop stuurt een gereedschapspaneel naar de strook van zijn zijde. Als je AutoHideDelay milliseconden boven het tabblad blijft hangen, of erop klikt, schuift het paneel als uitschuifpaneel over de inhoud, en het schuift terug wanneer de gebruiker elders werkt. In code doet Model.SetAutoHide hetzelfde.

Zwevende vensters

Laat een paneel los buiten de gidsen, dubbelklik op de titel of kies Float in het menu, en het gaat naar een randloos Avalonia-venster dat eigendom is van je venster, buiten de taakbalk. Een zwevend venster heeft een eigen boom, zodat er meer panelen in vastgezet kunnen worden. Elk zwevend venster gebruikt de schaal van zijn eigen monitor.

Documentgroepen

Het documentgebied heeft tabbladstroken met vastgepinde en gewijzigde tabbladen, sluitknoppen, een knop voor een nieuw tabblad (DocumentShowNewButton, OnNewDocument) en een knop met de tabbladlijst. Een documenttabblad naar een zijde slepen splitst het in een nieuwe documentgroep, en een dubbelklik op een tabblad maximaliseert de groep.

Docktoetsen en paneelmenu's

Ctrl+F6 doorloopt de documenten, Alt+F7 de gereedschapspanelen, Shift+Esc verbergt het actieve gereedschapspaneel en Alt+Min opent het paneelmenu met Float, Dock, Auto Hide, Hide en Close. Ctrl+Tab, Ctrl+W en Ctrl+F4 worden ook als docktoetsen afgehandeld. Met TsgcAvaloniaCommandPalette toont de dockmanager ook één Window-opdracht per paneel.

Toegankelijkheid, RTL en HiDPI

Schermlezers zien de site via UI Automation als een paneel met de naam "Dock site", met panelen voor de groepen, tabbladitems voor de stroken en scheidingslijnen met een bereikwaarde voor de splitters. Met FlowDirection van rechts naar links wordt de hele site gespiegeld. De opmaak wordt getekend op de renderschaal van het venster.

Indeling als JSON

SaveLayout, SaveLayoutToFile en SaveLayoutToStream schrijven de indeling, de LoadLayout-methoden lezen die weer in en houden zwevende vensters binnen het werkgebied van de schermen. De JSON-tekst is identiek aan die van het Delphi-model. OnRestorePanel maakt het besturingselement van een paneel dat een opgeslagen indeling noemt en dat je sessie nog niet heeft geopend.

Thema's, Fluent inbegrepen

Theme schakelt de dockmanager tussen lichte, donkere, hoogcontrast- en aangepaste thema's, en AccentColor stelt het accent van de actieve titel in. Zet sgcUIApplication.ThemePreset op de Fluent-preset en de dockmanager tekent met de WinUI 3-kleuren, net als elk ander sgcUI-besturingselement.

Gelokaliseerde teksten

De opschriften van de dockopmaak (Close, Auto Hide, Maximize, Float, Dock, Hide, "No open documents" en de namen die schermlezers uitspreken) lopen via sgcUILang, en de vertaalpakketten van sgcUI dekken Spaans, Duits, Frans, Italiaans, Nederlands, Pools, Portugees, Turks, Japans, Koreaans en Chinees.

Docking in een Avalonia 12-venster

Dit is het complete venster van een kleine Avalonia 12-app op net8.0 met FluentTheme. Het is gecompileerd tegen de huidige sgcNavigation-bronnen, de code van sgcUI 2026.11, met 0 fouten en 0 waarschuwingen.

De XAML

De Avalonia-assemblies van sgcUI koppelen hun besturingselementen aan één naamruimte-URI, zodat het voorvoegsel sgc TsgcAvaloniaDockManager vindt. De dockmanager vult het venster:

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>

Panelen, automatisch verbergen en de opgeslagen indeling

Drie gereedschapspanelen en twee documenten worden toegevoegd binnen BeginUpdate en EndUpdate, zodat ze één keer worden geplaatst. Het paneel Output start automatisch verborgen, de knop + opent een nieuw document, en de indeling wordt opgeslagen bij het sluiten van het venster en geladen bij het opnieuw openen:

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

De Fluent-look

Eén regel in App.Initialize schakelt elk sgcUI-besturingselement van de app, de dockmanager inbegrepen, om naar de 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 doen DockPanel, FloatPanel, ClosePanel, ShowPanel en ActivatePanel wat de gebruiker met de muis doet. OnPanelDock wordt eerst geactiveerd en kan een vastzetting, een zweefactie of een wijziging van automatisch verbergen weigeren, en OnPanelClose kan een paneel open houden. Net als de andere sgcNavigation-events zijn dit delegate-eigenschappen die in code worden toegewezen.

Eén dockingmodel, vijf UI-frameworks

De Avalonia-dockmanager is één weergave van een model dat sgcNavigation ook gebruikt op WinForms, WPF en Delphi.

Framework Besturingselement Opmerkingen
Avalonia 12TsgcAvaloniaDockManagerNuGet esegece.sgcNavigation.Avalonia voor net8.0, net9.0 en net10.0, op Windows, Linux en macOS. Zwevende vensters hebben de klassieke desktop-levensduur nodig.
WPFTsgcWpfDockManagerZelfde model, zelfde panelen, zelfde events.
WinFormsTsgcWinFormsDockManagerZelfde model, zelfde panelen, zelfde events.
Delphi VCLTsgcVCLDockManagerHet Delphi-model schrijft dezelfde JSON-indelingstekst.
Delphi FireMonkeyTsgcFMXDockManagerHet Delphi-model schrijft dezelfde JSON-indelingstekst.

Alle vijf draaien op TsgcDockManagerModel, zodat een team dat een Delphi-desktop-app en een Avalonia-app levert één dockingontwerp en één indelingsformaat behoudt. WinForms, WPF en Avalonia zitten in elke sgcUI .NET-editie.

Waar de dockmanager is inbegrepen

Registered-editie

De dockmanager, zijn zwevende vensters, het documentgebied en het bewaren van de indeling zijn onderdeel van de Registered-editie van sgcNavigation voor .NET. Koop sgcNavigation .NET als los pakket, of krijg het in de sgcUI .NET Standard-, Professional- en Enterprise-edities, elk gelicentieerd per ontwikkelaar.

Community-pakket

Het gratis Community-pakket van sgcNavigation heeft de rest van sgcNavigation, zoals de navigatiebalk en zijn boom met zoeken, maar niet de dockmanager of het opdrachtenpalet. Gebruik de Registered-pakketten voor docking.

sgcNavigation of de Dock-bibliotheek?

Als je zoekt naar Avalonia-docking, vind je ook Dock, een open-sourcedockingproject voor Avalonia. Deze pagina vergelijkt geen functies ermee, dus beoordeel beide aan de hand van je eigen eisen.

DockingShellAvalonia

Een dockingshell voor Avalonia op Windows, Linux en macOS: een Explorer-boom links, Properties rechts, Output automatisch verborgen onderaan en tekstdocumenten met vastgepinde en gewijzigde tabbladen.

Wat het toont

Sleep een titel of tabblad naar de gidsen, laat het los buiten de gidsen om het te laten zweven, of pin een gereedschapspaneel vast om het automatisch te verbergen. Het opdrachtenpalet (Ctrl+Shift+P) toont één Window-opdracht per paneel, en een selectievakje schakelt het donkere thema in.

Bewaren van de indeling

De indeling wordt bij het sluiten van het venster opgeslagen in DockingShell.layout.json en bij de volgende start geladen, en Reset layout keert terug naar de oorspronkelijke indeling. Een opgeslagen document krijgt via OnRestorePanel een nieuw tekstvak.

Waar het staat

In de sgcUI .NET-demo's, map Navigation\DockingShellAvalonia, naast de WinForms-demo's DockingShell en DockingShellWpf. dotnet run -- --test result.txt voert de zelfcontrole uit.

Bekijk de sgcUI-demo's of lees het helponderwerp over docking.

Vragen over Avalonia-docking

Kan ik mijn eigen Avalonia-besturingselementen hosten in de dockpanelen?

Ja. Het Control van elk TsgcDockPanel is een gewoon Avalonia-Control, een TreeView, een TextBox, een UserControl of een eigen view. Het wordt een kind van de docksite, zodat de DataContext vanuit het venster doorstroomt, en de dockmanager rangschikt het en toont het zolang zijn paneel het actieve is. De dockmanager geeft het nooit vrij.

Werken zwevende vensters op Linux en macOS?

Zwevende vensters zijn Avalonia-vensters, dus ze hebben de klassieke desktop-levensduur nodig (IClassicDesktopStyleApplicationLifetime), die een Avalonia-desktop-app op Windows, Linux en macOS gebruikt. Onder de browser- en mobiele levensduren blijft AllowFloating op False staan en blijven de panelen vastgezet.

Hoe sla ik de indeling op en herstel ik die?

SaveLayout geeft de indeling terug als JSON-tekst, en SaveLayoutToFile en SaveLayoutToStream schrijven die weg. LoadLayout, LoadLayoutFromFile en LoadLayoutFromStream lezen die weer in. Roep LoadLayout aan nadat het venster is geopend, omdat de zwevende vensters samen met het venster verschijnen. Wanneer een opgeslagen indeling een paneel noemt dat nog niet bestaat, kun je met OnRestorePanel het besturingselement ervan maken of het weigeren.

Welke editie bevat de dockmanager?

De dockmanager is onderdeel van de Registered-editie van sgcNavigation voor .NET, wordt verkocht als los pakket en is inbegrepen in de sgcUI .NET Standard-, Professional- en Enterprise-edities. Het gratis Community-pakket van sgcNavigation bevat hem niet.

Is de indeling compatibel met de WinForms-, WPF- en Delphi-versies?

TsgcAvaloniaDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager, TsgcVCLDockManager en TsgcFMXDockManager draaien allemaal op hetzelfde TsgcDockManagerModel, en het .NET-model schrijft JSON-tekst die identiek is aan die van het Delphi-model.

De beste deal: All-AccessElk eSeGeCe-product, inclusief Premium-ondersteuning, vanaf €1,059 per jaar.
Bekijk de All-Access-prijzen

Voeg docking toe aan je Avalonia-app

Voeg het Registered-pakket sgcNavigation voor Avalonia toe, plaats een TsgcAvaloniaDockManager in je venster en open de demo DockingShellAvalonia naast je app.