Avalonia 도킹과 네이티브 도크 매니저

TsgcAvaloniaDockManager는 Avalonia 12 창을 IDE 스타일의 작업 공간으로 바꿉니다. 도구 패널은 네 면에 도킹되고, 가운데는 탭 문서 영역이며, 사용자는 캡션과 탭을 드롭 가이드로 끌거나, 패널을 가장자리에 자동 숨김하거나, 별도의 창으로 플로팅할 수 있습니다. 각 패널은 사용자의 Avalonia 컨트롤 하나를 담으며, 전체 배치는 JSON으로 저장됩니다. 도크 매니저는 sgcUI 2026.11에서 새로 선보이는 sgcNavigation의 일부입니다.

Avalonia 앱 안의 도킹 작업 공간

창에 컨트롤 하나만 배치하면 됩니다. 코드로 패널을 추가하고 각 패널에 사용자의 컨트롤을 지정하면, 사용자가 직접 배치합니다.

왼쪽에 Explorer와 Search가 탭으로, 자동 숨김 Toolbox 스트립, 문서 탭 4개, 오른쪽에 Properties, 아래쪽에 Output이 있는 도크 사이트. Output을 끄는 동안 문서의 오른쪽 절반에 드롭 가이드와 미리보기 사각형이 표시됨
Output 패널을 끄는 동안의 sgcNavigation 도킹 매니저: 나침반, 가장자리 가이드, 미리보기 사각형.

도구 패널과 문서

각 TsgcDockPanel에는 Name, Caption, 아이콘, Kind (dpkTool 또는 dpkDocument), 표시할 Control이 있습니다. 도구 패널은 Placement 쪽에서 DockSize 너비로 시작하고, GroupName이 같은 패널은 함께 탭으로 묶입니다.

사용자 컨트롤

패널의 내용은 일반 Avalonia Control입니다. 도크 사이트의 논리 및 시각 자식이 되므로 DataContext가 창에서 흘러 들어오며, 해당 패널이 활성인 동안 배치되어 표시됩니다. 숨겨진 패널은 컨트롤을 숨겨진 자식으로 유지합니다.

미리보기가 있는 드롭 가이드

캡션이나 탭을 끄는 동안 포인터 아래 그룹에 나침반이 나타나 그 그룹을 한쪽으로 분할하거나 패널을 탭으로 추가하고, 가장자리 가이드는 사이트 전체의 가장자리에 도킹하며, 강조 색의 미리보기 사각형이 차지할 공간을 보여 줍니다. Esc로 끌기를 취소합니다.

스플리터

그룹은 중첩된 분할 안에 나란히 또는 위아래로 배치되며 사이에 스플리터가 있습니다. 끌면 이웃 그룹이 실시간으로 크기가 조정되고, 모든 그룹은 최소한 MinPanelSize를 유지합니다. SplitterSize는 스플리터의 너비를 설정합니다.

자동 숨김 플라이아웃

핀 버튼은 도구 패널을 해당 쪽의 스트립으로 보냅니다. 탭 위에 AutoHideDelay 밀리초 동안 마우스를 올리거나 클릭하면 패널이 콘텐츠 위로 플라이아웃으로 밀려 나오고, 사용자가 다른 곳에서 작업하면 다시 들어갑니다. 코드에서는 Model.SetAutoHide가 같은 일을 합니다.

플로팅 창

패널을 가이드에서 벗어난 곳에 놓거나, 캡션을 더블 클릭하거나, 메뉴에서 Float를 선택하면 패널이 창이 소유하는 테두리 없는 Avalonia 창으로 이동하며 작업 표시줄에는 나타나지 않습니다. 플로팅 창은 자체 트리를 가지므로 더 많은 패널을 그 안에 도킹할 수 있습니다. 각 플로팅 창은 자신의 모니터 배율을 사용합니다.

문서 그룹

문서 영역에는 고정 탭과 수정된 탭, 닫기 버튼, 새 탭 버튼 (DocumentShowNewButton, OnNewDocument), 탭 목록 버튼이 있는 탭 스트립이 있습니다. 문서 탭을 한쪽 가장자리 영역으로 끌면 새 문서 그룹으로 분할되고, 탭을 더블 클릭하면 해당 그룹이 최대화됩니다.

도크 키와 패널 메뉴

Ctrl+F6은 문서를, Alt+F7은 도구 패널을 순환하고, Shift+Esc는 활성 도구 패널을 숨기며, Alt+Minus는 Float, Dock, Auto Hide, Hide, Close가 있는 패널 메뉴를 엽니다. Ctrl+Tab, Ctrl+W, Ctrl+F4도 도크 키로 처리됩니다. TsgcAvaloniaCommandPalette를 사용하면 도크 매니저가 패널당 Window 명령 하나도 나열합니다.

접근성, RTL, HiDPI

스크린 리더는 UI Automation을 통해 사이트를 "Dock site"라는 이름의 창, 그룹용 창, 스트립용 탭 항목, 스플리터용 범위 값이 있는 구분선으로 인식합니다. FlowDirection을 오른쪽에서 왼쪽으로 설정하면 사이트 전체가 좌우 반전됩니다. 크롬은 창의 렌더링 배율로 그려집니다.

JSON 레이아웃

SaveLayout, SaveLayoutToFile, SaveLayoutToStream이 배치를 기록하고, LoadLayout 메서드가 이를 다시 읽으며 플로팅 창을 화면의 작업 영역 안으로 맞춥니다. JSON 텍스트는 Delphi 모델의 것과 동일합니다. OnRestorePanel은 저장된 레이아웃이 지정했지만 현재 세션에서 아직 열지 않은 패널의 컨트롤을 만듭니다.

Fluent를 포함한 테마

Theme은 도크 매니저를 라이트, 다크, 고대비, 사용자 지정 테마 사이에서 전환하고, AccentColor는 활성 캡션의 강조 색을 설정합니다. sgcUIApplication.ThemePreset을 Fluent 프리셋으로 설정하면 도크 매니저도 다른 모든 sgcUI 컨트롤처럼 WinUI 3 색상으로 그려집니다.

현지화된 텍스트

도크 크롬의 캡션 (Close, Auto Hide, Maximize, Float, Dock, Hide, "No open documents", 스크린 리더가 읽는 이름)은 sgcUILang을 거치며, sgcUI 번역 팩은 스페인어, 독일어, 프랑스어, 이탈리아어, 네덜란드어, 폴란드어, 포르투갈어, 터키어, 일본어, 한국어, 중국어를 지원합니다.

Avalonia 12 창에서의 도킹

FluentTheme을 사용하는 net8.0 기반의 작은 Avalonia 12 앱의 전체 창입니다. 현재 sgcNavigation 소스, 즉 sgcUI 2026.11 코드에 대해 컴파일했으며 오류 0개, 경고 0개입니다.

XAML

sgcUI Avalonia 어셈블리는 컨트롤을 하나의 네임스페이스 URI에 매핑하므로 sgc 접두사로 TsgcAvaloniaDockManager를 찾을 수 있습니다. 도크 매니저가 창을 가득 채웁니다.

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>

패널, 자동 숨김, 저장된 레이아웃

도구 패널 3개와 문서 2개를 BeginUpdate와 EndUpdate 사이에 추가하므로 배치는 한 번만 이루어집니다. Output 패널은 자동 숨김 상태로 시작하고, + 버튼은 새 문서를 열며, 레이아웃은 창을 닫을 때 저장되고 다시 열 때 불러옵니다.

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

Fluent 룩

App.Initialize의 한 줄로 도크 매니저를 포함한 앱의 모든 sgcUI 컨트롤이 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;
}

코드에서는 DockPanel, FloatPanel, ClosePanel, ShowPanel, ActivatePanel이 사용자가 마우스로 하는 동작을 수행합니다. OnPanelDock은 가장 먼저 발생하며 도킹, 플로팅, 자동 숨김 변경을 거부할 수 있고, OnPanelClose는 패널을 열린 상태로 유지할 수 있습니다. 다른 sgcNavigation 이벤트와 마찬가지로 이들은 코드에서 할당하는 델리게이트 속성입니다.

하나의 도킹 모델, 다섯 가지 UI 프레임워크

Avalonia 도크 매니저는 sgcNavigation이 WinForms, WPF, Delphi에서도 사용하는 모델의 한 가지 뷰입니다.

프레임워크 컨트롤 참고
Avalonia 12TsgcAvaloniaDockManagernet8.0, net9.0, net10.0용 NuGet esegece.sgcNavigation.Avalonia, Windows, Linux, macOS에서 동작합니다. 플로팅 창에는 클래식 데스크톱 수명 주기가 필요합니다.
WPFTsgcWpfDockManager같은 모델, 같은 패널, 같은 이벤트.
WinFormsTsgcWinFormsDockManager같은 모델, 같은 패널, 같은 이벤트.
Delphi VCLTsgcVCLDockManagerDelphi 모델은 같은 JSON 레이아웃 텍스트를 기록합니다.
Delphi FireMonkeyTsgcFMXDockManagerDelphi 모델은 같은 JSON 레이아웃 텍스트를 기록합니다.

다섯 가지 모두 TsgcDockManagerModel 위에서 동작하므로, Delphi 데스크톱 앱과 Avalonia 앱을 함께 제공하는 팀은 하나의 도킹 설계와 하나의 레이아웃 형식을 유지할 수 있습니다. WinForms, WPF, Avalonia는 모든 sgcUI .NET 에디션에 포함됩니다.

도킹 매니저가 포함된 곳

Registered 에디션

도킹 매니저와 플로팅 창, 문서 영역, 레이아웃 저장은 .NET용 sgcNavigation의 Registered 에디션에 포함됩니다. sgcNavigation .NET은 단일 패키지로 구매하거나 sgcUI .NET Standard, Professional, Enterprise 에디션으로 받을 수 있으며, 모두 개발자 단위로 라이선스됩니다.

Community 패키지

sgcNavigation의 무료 Community 패키지에는 내비게이션 바와 검색이 있는 트리 등 sgcNavigation의 나머지 기능이 있지만, 도킹 매니저와 명령 팔레트는 없습니다. 도킹에는 Registered 패키지를 사용하세요.

sgcNavigation과 Dock 라이브러리 중 무엇을 선택할까요?

Avalonia 도킹을 검색하면 Avalonia용 오픈 소스 도킹 프로젝트인 Dock도 보게 됩니다. 이 페이지는 기능을 비교하지 않으므로, 두 가지를 직접 요구 사항에 맞게 평가해 보세요.

DockingShellAvalonia

Windows, Linux, macOS의 Avalonia용 도킹 셸: 왼쪽에 Explorer 트리, 오른쪽에 Properties, 아래쪽에 자동 숨김 Output, 고정 탭과 수정된 탭이 있는 텍스트 문서.

보여 주는 내용

캡션이나 탭을 가이드로 끌거나, 가이드에서 벗어난 곳에 놓아 플로팅하거나, 도구 패널을 고정해 자동 숨김할 수 있습니다. 명령 팔레트 (Ctrl+Shift+P)는 패널당 Window 명령 하나를 나열하고, 체크 박스로 다크 테마를 전환합니다.

레이아웃 저장

레이아웃은 창을 닫을 때 DockingShell.layout.json에 저장되어 다음 시작 때 불러오며, Reset layout은 초기 레이아웃으로 되돌립니다. 저장된 문서는 OnRestorePanel을 통해 새 텍스트 상자를 받습니다.

위치

sgcUI .NET 데모의 Navigation\DockingShellAvalonia 폴더에 있으며, WinForms DockingShell 및 DockingShellWpf 옆에 있습니다. dotnet run -- --test result.txt로 자체 점검을 실행합니다.

sgcUI 데모 보기 또는 도킹 도움말 항목 읽기.

Avalonia 도킹 질문

도크 패널에 사용자의 Avalonia 컨트롤을 담을 수 있나요?

예. 모든 TsgcDockPanel의 Control은 일반 Avalonia Control이며, TreeView, TextBox, UserControl 또는 직접 만든 뷰일 수 있습니다. 도크 사이트의 자식이 되므로 DataContext가 창에서 흘러 들어오며, 도크 매니저는 해당 패널이 활성인 동안 이를 배치하고 표시합니다. 도크 매니저는 이를 해제하지 않습니다.

플로팅 창이 Linux와 macOS에서 동작하나요?

플로팅 창은 Avalonia 창이므로 Windows, Linux, macOS의 Avalonia 데스크톱 앱이 사용하는 클래식 데스크톱 수명 주기 (IClassicDesktopStyleApplicationLifetime)가 필요합니다. 브라우저와 모바일 수명 주기에서는 AllowFloating이 False로 유지되고 패널은 도킹된 상태로 남습니다.

레이아웃은 어떻게 저장하고 복원하나요?

SaveLayout은 배치를 JSON 텍스트로 반환하고, SaveLayoutToFile과 SaveLayoutToStream이 이를 기록합니다. LoadLayout, LoadLayoutFromFile, LoadLayoutFromStream이 다시 읽습니다. 플로팅 창은 창과 함께 표시되므로 LoadLayout은 창이 열린 뒤에 호출하세요. 저장된 레이아웃이 아직 없는 패널을 지정하면 OnRestorePanel로 해당 컨트롤을 만들거나 거부할 수 있습니다.

어느 에디션에 도킹 매니저가 포함되나요?

도킹 매니저는 .NET용 sgcNavigation의 Registered 에디션에 포함되며, 단일 패키지로 판매되고 sgcUI .NET Standard, Professional, Enterprise 에디션에도 들어 있습니다. sgcNavigation의 무료 Community 패키지에는 포함되지 않습니다.

레이아웃은 WinForms, WPF, Delphi 버전과 호환되나요?

TsgcAvaloniaDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager, TsgcVCLDockManager, TsgcFMXDockManager는 모두 같은 TsgcDockManagerModel 위에서 동작하며, .NET 모델은 Delphi 모델과 동일한 JSON 텍스트를 기록합니다.

최고의 가성비: All-Access모든 eSeGeCe 제품과 프리미엄 지원이 포함되어 연 €1,059부터 이용할 수 있어요.
All-Access 가격 보기

Avalonia 앱에 도킹 추가하기

Avalonia용 Registered sgcNavigation 패키지를 추가하고, 창에 TsgcAvaloniaDockManager를 배치한 뒤, 앱 옆에서 DockingShellAvalonia 데모를 열어 보세요.