IgbDockManager – ペインが最大化されたかどうかを検知する

IgbDockManager のペインに備わっている最大化ボタンがクリックされてペインが最大化されたり、あるいは最大化が解除されたりしたことを検知するには、以下のように実装することで実現可能です。

まず、IgbDockManager によってレンダリングされる igc-dockmanager 要素は、現在最大化しているペインへの参照を返す maximizedPane というプロパティを公開しています (最大化しているペインが存在しない場合は maximizedPane プロパティは null を返します)。この igc-dockmanager 要素の maximizedPane プロパティを Blazor から参照できるようにします。
そのためには 別途 JavaScript プログラムを用意して、Blazor の JavaScript 相互運用機能と組み合わせて実現します。例えば下記のような JavaScript ファイルを作成、配置しておきます。

// helper.js
export const getMaximizedPane = (selector) => {
  const dockManagerContainer = document.querySelector(selector);
  const dockManager = dockManagerContainer?.querySelector("igc-dockmanager");
  return dockManager?.maximizedPane;
}

次に、IgbDockManager のクリックイベントを捕捉し (イベントバブリングの仕様により、IgbDockManager 内のあらゆるクリックイベントが捕捉されます)、そのクリックイベントハンドラにて、igc-dockmanager 要素の maximizedPane プロパティが null であるか否かの変更を監視します。そうすることで、
・ 前回クリック時までは maximizedPane プロパティが null だったのが、今回クリックで非 null になった場合は、ペインが最大化された、
・ 前回クリック時までは非 null だったのが、今回クリックで null になった場合は、最大化されたペインがいなくなった (最大化されたペインの、最小化ボタン・ピンボタン・閉じるボタンのいずれかがクリックされた)
と判断でき、ペインの最大化状態の変更を検知できます。
例えば以下のように、Blazor のコンポーネントを実装できます。

@* *.razor *@
@inject IJSRuntime JSRuntime

<IgbDockManager id="dockmanager1" @onclick="OnClickDockManager" ...>
    ...
</IgbDockManager>

@code 
{
  // 前回クリック時に最大化されていたペインを覚えておくフィールド変数
  private IgbContentPane? _MaximizedPane = null;

  // DockManager 内でクリックが発生すると呼び出されます。
  private async Task OnClickDockManager()
  {
    // JavaScript 相互運用機能を介して、igc-component 要素の
    // maximizedPane プロパティの値を取得します。
    await using var module = await this.JSRuntime
                  .InvokeAsync<IJSObjectReference>("import", "./helper.js");
    var maximizedPane = await module.InvokeAsync<IgbContentPane?>(
                                       "getMaximizedPane", "#dockmanager1");

    if (_MaximizedPane == null && maximizedPane != null)
    {
      // 何も最大化されていない状態から、最大化された場合
      _MaximizedPane = maximizedPane;
    }

    else if (_MaximizedPane != null && maximizedPane == null)
    {
      // 最大化されている状態から、何も最大化されていなくなった場合
      _MaximizedPane = null;
    }
}

なお、上記サンプルコードは、要点を強調するために実装を簡略化しています。例えば上記サンプルコードでは、JavaScript ファイルを毎回読み込んでは破棄していますが、実際上は、読み込んだ JavaScript ファイル (JavaScript モジュール) はフィールド変数にキャッシュしておき、コンポーネントが破棄されるときに破棄するようにすべきです。
そのような実装も組み込んだ、完全に動作する Blazor WebAssembly サンプルプログラムのソースコード “KB10021_BlazorWasmApp.zip” を以下に添付していますので、実際に作り込みされる際には、こちらをご参照ください。

その他、Ignite UI for Blazor のドックマネージャー (Dock Manager) を使った実装例につきましては、下記リンク先のブログ記事もあわせてご参照ください。
ドックマネージャーによる高度なレイアウト機能を備えた、コンポーネントを動的に追加できる Blazor アプリケーションを作る (前編) – インフラジスティックス・ジャパン株式会社Blog (infragistics.com)