C# DockPanelSuite を使った Docking Window アプリの作り方(導入編)

Visual Studio などでもお目にかかるウィンドウをドッキングさせたり、フローティングさせたりする機能。
これと同様の機能を実装してみよう。

docking-window-visual-studio

使用すのは NuGet パッケージ 「DockPanelSuite」。NuGet で検索すればすぐ見つかるのでプロジェクトにインストールする。

現時点での最新版は 3.1.0 のようだが実行時にエラー(例外)などが出たりなどしたため 3.0.6 を使用する。

nuget-DockPanelSuite

環境

Windows10 pro 64bit
Visual Studio 2019
DockPanelSuite 3.0.6
C# Windows フォームアプリケーション(.NET Framework)
.Net framework 4.8

プロジェクトに DockPanelSuite をインストール

NuGet パッケージの管理から対象のプロジェクトにインストールする。
問題なければ参照に「WeifenLuo.WinFormsUI.Docking」が追加される。

DockPanelSuite-visual-studio-add-ref

フォームのデザイナで DockPanel を配置する

デザイナを開いてツールボックスから WeifenLuo.WinFormsUI.Docking ー DockPanel を追加する。

DockPanelSuite-visual-studio-tool-box
DockPanelSuite-add-dock-panel
わかりやすいように DockPanel 領域はクライアント領域より少し小さくした図

追加した DockPanel のプロパティ DocumentStyle を DockingWindow にしておく。

DockPanelSuite-dock-panel-prop

DockPanel 内で管理するフォームを作成する

プロジェクトへの新しい項目の追加で「継承フォーム」を追加する。名前は「Form2」にした。

DockPanelSuite-add-form

継承ピッカーウィンドウが表示されるので「参照」から「WeifenLuo.WinFormsUI.Docking.dll」を選び「DockContent」を選択する。
WeifenLuo.WinFormsUI.Docking.dll はソリューションディレクトリの packages\DockPanelSuite.3.0.6\lib\net40 の中にある。

DockPanelSuite-delect-dock-content

同じ手順で「Form3」「Form4」を作成する。

DockPanel の親フォーム「Form1」のソースを編集する

using WeifenLuo.WinFormsUI.Docking;

public partial class Form1 : Form
{
    // dockPanel1 で管理するフォーム達
    private Form2 form2 = null;
    private Form3 form3 = null;
    private Form4 form4 = null;

    public Form1()
    {
        InitializeComponent();

        // フォーム達を生成して dockPanel1 で表示を開始する
        form2 = new Form2();
        form2.Text = "Form2";
        form2.Show(dockPanel1);

        form3 = new Form3();
        form3.Text = "Form3";
        form3.Show(dockPanel1);

        form4 = new Form4();
        form4.Text = "Form4";
        form4.Show(dockPanel1);

    }

    private void Form1_FormClosed(object sender, FormClosedEventArgs e)
    {
        // 掃除
        form2?.Dispose();
        form3?.Dispose();
        form4?.Dispose();
    }
}

ビルドして実行する

ドッキングやフローティングができるようになった。

DockPanelSuite-exe-test

しかし、このままでは Form4 などを1度閉じてしまうと再表示する手段がない。

次回に続く。 続いた。