Docking Avalonia avec un gestionnaire d'ancrage natif

TsgcAvaloniaDockManager transforme une fenêtre Avalonia 12 en espace de travail de type IDE. Les panneaux d'outils s'ancrent sur les quatre côtés, le centre est une zone de documents à onglets, et l'utilisateur fait glisser les titres et les onglets vers les guides de dépose, masque automatiquement les panneaux sur les bords ou les fait flotter dans leurs propres fenêtres. Chaque panneau héberge l'un de vos propres contrôles Avalonia, et toute la disposition est enregistrée en JSON. Le gestionnaire d'ancrage fait partie de sgcNavigation, nouveauté de sgcUI 2026.11.

Un espace de travail avec docking dans votre application Avalonia

Un seul contrôle placé dans une fenêtre. Vous ajoutez les panneaux dans le code, vous donnez à chacun votre propre contrôle, et l'utilisateur les organise.

Site d'ancrage avec Explorer et Search en onglets à gauche, une bande Toolbox à masquage automatique, quatre onglets de documents, Properties à droite et Output en bas, avec les guides de dépose et le rectangle d'aperçu sur la moitié droite des documents pendant que Output est déplacé
Le gestionnaire de docking de sgcNavigation pendant le déplacement du panneau Output : la boussole, les guides de bord et le rectangle d'aperçu.

Panneaux d'outils et documents

Chaque TsgcDockPanel a un Name, un Caption, une icône, un Kind (dpkTool ou dpkDocument) et le Control qu'il affiche. Les panneaux d'outils démarrent du côté de leur Placement, sur une largeur de DockSize, et les panneaux ayant le même GroupName se regroupent en onglets.

Vos propres contrôles

Le contenu d'un panneau est un Control Avalonia ordinaire. Il devient un enfant logique et visuel du site d'ancrage, si bien que le DataContext est transmis depuis votre fenêtre, et il est disposé et affiché tant que son panneau est le panneau actif. Un panneau masqué conserve son contrôle comme enfant masqué.

Guides de dépose avec aperçu

Pendant le déplacement d'un titre ou d'un onglet, une boussole sur le groupe situé sous le pointeur divise ce groupe d'un côté ou y place le panneau en onglet, les guides de bord l'ancrent sur un bord de tout le site, et un rectangle d'aperçu à la couleur d'accent montre la place qu'il prendra. Échap annule le déplacement.

Séparateurs

Les groupes se trouvent dans des divisions imbriquées, côte à côte ou empilées, avec des séparateurs entre eux. Un glissement redimensionne les voisins en direct, et chaque groupe garde au moins MinPanelSize. SplitterSize fixe la largeur des séparateurs.

Volets à masquage automatique

Le bouton d'épingle envoie un panneau d'outils sur la bande de son côté. Survoler son onglet pendant AutoHideDelay millisecondes, ou cliquer dessus, fait glisser le panneau en volet au-dessus du contenu, et il se range quand l'utilisateur travaille ailleurs. Dans le code, Model.SetAutoHide fait la même chose.

Fenêtres flottantes

Déposez un panneau loin des guides, double-cliquez sur son titre ou choisissez Float dans son menu, et il passe dans une fenêtre Avalonia sans bordure appartenant à votre fenêtre, hors de la barre des tâches. Une fenêtre flottante contient son propre arbre, de sorte que d'autres panneaux peuvent s'y ancrer. Chaque fenêtre flottante utilise l'échelle de son propre écran.

Groupes de documents

La zone de documents a des bandes d'onglets avec onglets épinglés et modifiés, boutons de fermeture, un bouton de nouvel onglet (DocumentShowNewButton, OnNewDocument) et un bouton de liste des onglets. Faire glisser un onglet de document vers un côté le divise dans un nouveau groupe de documents, et un double-clic sur un onglet agrandit son groupe.

Touches de docking et menus de panneau

Ctrl+F6 parcourt les documents, Alt+F7 les panneaux d'outils, Maj+Échap masque le panneau d'outils actif et Alt+Moins ouvre le menu du panneau avec Float, Dock, Auto Hide, Hide et Close. Ctrl+Tab, Ctrl+W et Ctrl+F4 sont aussi gérées comme touches de docking. Avec TsgcAvaloniaCommandPalette, le gestionnaire d'ancrage liste en plus une commande Window par panneau.

Accessibilité, RTL et HiDPI

Les lecteurs d'écran voient le site via UI Automation comme un volet nommé "Dock site", avec des volets pour les groupes, des éléments d'onglet pour les bandes et des séparateurs avec une valeur de plage pour les séparateurs de redimensionnement. Avec FlowDirection de droite à gauche, tout le site est inversé. L'habillage est dessiné à l'échelle de rendu de la fenêtre.

Disposition en JSON

SaveLayout, SaveLayoutToFile et SaveLayoutToStream écrivent la disposition, les méthodes LoadLayout la relisent et ramènent les fenêtres flottantes dans la zone de travail des écrans. Le texte JSON est identique à celui du modèle Delphi. OnRestorePanel crée le contrôle d'un panneau qu'une disposition enregistrée désigne et que votre session n'a pas encore ouvert.

Thèmes, Fluent compris

Theme fait passer le gestionnaire d'ancrage entre thèmes clair, sombre, à contraste élevé et personnalisés, et AccentColor définit l'accent du titre actif. Réglez sgcUIApplication.ThemePreset sur le préréglage Fluent, et le gestionnaire d'ancrage se dessine avec les couleurs de WinUI 3, comme tous les autres contrôles sgcUI.

Textes localisés

Les libellés de l'habillage de docking (Close, Auto Hide, Maximize, Float, Dock, Hide, "No open documents" et les noms que lisent les lecteurs d'écran) passent par sgcUILang, et les packs de traduction de sgcUI couvrent l'espagnol, l'allemand, le français, l'italien, le néerlandais, le polonais, le portugais, le turc, le japonais, le coréen et le chinois.

Le docking dans une fenêtre Avalonia 12

Voici la fenêtre complète d'une petite application Avalonia 12 sur net8.0 avec FluentTheme. Elle a été compilée avec les sources actuelles de sgcNavigation, le code de sgcUI 2026.11, avec 0 erreur et 0 avertissement.

Le XAML

Les assemblies Avalonia de sgcUI associent leurs contrôles à une seule URI d'espace de noms, si bien que le préfixe sgc trouve TsgcAvaloniaDockManager. Le gestionnaire d'ancrage remplit la fenêtre :

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>

Panneaux, masquage automatique et disposition enregistrée

Trois panneaux d'outils et deux documents sont ajoutés entre BeginUpdate et EndUpdate, ils sont donc placés une seule fois. Le panneau Output démarre masqué automatiquement, le bouton + ouvre un nouveau document, et la disposition est enregistrée à la fermeture de la fenêtre puis chargée à sa réouverture :

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

Le style Fluent

Une ligne dans App.Initialize fait passer tous les contrôles sgcUI de l'application, gestionnaire d'ancrage compris, au préréglage Fluent :

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

Dans le code, DockPanel, FloatPanel, ClosePanel, ShowPanel et ActivatePanel font ce que l'utilisateur fait avec la souris. OnPanelDock se déclenche en premier et peut refuser un ancrage, un passage en flottant ou un changement de masquage automatique, et OnPanelClose peut garder un panneau ouvert. Comme les autres événements de sgcNavigation, ce sont des propriétés délégué affectées dans le code.

Un modèle de docking, cinq frameworks d'interface

Le gestionnaire d'ancrage Avalonia est une vue d'un modèle que sgcNavigation utilise aussi sur WinForms, WPF et Delphi.

Framework Contrôle Remarques
Avalonia 12TsgcAvaloniaDockManagerNuGet esegece.sgcNavigation.Avalonia pour net8.0, net9.0 et net10.0, sous Windows, Linux et macOS. Les fenêtres flottantes ont besoin du cycle de vie de bureau classique.
WPFTsgcWpfDockManagerMême modèle, mêmes panneaux, mêmes événements.
WinFormsTsgcWinFormsDockManagerMême modèle, mêmes panneaux, mêmes événements.
Delphi VCLTsgcVCLDockManagerLe modèle Delphi écrit le même texte JSON de disposition.
Delphi FireMonkeyTsgcFMXDockManagerLe modèle Delphi écrit le même texte JSON de disposition.

Les cinq reposent sur TsgcDockManagerModel, si bien qu'une équipe qui livre une application de bureau Delphi et une application Avalonia garde un seul design de docking et un seul format de disposition. WinForms, WPF et Avalonia sont inclus dans chaque édition sgcUI .NET.

Où le gestionnaire d'ancrage est inclus

Édition Registered

Le gestionnaire d'ancrage, ses fenêtres flottantes, sa zone de documents et la persistance de la disposition font partie de l'édition Registered de sgcNavigation pour .NET. Achetez sgcNavigation .NET comme paquet individuel, ou obtenez-le dans les éditions Standard, Professional et Enterprise de sgcUI .NET, chacune sous licence par développeur.

Paquet Community

Le paquet Community gratuit de sgcNavigation contient le reste de sgcNavigation, comme la barre de navigation et son arbre avec recherche, mais pas le gestionnaire d'ancrage ni la palette de commandes. Utilisez les paquets Registered pour le docking.

sgcNavigation ou la bibliothèque Dock ?

Si vous cherchez du docking Avalonia, vous trouverez aussi Dock, un projet de docking open source pour Avalonia. Cette page ne compare pas les fonctionnalités avec lui, évaluez donc les deux selon vos propres besoins.

DockingShellAvalonia

Un shell avec docking pour Avalonia sous Windows, Linux et macOS : un arbre Explorer à gauche, Properties à droite, Output masqué automatiquement en bas et des documents texte avec onglets épinglés et modifiés.

Ce qu'elle montre

Faites glisser un titre ou un onglet vers les guides, déposez-le loin d'eux pour le faire flotter, ou épinglez un panneau d'outils pour le masquer automatiquement. La palette de commandes (Ctrl+Maj+P) liste une commande Window par panneau, et une case à cocher active le thème sombre.

Persistance de la disposition

La disposition est enregistrée dans DockingShell.layout.json à la fermeture de la fenêtre et chargée au démarrage suivant, et Reset layout revient à la disposition initiale. Un document enregistré reçoit une nouvelle zone de texte via OnRestorePanel.

Où la trouver

Dans les démos sgcUI .NET, dossier Navigation\DockingShellAvalonia, à côté des démos WinForms DockingShell et DockingShellWpf. dotnet run -- --test result.txt lance son autotest.

Voir les démos sgcUI ou lire la rubrique d'aide sur le docking.

Questions sur le docking Avalonia

Puis-je héberger mes propres contrôles Avalonia dans les panneaux d'ancrage ?

Oui. Le Control de chaque TsgcDockPanel est un Control Avalonia ordinaire, un TreeView, un TextBox, un UserControl ou n'importe quelle vue de votre cru. Il devient un enfant du site d'ancrage, son DataContext est donc transmis depuis la fenêtre, et le gestionnaire d'ancrage le dispose et l'affiche tant que son panneau est le panneau actif. Le gestionnaire d'ancrage ne le libère jamais.

Les fenêtres flottantes fonctionnent-elles sous Linux et macOS ?

Les fenêtres flottantes sont des fenêtres Avalonia, elles ont donc besoin du cycle de vie de bureau classique (IClassicDesktopStyleApplicationLifetime), celui qu'utilise une application de bureau Avalonia sous Windows, Linux et macOS. Avec les cycles de vie navigateur et mobile, AllowFloating reste à False et les panneaux restent ancrés.

Comment enregistrer et restaurer la disposition ?

SaveLayout renvoie la disposition sous forme de texte JSON, et SaveLayoutToFile et SaveLayoutToStream l'écrivent. LoadLayout, LoadLayoutFromFile et LoadLayoutFromStream la relisent. Appelez LoadLayout une fois la fenêtre ouverte, car les fenêtres flottantes s'affichent avec la fenêtre. Quand une disposition enregistrée désigne un panneau qui n'existe pas encore, OnRestorePanel vous permet de créer son contrôle ou de le refuser.

Quelle édition inclut le gestionnaire d'ancrage ?

Le gestionnaire d'ancrage fait partie de l'édition Registered de sgcNavigation pour .NET, vendue comme paquet individuel et incluse dans les éditions Standard, Professional et Enterprise de sgcUI .NET. Le paquet Community gratuit de sgcNavigation ne l'inclut pas.

La disposition est-elle compatible avec les versions WinForms, WPF et Delphi ?

TsgcAvaloniaDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager, TsgcVCLDockManager et TsgcFMXDockManager reposent tous sur le même TsgcDockManagerModel, et le modèle .NET écrit un texte JSON identique à celui du modèle Delphi.

Meilleur rapport qualité-prix : All-AccessTous les produits eSeGeCe, Support Premium inclus, à partir de €1,059/an.
Voir les tarifs All-Access

Ajoutez le docking à votre application Avalonia

Ajoutez le paquet Registered sgcNavigation pour Avalonia, placez un TsgcAvaloniaDockManager dans votre fenêtre et ouvrez la démo DockingShellAvalonia à côté de votre application.