Docking no Avalonia com um gerenciador de docking nativo

O TsgcAvaloniaDockManager transforma uma janela do Avalonia 12 em um espaço de trabalho no estilo de uma IDE. Os painéis de ferramentas se acoplam nos quatro lados, o centro é uma área de documentos em abas, e o usuário arrasta legendas e abas para as guias de soltar, oculta painéis automaticamente nas bordas ou os transforma em janelas flutuantes. Cada painel hospeda um dos seus próprios controles Avalonia, e todo o arranjo é salvo como JSON. O gerenciador de docking faz parte do sgcNavigation, novidade no sgcUI 2026.11.

Um espaço de trabalho com docking dentro da sua aplicação Avalonia

Um controle colocado em uma janela. Você adiciona os painéis em código, dá a cada um o seu próprio controle, e o usuário os organiza.

Área de docking com Explorer e Search em abas à esquerda, uma faixa Toolbox com ocultação automática, quatro abas de documento, Properties à direita e Output na parte inferior, com as guias de soltar e o retângulo de pré-visualização na metade direita dos documentos enquanto Output é arrastado
O gerenciador de docking do sgcNavigation enquanto o painel Output é arrastado: a bússola, as guias de borda e o retângulo de pré-visualização.

Painéis de ferramentas e documentos

Cada TsgcDockPanel tem um Name, um Caption, um ícone, um Kind (dpkTool ou dpkDocument) e o Control que exibe. Os painéis de ferramentas começam no lado do seu Placement, com largura DockSize, e os painéis com o mesmo GroupName formam abas juntos.

Os seus próprios controles

O conteúdo de um painel é um Control comum do Avalonia. Ele se torna filho lógico e visual da área de docking, de modo que o DataContext flui da sua janela, e é organizado e exibido enquanto o seu painel é o ativo. Um painel oculto mantém o seu controle como filho oculto.

Guias de soltar com pré-visualização

Enquanto uma legenda ou uma aba é arrastada, uma bússola no grupo sob o ponteiro divide esse grupo em um lado ou coloca o painel em abas dentro dele, as guias de borda o acoplam em uma borda de toda a área, e um retângulo de pré-visualização na cor de destaque mostra o espaço que ele ocupará. Esc cancela o arraste.

Divisores

Os grupos ficam em divisões aninhadas, lado a lado ou empilhados, com divisores entre eles. Um arraste redimensiona os vizinhos em tempo real, e todo grupo mantém pelo menos MinPanelSize. SplitterSize define a largura dos divisores.

Painéis com ocultação automática

O botão de fixar envia um painel de ferramentas para a faixa do seu lado. Passar o ponteiro sobre a aba por AutoHideDelay milissegundos, ou clicar nela, desliza o painel como um painel suspenso sobre o conteúdo, e ele volta a deslizar quando o usuário trabalha em outro lugar. Em código, Model.SetAutoHide faz o mesmo.

Janelas flutuantes

Solte um painel longe das guias, dê um duplo clique na legenda ou escolha Float no menu, e ele passa para uma janela Avalonia sem borda pertencente à sua janela, fora da barra de tarefas. Uma janela flutuante tem uma árvore própria, de modo que mais painéis se acoplam nela. Cada janela flutuante usa a escala do seu próprio monitor.

Grupos de documentos

A área de documentos tem faixas de abas com abas fixadas e modificadas, botões de fechar, um botão de nova aba (DocumentShowNewButton, OnNewDocument) e um botão de lista de abas. Arrastar uma aba de documento para o braço de um lado a divide em um novo grupo de documentos, e um duplo clique em uma aba maximiza o seu grupo.

Teclas de docking e menus de painel

Ctrl+F6 alterna entre os documentos, Alt+F7 entre os painéis de ferramentas, Shift+Esc oculta o painel de ferramentas ativo e Alt+Minus abre o menu do painel com Float, Dock, Auto Hide, Hide e Close. Ctrl+Tab, Ctrl+W e Ctrl+F4 também são tratados como teclas de docking. Com o TsgcAvaloniaCommandPalette, o gerenciador de docking também lista um comando Window por painel.

Acessibilidade, RTL e HiDPI

Os leitores de tela veem a área pelo UI Automation como um painel chamado "Dock site", com painéis para os grupos, itens de aba para as faixas e separadores com valor de intervalo para os divisores. Com FlowDirection da direita para a esquerda, toda a área é espelhada. A interface é desenhada na escala de renderização da janela.

Layout como JSON

SaveLayout, SaveLayoutToFile e SaveLayoutToStream gravam o arranjo, os métodos LoadLayout o leem de volta e limitam as janelas flutuantes à área de trabalho das telas. O texto JSON é idêntico ao do modelo Delphi. OnRestorePanel cria o controle de um painel que um layout salvo cita e que a sua sessão ainda não abriu.

Temas, incluindo Fluent

Theme alterna o gerenciador de docking entre os temas claro, escuro, de alto contraste e personalizados, e AccentColor define o destaque da legenda ativa. Defina sgcUIApplication.ThemePreset com o preset Fluent e o gerenciador de docking passa a usar as cores do WinUI 3, como todos os outros controles do sgcUI.

Textos localizados

As legendas da interface de docking (Fechar, Ocultar automaticamente, Maximizar, Flutuar, Acoplar, Ocultar, "Nenhum documento aberto" e os nomes que os leitores de tela anunciam) passam pelo sgcUILang, e os pacotes de tradução do sgcUI cobrem espanhol, alemão, francês, italiano, holandês, polonês, português, turco, japonês, coreano e chinês.

Docking em uma janela Avalonia 12

Esta é a janela completa de um pequeno aplicativo Avalonia 12 em net8.0 com FluentTheme. Ela foi compilada contra as fontes atuais do sgcNavigation, o código do sgcUI 2026.11, com 0 erros e 0 avisos.

O XAML

Os assemblies Avalonia do sgcUI mapeiam os seus controles para um único URI de namespace, de modo que o prefixo sgc encontra o TsgcAvaloniaDockManager. O gerenciador de docking preenche a janela:

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>

Painéis, ocultação automática e o layout salvo

Três painéis de ferramentas e dois documentos são adicionados entre BeginUpdate e EndUpdate, para que sejam posicionados uma só vez. O painel Output começa oculto automaticamente, o botão + abre um novo documento, e o layout é salvo quando a janela fecha e carregado quando ela abre de novo:

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

O visual Fluent

Uma linha em App.Initialize muda todos os controles sgcUI do aplicativo, incluindo o gerenciador de docking, para o 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;
}

Em código, DockPanel, FloatPanel, ClosePanel, ShowPanel e ActivatePanel fazem o que o usuário faz com o mouse. OnPanelDock dispara primeiro e pode recusar uma mudança de acoplamento, de janela flutuante ou de ocultação automática, e OnPanelClose pode manter um painel aberto. Como os outros eventos do sgcNavigation, são propriedades de delegate atribuídas em código.

Um modelo de docking, cinco frameworks de interface

O gerenciador de docking do Avalonia é uma visão de um modelo que o sgcNavigation também usa no WinForms, no WPF e no Delphi.

Framework Controle Observações
Avalonia 12TsgcAvaloniaDockManagerNuGet esegece.sgcNavigation.Avalonia para net8.0, net9.0 e net10.0, no Windows, Linux e macOS. As janelas flutuantes exigem o ciclo de vida clássico de desktop.
WPFTsgcWpfDockManagerMesmo modelo, mesmos painéis, mesmos eventos.
WinFormsTsgcWinFormsDockManagerMesmo modelo, mesmos painéis, mesmos eventos.
Delphi VCLTsgcVCLDockManagerO modelo Delphi grava o mesmo texto de layout JSON.
Delphi FireMonkeyTsgcFMXDockManagerO modelo Delphi grava o mesmo texto de layout JSON.

Os cinco rodam sobre o TsgcDockManagerModel, de modo que uma equipe que entrega um aplicativo desktop Delphi e um aplicativo Avalonia mantém um único design de docking e um único formato de layout. WinForms, WPF e Avalonia vêm em todas as edições .NET do sgcUI.

Onde o gerenciador de docking está incluído

Edição Registered

O gerenciador de docking, as suas janelas flutuantes, a área de documentos e a persistência do layout fazem parte da edição Registered do sgcNavigation para .NET. Compre o sgcNavigation .NET como um pacote único, ou obtenha-o nas edições Standard, Professional e Enterprise do sgcUI .NET, cada uma licenciada por desenvolvedor.

Pacote Community

O pacote Community gratuito do sgcNavigation tem o restante do sgcNavigation, como a barra de navegação e a sua árvore com busca, mas não o gerenciador de docking nem a paleta de comandos. Use os pacotes Registered para o docking.

sgcNavigation ou a biblioteca Dock?

Se você pesquisar docking no Avalonia, também encontrará o Dock, um projeto de docking de código aberto para o Avalonia. Esta página não compara recursos com ele, então avalie os dois de acordo com os seus próprios requisitos.

DockingShellAvalonia

Um shell de docking para o Avalonia no Windows, Linux e macOS: uma árvore Explorer à esquerda, Properties à direita, o Output com ocultação automática na parte inferior e documentos de texto com abas fixadas e modificadas.

O que ela mostra

Arraste uma legenda ou uma aba até as guias, solte-a longe delas para torná-la flutuante, ou fixe um painel de ferramentas para ocultá-lo automaticamente. A paleta de comandos (Ctrl+Shift+P) lista um comando Window por painel, e uma caixa de seleção alterna o tema escuro.

Persistência do layout

O layout é salvo em DockingShell.layout.json quando a janela fecha e carregado na próxima inicialização, e Reset layout volta ao inicial. Um documento salvo recebe uma nova caixa de texto por meio de OnRestorePanel.

Onde está

Nas demos do sgcUI .NET, pasta Navigation\DockingShellAvalonia, ao lado dos DockingShell do WinForms e DockingShellWpf. dotnet run -- --test result.txt executa a sua autoverificação.

Veja as demos do sgcUI ou leia o tópico de ajuda sobre docking.

Perguntas sobre docking no Avalonia

Posso hospedar meus próprios controles Avalonia nos painéis de docking?

Sim. O Control de todo TsgcDockPanel é um Control comum do Avalonia, um TreeView, um TextBox, um UserControl ou qualquer view sua. Ele se torna filho da área de docking, de modo que o seu DataContext flui da janela, e o gerenciador de docking o organiza e o exibe enquanto o seu painel é o ativo. O gerenciador de docking nunca o libera.

As janelas flutuantes funcionam no Linux e no macOS?

As janelas flutuantes são janelas Avalonia, portanto exigem o ciclo de vida clássico de desktop (IClassicDesktopStyleApplicationLifetime), que é o que um aplicativo desktop Avalonia usa no Windows, Linux e macOS. Nos ciclos de vida de navegador e de dispositivos móveis, AllowFloating permanece False e os painéis permanecem acoplados.

Como salvo e restauro o layout?

SaveLayout retorna o arranjo como texto JSON, e SaveLayoutToFile e SaveLayoutToStream o gravam. LoadLayout, LoadLayoutFromFile e LoadLayoutFromStream o leem de volta. Chame LoadLayout depois que a janela abrir, porque as janelas flutuantes aparecem com a janela. Quando um layout salvo cita um painel que ainda não existe, OnRestorePanel permite criar o seu controle ou recusá-lo.

Qual edição inclui o gerenciador de docking?

O gerenciador de docking faz parte da edição Registered do sgcNavigation para .NET, vendida como pacote único e incluída nas edições Standard, Professional e Enterprise do sgcUI .NET. O pacote Community gratuito do sgcNavigation não o inclui.

O layout é compatível com as versões WinForms, WPF e Delphi?

TsgcAvaloniaDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager, TsgcVCLDockManager e TsgcFMXDockManager rodam todos sobre o mesmo TsgcDockManagerModel, e o modelo .NET grava um texto JSON idêntico ao do modelo Delphi.

Melhor custo-benefício: All-AccessTodos os produtos da eSeGeCe, com Suporte Premium incluído, a partir de €1,059/ano.
Ver preços do All-Access

Adicione docking à sua aplicação Avalonia

Adicione o pacote Registered do sgcNavigation para Avalonia, coloque um TsgcAvaloniaDockManager na sua janela e abra a demo DockingShellAvalonia ao lado da sua aplicação.