Avalonia ドッキングとネイティブドックマネージャー

TsgcAvaloniaDockManager は、Avalonia 12 のウィンドウを IDE のようなワークスペースに変えます。ツールパネルは四辺にドッキングし、中央はタブ付きのドキュメント領域になり、ユーザーはキャプションやタブをドロップガイドへドラッグしたり、パネルを辺へ自動非表示にしたり、専用のウィンドウにフローティングさせたりできます。各パネルには独自の Avalonia コントロールを 1 つ載せられ、配置全体は JSON として保存されます。ドックマネージャーは、sgcUI 2026.11 で新登場した sgcNavigation の一部です。

Avalonia アプリの中のドッキングワークスペース

ウィンドウに配置するコントロールは 1 つだけです。パネルをコードで追加し、それぞれに独自のコントロールを指定すると、ユーザーが配置を整えます。

左に Explorer と Search をタブ表示し、自動非表示の Toolbox ストリップ、4 つのドキュメントタブ、右に Properties、下に Output を配置したドックサイト。Output をドラッグ中に、ドキュメントの右半分にドロップガイドとプレビュー矩形が表示されている
Output パネルをドラッグ中の sgcNavigation ドッキングマネージャー: コンパス、辺のガイド、プレビュー矩形。

ツールパネルとドキュメント

各 TsgcDockPanel は Name、Caption、アイコン、Kind (dpkTool または dpkDocument)、表示する Control を持ちます。ツールパネルは Placement の辺に幅 DockSize で配置され、GroupName が同じパネルは 1 つのタブにまとまります。

独自のコントロール

パネルの内容は通常の 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 を使うと、ドックマネージャーはパネルごとに 1 つの 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 アセンブリはコントロールを 1 つの名前空間 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 の間で追加するため、配置は 1 回だけです。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 の 1 行で、ドックマネージャーを含むアプリのすべての 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 イベントと同様に、これらはコードで代入するデリゲートプロパティです。

1 つのドッキングモデル、5 つの UI フレームワーク

Avalonia のドックマネージャーは、sgcNavigation が WinForms、WPF、Delphi でも使うモデルの 1 つのビューです。

フレームワーク コントロール 備考
Avalonia 12TsgcAvaloniaDockManagernet8.0、net9.0、net10.0 向けの NuGet esegece.sgcNavigation.Avalonia。Windows、Linux、macOS で動作します。フローティングウィンドウにはクラシックデスクトップのライフタイムが必要です。
WPFTsgcWpfDockManager同じモデル、同じパネル、同じイベント。
WinFormsTsgcWinFormsDockManager同じモデル、同じパネル、同じイベント。
Delphi VCLTsgcVCLDockManagerDelphi モデルは同じ JSON レイアウトテキストを書き出します。
Delphi FireMonkeyTsgcFMXDockManagerDelphi モデルは同じ JSON レイアウトテキストを書き出します。

5 つすべてが TsgcDockManagerModel 上で動作するため、Delphi デスクトップアプリと Avalonia アプリを提供するチームは、1 つのドッキング設計と 1 つのレイアウト形式を維持できます。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) はパネルごとに 1 つの 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 ウィンドウなので、クラシックデスクトップのライフタイム (IClassicDesktopStyleApplicationLifetime) が必要です。これは Windows、Linux、macOS 上の Avalonia デスクトップアプリが使うものです。ブラウザーとモバイルのライフタイムでは 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-AccesseSeGeCe の全製品にプレミアムサポートが付いて、年間 €1,059 からご利用いただけます。
All-Access の価格を見る

Avalonia アプリにドッキングを追加

Avalonia 向けの Registered sgcNavigation パッケージを追加し、ウィンドウに TsgcAvaloniaDockManager を配置して、DockingShellAvalonia デモをアプリの隣で開いてください。