Docking in Avalonia con un gestore di ancoraggio nativo

TsgcAvaloniaDockManager trasforma una finestra Avalonia 12 in uno spazio di lavoro in stile IDE. I pannelli strumenti si ancorano sui quattro lati, il centro è un'area documenti a schede, e l'utente trascina titoli e schede sulle guide di rilascio, nasconde automaticamente i pannelli ai bordi o li fa fluttuare in finestre proprie. Ogni pannello ospita uno dei tuoi controlli Avalonia, e l'intera disposizione viene salvata come JSON. Il gestore di ancoraggio fa parte di sgcNavigation, novità di sgcUI 2026.11.

Uno spazio di lavoro con docking dentro la tua app Avalonia

Un solo controllo posto in una finestra. Aggiungi i pannelli nel codice, dai a ciascuno il tuo controllo, e l'utente li dispone.

Sito di ancoraggio con Explorer e Search a schede a sinistra, una barra Toolbox nascosta automaticamente, quattro schede di documenti, Properties a destra e Output in basso, con le guide di rilascio e il rettangolo di anteprima sulla metà destra dei documenti mentre si trascina Output
Il gestore di docking di sgcNavigation mentre si trascina il pannello Output: la bussola, le guide di bordo e il rettangolo di anteprima.

Pannelli strumenti e documenti

Ogni TsgcDockPanel ha un Name, una Caption, un'icona, un Kind (dpkTool o dpkDocument) e il Control che mostra. I pannelli strumenti partono dal lato del loro Placement, larghi DockSize, e i pannelli con lo stesso GroupName si raggruppano in schede.

I tuoi controlli

Il contenuto di un pannello è un normale Control di Avalonia. Diventa figlio logico e visuale del sito di ancoraggio, quindi il DataContext arriva dalla tua finestra, e viene disposto e mostrato finché il suo pannello è quello attivo. Un pannello nascosto mantiene il suo controllo come figlio nascosto.

Guide di rilascio con anteprima

Mentre si trascina un titolo o una scheda, una bussola sul gruppo sotto il puntatore divide quel gruppo su un lato o vi inserisce il pannello come scheda, le guide di bordo lo ancorano a un bordo dell'intero sito, e un rettangolo di anteprima nel colore di accento mostra lo spazio che occuperà. Esc annulla il trascinamento.

Divisori

I gruppi stanno in divisioni annidate, affiancate o impilate, con divisori tra loro. Un trascinamento ridimensiona i vicini in tempo reale, e ogni gruppo mantiene almeno MinPanelSize. SplitterSize imposta la larghezza dei divisori.

Pannelli a comparsa con nascondi automaticamente

Il pulsante di fissaggio manda un pannello strumenti sulla barra del suo lato. Passando sulla sua scheda per AutoHideDelay millisecondi, o facendo clic su di essa, il pannello scorre fuori come pannello a comparsa sopra il contenuto, e rientra quando l'utente lavora altrove. Nel codice, Model.SetAutoHide fa lo stesso.

Finestre mobili

Rilascia un pannello lontano dalle guide, fai doppio clic sul suo titolo o scegli Float nel suo menu, e passa a una finestra Avalonia senza bordi di proprietà della tua finestra, fuori dalla barra delle applicazioni. Una finestra mobile contiene un albero proprio, quindi altri pannelli si ancorano al suo interno. Ogni finestra mobile usa la scala del proprio monitor.

Gruppi di documenti

L'area documenti ha barre di schede con schede fissate e modificate, pulsanti di chiusura, un pulsante per una nuova scheda (DocumentShowNewButton, OnNewDocument) e un pulsante con l'elenco delle schede. Trascinando una scheda di documento verso un lato la si divide in un nuovo gruppo di documenti, e un doppio clic su una scheda massimizza il suo gruppo.

Tasti di docking e menu dei pannelli

Ctrl+F6 scorre i documenti, Alt+F7 i pannelli strumenti, Maiusc+Esc nasconde il pannello strumenti attivo e Alt+Meno apre il menu del pannello con Float, Dock, Auto Hide, Hide e Close. Anche Ctrl+Tab, Ctrl+W e Ctrl+F4 sono gestiti come tasti di docking. Con TsgcAvaloniaCommandPalette il gestore di ancoraggio elenca anche un comando Window per pannello.

Accessibilità, RTL e HiDPI

Gli screen reader vedono il sito tramite UI Automation come un riquadro chiamato "Dock site", con riquadri per i gruppi, elementi scheda per le barre e separatori con un valore di intervallo per i divisori. Con FlowDirection da destra a sinistra l'intero sito viene rispecchiato. L'aspetto grafico viene disegnato alla scala di rendering della finestra.

Layout come JSON

SaveLayout, SaveLayoutToFile e SaveLayoutToStream scrivono la disposizione, i metodi LoadLayout la rileggono e riportano le finestre mobili nell'area di lavoro degli schermi. Il testo JSON è identico a quello del modello Delphi. OnRestorePanel crea il controllo di un pannello che un layout salvato nomina e che la tua sessione non ha ancora aperto.

Temi, Fluent incluso

Theme fa passare il gestore di ancoraggio tra temi chiaro, scuro, ad alto contrasto e personalizzati, e AccentColor imposta l'accento del titolo attivo. Imposta sgcUIApplication.ThemePreset sul preset Fluent e il gestore di ancoraggio si disegna con i colori di WinUI 3, come ogni altro controllo sgcUI.

Testi localizzati

Le etichette dell'aspetto grafico del docking (Close, Auto Hide, Maximize, Float, Dock, Hide, "No open documents" e i nomi che sentono gli screen reader) passano da sgcUILang, e i pacchetti di traduzione di sgcUI coprono spagnolo, tedesco, francese, italiano, olandese, polacco, portoghese, turco, giapponese, coreano e cinese.

Docking in una finestra Avalonia 12

Questa è la finestra completa di una piccola app Avalonia 12 su net8.0 con FluentTheme. È stata compilata con i sorgenti attuali di sgcNavigation, il codice di sgcUI 2026.11, con 0 errori e 0 avvisi.

Il XAML

Gli assembly Avalonia di sgcUI associano i loro controlli a un unico URI di namespace, quindi il prefisso sgc trova TsgcAvaloniaDockManager. Il gestore di ancoraggio riempie la finestra:

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>

Pannelli, nascondi automaticamente e layout salvato

Tre pannelli strumenti e due documenti vengono aggiunti tra BeginUpdate e EndUpdate, quindi vengono posizionati una sola volta. Il pannello Output parte nascosto automaticamente, il pulsante + apre un nuovo documento, e il layout viene salvato alla chiusura della finestra e caricato alla riapertura:

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

L'aspetto Fluent

Una riga in App.Initialize porta tutti i controlli sgcUI dell'app, gestore di ancoraggio incluso, al preset 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;
}

Nel codice, DockPanel, FloatPanel, ClosePanel, ShowPanel e ActivatePanel fanno ciò che l'utente fa con il mouse. OnPanelDock scatta per primo e può rifiutare un ancoraggio, un passaggio a finestra mobile o una modifica del nascondi automaticamente, e OnPanelClose può mantenere aperto un pannello. Come gli altri eventi di sgcNavigation, sono proprietà delegate assegnate nel codice.

Un modello di docking, cinque framework UI

Il gestore di ancoraggio di Avalonia è una vista di un modello che sgcNavigation usa anche su WinForms, WPF e Delphi.

Framework Controllo Note
Avalonia 12TsgcAvaloniaDockManagerNuGet esegece.sgcNavigation.Avalonia per net8.0, net9.0 e net10.0, su Windows, Linux e macOS. Le finestre mobili richiedono il ciclo di vita desktop classico.
WPFTsgcWpfDockManagerStesso modello, stessi pannelli, stessi eventi.
WinFormsTsgcWinFormsDockManagerStesso modello, stessi pannelli, stessi eventi.
Delphi VCLTsgcVCLDockManagerIl modello Delphi scrive lo stesso testo JSON del layout.
Delphi FireMonkeyTsgcFMXDockManagerIl modello Delphi scrive lo stesso testo JSON del layout.

Tutti e cinque funzionano su TsgcDockManagerModel, quindi un team che distribuisce un'app desktop Delphi e un'app Avalonia mantiene un solo design di docking e un solo formato di layout. WinForms, WPF e Avalonia sono inclusi in ogni edizione sgcUI .NET.

Dove è incluso il gestore di ancoraggio

Edizione Registered

Il gestore di ancoraggio, le sue finestre mobili, l'area documenti e la persistenza del layout fanno parte dell'edizione Registered di sgcNavigation per .NET. Acquista sgcNavigation .NET come pacchetto singolo, oppure ottienilo nelle edizioni Standard, Professional ed Enterprise di sgcUI .NET, ciascuna con licenza per sviluppatore.

Pacchetto Community

Il pacchetto Community gratuito di sgcNavigation contiene il resto di sgcNavigation, come la barra di navigazione e il suo albero con ricerca, ma non il gestore di ancoraggio né la palette dei comandi. Usa i pacchetti Registered per il docking.

sgcNavigation o la libreria Dock?

Se cerchi docking per Avalonia troverai anche Dock, un progetto di docking open source per Avalonia. Questa pagina non confronta le funzioni con esso, quindi valuta entrambi in base ai tuoi requisiti.

DockingShellAvalonia

Una shell con docking per Avalonia su Windows, Linux e macOS: un albero Explorer a sinistra, Properties a destra, Output nascosto automaticamente in basso e documenti di testo con schede fissate e modificate.

Cosa mostra

Trascina un titolo o una scheda sulle guide, rilascialo lontano da esse per farlo fluttuare, oppure fissa un pannello strumenti per nasconderlo automaticamente. La palette dei comandi (Ctrl+Maiusc+P) elenca un comando Window per pannello, e una casella di controllo attiva il tema scuro.

Persistenza del layout

Il layout viene salvato in DockingShell.layout.json alla chiusura della finestra e caricato al successivo avvio, e Reset layout torna a quello iniziale. Un documento salvato riceve una nuova casella di testo tramite OnRestorePanel.

Dove si trova

Nelle demo di sgcUI .NET, cartella Navigation\DockingShellAvalonia, accanto alle demo WinForms DockingShell e DockingShellWpf. dotnet run -- --test result.txt esegue il suo autotest.

Vedi le demo di sgcUI oppure leggi l'argomento della guida sul docking.

Domande sul docking in Avalonia

Posso ospitare i miei controlli Avalonia nei pannelli di ancoraggio?

Sì. Il Control di ogni TsgcDockPanel è un normale Control di Avalonia, un TreeView, una TextBox, uno UserControl o qualsiasi vista tua. Diventa figlio del sito di ancoraggio, quindi il suo DataContext arriva dalla finestra, e il gestore di ancoraggio lo dispone e lo mostra finché il suo pannello è quello attivo. Il gestore di ancoraggio non lo libera mai.

Le finestre mobili funzionano su Linux e macOS?

Le finestre mobili sono finestre Avalonia, quindi richiedono il ciclo di vita desktop classico (IClassicDesktopStyleApplicationLifetime), che è quello usato da un'app desktop Avalonia su Windows, Linux e macOS. Con i cicli di vita browser e mobile, AllowFloating resta False e i pannelli restano ancorati.

Come salvo e ripristino il layout?

SaveLayout restituisce la disposizione come testo JSON, e SaveLayoutToFile e SaveLayoutToStream la scrivono. LoadLayout, LoadLayoutFromFile e LoadLayoutFromStream la rileggono. Chiama LoadLayout dopo che la finestra è stata aperta, perché le finestre mobili vengono mostrate con la finestra. Quando un layout salvato nomina un pannello che non esiste ancora, OnRestorePanel ti permette di creare il suo controllo o di rifiutarlo.

Quale edizione include il gestore di ancoraggio?

Il gestore di ancoraggio fa parte dell'edizione Registered di sgcNavigation per .NET, venduta come pacchetto singolo e inclusa nelle edizioni Standard, Professional ed Enterprise di sgcUI .NET. Il pacchetto Community gratuito di sgcNavigation non lo include.

Il layout è compatibile con le versioni WinForms, WPF e Delphi?

TsgcAvaloniaDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager, TsgcVCLDockManager e TsgcFMXDockManager funzionano tutti sullo stesso TsgcDockManagerModel, e il modello .NET scrive testo JSON identico a quello del modello Delphi.

La scelta più conveniente: All-AccessTutti i prodotti eSeGeCe, con Supporto Premium incluso, a partire da €1,059/anno.
Vedi i prezzi All-Access

Aggiungi il docking alla tua app Avalonia

Aggiungi il pacchetto Registered sgcNavigation per Avalonia, inserisci un TsgcAvaloniaDockManager nella tua finestra e apri la demo DockingShellAvalonia accanto alla tua app.