IgbDockManager をユーザー操作によってアクティブなペイン(フォーカスされているペイン)が切り替わったタイミングの検知、そのペインの情報を取得したい場合があります。このトピックでは、ActivePaneChanged イベントを利用して、アクティブなペインの変更を検知し、新しくアクティブになったペインの情報を取得する方法を説明します。

ActivePaneChanged イベントの使用

アクティブなペインが切り替わると ActivePaneChanged イベントが発生します。IgbDockManager にイベントハンドラーをバインドします。

<IgbDockManager @ref="dockManager"
                Layout="_layout"
                ActivePaneChanged="OnActivePaneChanged">
    ...
</IgbDockManager>

ハンドラーの引数 IgbActivePaneEventArgsDetail.NewPane から、新しくアクティブになったペインを取得できます。ここでは Header を取得して画面に表示しています。

@code {
    private string _activePane = string.Empty;

    private void OnActivePaneChanged(IgbActivePaneEventArgs e)
    {
        var newPane = e.Detail?.NewPane;
        var header = newPane?.Header ?? string.Empty;
        _activePane = $"Active pane changed: {header}";
    }
}

実行結果

サンプルを実行し、ペインをクリックしてアクティブなペインを切り替えると、ActivePaneChanged イベントが発生します。このサンプルでは新しくアクティブになったペインの Header が画面下部に表示されます。

Tagged:

製品について

Ignite UI for Blazor