Ignite UI for Blazor のドックマネージャー (IgbDockManager) において、指定した ContentId を持つペインを、コードから最大化したり、あるいはドックマネージャーの最大化の状態を解除したりするには、ドックマネージャーの “MaximizedPane” プロパティに、目的のペインのオブジェクトを設定する、または null 値を設定することで実現可能です。
ただし本記事作成時点では、Blazor のコード側からの操作にはいくつか制約があるため、すべてのシナリオに対応できるようにするためには、JavaScript プログラムを追加して、JavaScript 側から、Ignite UI for Blazor のドックマネージャー (IgbDockManager) がレンダリングする <igc-dockmanager> 要素に対して直接の操作を行なう必要があります。
例えば下記のような JavaScript ファイルを配置して、
// helper.js
/**
* 第1引数に指定されたペインの集合を再帰的に検索し、第2引数に指定された contentId を
* 持つペインのレイアウトオブジェクトを探し出して返します。見つからない場合は null が
* 返ります。
*/
const findPane = (panes, contentId) => {
for (const pane of panes) {
if (pane.type === "contentPane") {
if (pane.contentId === contentId) return pane;
}
else if (typeof (pane.panes) !== "undefined") {
return findPane(pane.panes, contentId);
}
}
return null;
}
/**
* 第1引数に指定された CSS セレクタで指定される要素の中から、igc-dockmanager 要素を
* 探し出し、第2引数に指定された contentId を持つペインを最大化します。第2引数
* contentId に null を指定した場合は、最大化を解除します。
*/
export const setMaximizedPane = (selector, contentId) => {
// 操作対象の igc-dockmanager 要素を探し当てます
const dockManagerContainer = document.querySelector(selector);
const dockManager = dockManagerContainer?.querySelector(
"igc-dockmanager");
// contentId に null を指定された場合は、DockManager の maximizedPane プロパ
// ティに null を設定することで、最大化を解除します。
if (contentId === null) dockManager.maximizedPane = null;
else {
// DockManager の layout プロパティ以下にツリー構造で格納されているレイアウト
// オブジェクト群から、目的の contentId を持つペインのレイアウトオブジェクトを
// 探し出します。
const panes = [...(dockManager.layout.rootPane?.panes || []),
...(dockManager.layout.floatingPanes || []) ];
const pane = findPane(panes, contentId);
// 最大化対象のレイアウトオブジェクトが見つかったら、いったん、DockManager の
// アクティブ化と最大化を確実に解除してから、対象のレイアウトオブジェクトをアク
// ティブ化して、それから、最大化ペインに指定することで、確実に最大化します。
if (pane !== null) {
dockManager.maximizedPane = null;
dockManager.activePane = null;
dockManager.activePane = pane;
dockManager.maximizedPane = pane;
}
}
}
こうして配置した JavaScript 中でエクスポートされている setMaximizedPane 関数を、Blazor 側から JavaScript 相互運用機能を使って呼び出すことで、指定した ContentId を持つペインを最大化したり、あるいは最大化を解除したりすることができます。下記はその実装例です。
@* *.razor *@
@inject IJSRuntime JSRuntime
<IgbDockManager id="dockmanager1" ...>
...
</IgbDockManager>
<IgbButton @onclick="OnClickMaximizePane1">
Pane 1 を最大化
</IgbButton>
@code
{
// [Pane 1 を最大化] ボタンがクリックされたときに呼び出されます。
private async Task OnClickMaximizePane1()
{
// JavaScript 相互運用機能を介して、igc-component 要素の maximizedPane
// プロパティに、指定した ContentId (ここでは "pane1") を持つペインを設定
// することで最大化します。
await using var module = await this.JSRuntime
.InvokeAsync<IJSObjectReference>("import", "./helper.js");
await module.InvokeVoidAsync(
"setMaximizedPane", "#dockmanager1", "pane1");
}
なお、上記サンプルコードは、要点を強調するために実装を簡略化しています。例えば上記サンプルコードでは、JavaScript ファイルを毎回読み込んでは破棄していますが、実際上は、読み込んだ JavaScript ファイル (JavaScript モジュール) はフィールド変数にキャッシュしておき、コンポーネントが破棄されるときに破棄するようにすべきです。
そのような実装も組み込んだ、完全に動作する Blazor WebAssembly サンプルプログラムのソースコード “KB10081_BlazorWasmApp.zip” を以下に添付します。実際に作り込みされる際には、こちらをご参照ください。
また、この方法でコードからドックマネージャー内のペインを最大化したり最大化を解除したりした場合は、KB10021「IgbDockManager – ペインが最大化されたかどうかを検知する」でご紹介しているドックマネージャーの最大化状態の変更検知は起動されませんので、その点ご注意ください。
その他、IgbDockManager を使った実装例につきましては、下記リンク先のブログ記事もあわせてご参照ください。
ドックマネージャーによる高度なレイアウト機能を備えた、コンポーネントを動的に追加できる Blazor アプリケーションを作る (前編) – インフラジスティックス・ジャパン株式会社Blog (infragistics.com)
