Docking en Avalonia con un gestor de acoplamiento nativo

TsgcAvaloniaDockManager convierte una ventana de Avalonia 12 en un espacio de trabajo al estilo de un IDE. Los paneles de herramientas se acoplan en los cuatro lados, el centro es un área de documentos con pestañas, y el usuario arrastra títulos y pestañas hasta las guías de colocación, oculta automáticamente los paneles en los bordes o los convierte en ventanas flotantes propias. Cada panel aloja uno de tus propios controles de Avalonia, y toda la disposición se guarda como JSON. El gestor de acoplamiento forma parte de sgcNavigation, novedad de sgcUI 2026.11.

Un espacio de trabajo con docking dentro de tu aplicación Avalonia

Un único control colocado en una ventana. Añades los paneles en código, das a cada uno tu propio control, y el usuario los organiza.

Sitio de acoplamiento con Explorer y Search en pestañas a la izquierda, una franja Toolbox de ocultación automática, cuatro pestañas de documentos, Properties a la derecha y Output abajo, con las guías de colocación y el rectángulo de vista previa sobre la mitad derecha de los documentos mientras se arrastra Output
El gestor de docking de sgcNavigation mientras se arrastra el panel Output: la brújula, las guías de borde y el rectángulo de vista previa.

Paneles de herramientas y documentos

Cada TsgcDockPanel tiene un Name, un Caption, un icono, un Kind (dpkTool o dpkDocument) y el Control que muestra. Los paneles de herramientas empiezan en el lado de su Placement, con un ancho de DockSize, y los paneles con el mismo GroupName se agrupan en pestañas.

Tus propios controles

El contenido de un panel es un Control de Avalonia normal. Pasa a ser hijo lógico y visual del sitio de acoplamiento, de modo que el DataContext fluye desde tu ventana, y se organiza y se muestra mientras su panel es el activo. Un panel oculto conserva su control como hijo oculto.

Guías de colocación con vista previa

Mientras se arrastra un título o una pestaña, una brújula sobre el grupo situado bajo el puntero divide ese grupo por un lado o añade el panel como pestaña, las guías de borde lo acoplan en un borde de todo el sitio, y un rectángulo de vista previa en el color de acento muestra el espacio que ocupará. Esc cancela el arrastre.

Divisores

Los grupos se sitúan en divisiones anidadas, una junto a otra o apiladas, con divisores entre ellas. Un arrastre cambia el tamaño de los vecinos en directo, y cada grupo conserva como mínimo MinPanelSize. SplitterSize fija el ancho de los divisores.

Paneles de ocultación automática

El botón de anclar envía un panel de herramientas a la franja de su lado. Al pasar el ratón sobre su pestaña durante AutoHideDelay milisegundos, o al hacer clic en ella, el panel se desliza como un panel flotante sobre el contenido, y vuelve a deslizarse cuando el usuario trabaja en otro sitio. En código, Model.SetAutoHide hace lo mismo.

Ventanas flotantes

Suelta un panel lejos de las guías, haz doble clic en su título o elige Float en su menú, y pasa a una ventana de Avalonia sin bordes que pertenece a tu ventana, fuera de la barra de tareas. Una ventana flotante contiene su propio árbol, de modo que se pueden acoplar más paneles en ella. Cada ventana flotante usa la escala de su propio monitor.

Grupos de documentos

El área de documentos tiene franjas de pestañas con pestañas ancladas y modificadas, botones de cierre, un botón de pestaña nueva (DocumentShowNewButton, OnNewDocument) y un botón con la lista de pestañas. Arrastrar una pestaña de documento hacia un lado la divide en un nuevo grupo de documentos, y un doble clic en una pestaña maximiza su grupo.

Teclas de docking y menús de panel

Ctrl+F6 recorre los documentos, Alt+F7 los paneles de herramientas, Mayús+Esc oculta el panel de herramientas activo y Alt+Menos abre el menú del panel con Float, Dock, Auto Hide, Hide y Close. Ctrl+Tab, Ctrl+W y Ctrl+F4 también se gestionan como teclas de docking. Con TsgcAvaloniaCommandPalette el gestor de acoplamiento también lista un comando Window por panel.

Accesibilidad, RTL y HiDPI

Los lectores de pantalla ven el sitio mediante UI Automation como un panel llamado "Dock site", con paneles para los grupos, elementos de pestaña para las franjas y separadores con un valor de rango para los divisores. Con FlowDirection de derecha a izquierda todo el sitio se refleja. El aspecto se dibuja a la escala de renderizado de la ventana.

Diseño como JSON

SaveLayout, SaveLayoutToFile y SaveLayoutToStream escriben la disposición, los métodos LoadLayout la leen de nuevo y ajustan las ventanas flotantes al área de trabajo de las pantallas. El texto JSON es idéntico al del modelo Delphi. OnRestorePanel crea el control de un panel que un diseño guardado nombra y que tu sesión todavía no ha abierto.

Temas, Fluent incluido

Theme cambia el gestor de acoplamiento entre temas claro, oscuro, de alto contraste y personalizados, y AccentColor fija el acento del título activo. Si pones sgcUIApplication.ThemePreset en el preset Fluent, el gestor de acoplamiento se pinta con los colores de WinUI 3, como cualquier otro control de sgcUI.

Textos localizados

Los textos del marco de docking (Close, Auto Hide, Maximize, Float, Dock, Hide, "No open documents" y los nombres que oyen los lectores de pantalla) pasan por sgcUILang, y los paquetes de traducción de sgcUI cubren español, alemán, francés, italiano, neerlandés, polaco, portugués, turco, japonés, coreano y chino.

Docking en una ventana de Avalonia 12

Esta es la ventana completa de una pequeña aplicación Avalonia 12 sobre net8.0 con FluentTheme. Se compiló contra las fuentes actuales de sgcNavigation, el código de sgcUI 2026.11, con 0 errores y 0 advertencias.

El XAML

Los ensamblados de Avalonia de sgcUI asignan sus controles a un único URI de espacio de nombres, de modo que el prefijo sgc encuentra TsgcAvaloniaDockManager. El gestor de acoplamiento llena la ventana:

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>

Paneles, ocultación automática y el diseño guardado

Se añaden tres paneles de herramientas y dos documentos dentro de BeginUpdate y EndUpdate, de modo que se colocan una sola vez. El panel Output empieza con ocultación automática, el botón + abre un documento nuevo, y el diseño se guarda al cerrar la ventana y se carga cuando se abre de nuevo:

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

El aspecto Fluent

Una línea en App.Initialize cambia todos los controles de sgcUI de la aplicación, incluido el gestor de acoplamiento, 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;
}

En código, DockPanel, FloatPanel, ClosePanel, ShowPanel y ActivatePanel hacen lo que el usuario hace con el ratón. OnPanelDock se dispara primero y puede rechazar un cambio de acoplamiento, de ventana flotante o de ocultación automática, y OnPanelClose puede mantener abierto un panel. Como los demás eventos de sgcNavigation, son propiedades delegado que se asignan en código.

Un modelo de docking, cinco frameworks de interfaz

El gestor de acoplamiento de Avalonia es una vista de un modelo que sgcNavigation también usa en WinForms, WPF y Delphi.

Framework Control Notas
Avalonia 12TsgcAvaloniaDockManagerNuGet esegece.sgcNavigation.Avalonia para net8.0, net9.0 y net10.0, en Windows, Linux y macOS. Las ventanas flotantes necesitan el ciclo de vida de escritorio clásico.
WPFTsgcWpfDockManagerMismo modelo, mismos paneles, mismos eventos.
WinFormsTsgcWinFormsDockManagerMismo modelo, mismos paneles, mismos eventos.
Delphi VCLTsgcVCLDockManagerEl modelo Delphi escribe el mismo texto JSON de diseño.
Delphi FireMonkeyTsgcFMXDockManagerEl modelo Delphi escribe el mismo texto JSON de diseño.

Los cinco funcionan sobre TsgcDockManagerModel, así que un equipo que entrega una aplicación de escritorio Delphi y una aplicación Avalonia mantiene un único diseño de docking y un único formato de diseño. WinForms, WPF y Avalonia vienen en todas las ediciones de sgcUI .NET.

Dónde se incluye el gestor de acoplamiento

Edición Registered

El gestor de acoplamiento, sus ventanas flotantes, el área de documentos y la persistencia del diseño forman parte de la edición Registered de sgcNavigation para .NET. Compra sgcNavigation .NET como paquete individual, u obtenlo en las ediciones Standard, Professional y Enterprise de sgcUI .NET, cada una con licencia por desarrollador.

Paquete Community

El paquete Community gratuito de sgcNavigation tiene el resto de sgcNavigation, como la barra de navegación y su árbol con búsqueda, pero no el gestor de acoplamiento ni la paleta de comandos. Usa los paquetes Registered para el docking.

¿sgcNavigation o la biblioteca Dock?

Si buscas docking para Avalonia también encontrarás Dock, un proyecto de docking de código abierto para Avalonia. Esta página no compara funciones con él, así que evalúa ambos según tus propios requisitos.

DockingShellAvalonia

Un shell con docking para Avalonia en Windows, Linux y macOS: un árbol Explorer a la izquierda, Properties a la derecha, Output con ocultación automática abajo y documentos de texto con pestañas ancladas y modificadas.

Qué muestra

Arrastra un título o una pestaña hasta las guías, suéltalo lejos de ellas para convertirlo en ventana flotante, o ancla un panel de herramientas para ocultarlo automáticamente. La paleta de comandos (Ctrl+Mayús+P) lista un comando Window por panel, y una casilla activa el tema oscuro.

Persistencia del diseño

El diseño se guarda en DockingShell.layout.json al cerrar la ventana y se carga en el siguiente inicio, y Reset layout vuelve al diseño inicial. Un documento guardado recibe un nuevo cuadro de texto mediante OnRestorePanel.

Dónde está

En las demos de sgcUI .NET, carpeta Navigation\DockingShellAvalonia, junto a los DockingShell de WinForms y DockingShellWpf. dotnet run -- --test result.txt ejecuta su autocomprobación.

Ver las demos de sgcUI o leer el tema de ayuda sobre docking.

Preguntas sobre el docking en Avalonia

¿Puedo alojar mis propios controles de Avalonia en los paneles de acoplamiento?

Sí. El Control de cada TsgcDockPanel es un Control de Avalonia normal, un TreeView, un TextBox, un UserControl o cualquier vista propia. Pasa a ser hijo del sitio de acoplamiento, de modo que su DataContext fluye desde la ventana, y el gestor de acoplamiento lo organiza y lo muestra mientras su panel es el activo. El gestor de acoplamiento nunca lo libera.

¿Funcionan las ventanas flotantes en Linux y macOS?

Las ventanas flotantes son ventanas de Avalonia, por lo que necesitan el ciclo de vida de escritorio clásico (IClassicDesktopStyleApplicationLifetime), que es el que usa una aplicación de escritorio Avalonia en Windows, Linux y macOS. Con los ciclos de vida de navegador y móvil, AllowFloating permanece en False y los paneles permanecen acoplados.

¿Cómo guardo y restauro el diseño?

SaveLayout devuelve la disposición como texto JSON, y SaveLayoutToFile y SaveLayoutToStream la escriben. LoadLayout, LoadLayoutFromFile y LoadLayoutFromStream la leen de nuevo. Llama a LoadLayout cuando la ventana ya se haya abierto, porque las ventanas flotantes se muestran junto con la ventana. Cuando un diseño guardado nombra un panel que todavía no existe, OnRestorePanel te permite crear su control o rechazarlo.

¿Qué edición incluye el gestor de acoplamiento?

El gestor de acoplamiento forma parte de la edición Registered de sgcNavigation para .NET, se vende como paquete individual y está incluido en las ediciones Standard, Professional y Enterprise de sgcUI .NET. El paquete Community gratuito de sgcNavigation no lo incluye.

¿Es compatible el diseño con las versiones de WinForms, WPF y Delphi?

TsgcAvaloniaDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager, TsgcVCLDockManager y TsgcFMXDockManager funcionan todos sobre el mismo TsgcDockManagerModel, y el modelo .NET escribe texto JSON idéntico al del modelo Delphi.

La mejor opción: All-AccessTodos los productos de eSeGeCe, con Premium Support incluido, desde €1,059 al año.
Ver precios de All-Access

Añade docking a tu aplicación Avalonia

Añade el paquete Registered de sgcNavigation para Avalonia, coloca un TsgcAvaloniaDockManager en tu ventana y abre la demo DockingShellAvalonia junto a tu aplicación.