C# WinUI3でTabViewのタブにコンテキストメニューを追加する方法

C# WinUI 3アプリを作っていく途中で、調べたことを忘録的に投稿します。今回はWinUI3プロジェクトでTabViewに追加したタブに右クリックで表示するメニューを追加する方法です。

TabViewのContextFlyoutは使えない

［TabView］コントロールの［ContextFlyout］にメニューを追加します。

<TabView
  Name="tab_main" 
  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
  Loaded="tab_main_Loaded"
  TabCloseRequested="tab_main_TabCloseRequested"
  AddTabButtonClick="tab_main_AddTabButtonClick">
  <TabView.ContextFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="メニュー１" />
      <MenuFlyoutItem Text="メニュー２" />
    </MenuFlyout>
  </TabView.ContextFlyout>
</TabView>

実行して、追加したタブで右クリックするとメニューがポップアップします。

しかし［TabView］に追加した［ContextFlyout］はタブ以外の部分でも表示されてしまいます。

タブだけ表示される右クリックメニュー

［TabView］に追加されたタブを右クリックして表示するメニューは、次の手順で行います。

1. 新しくタブを追加するイベントを編集して［ContextRequested］イベントを追加します。

private void tab_main_AddTabButtonClick(Microsoft.UI.Xaml.Controls.TabView sender, object args)
{
  sender.TabItems.Add(CreateTabItem(sender.TabItems.Count));
}

private TabViewItem CreateTabItem(int nIndex)
{
  TabViewItem tabviewitem = new TabViewItem();
  tabviewitem.Header = $"TabItem {nIndex}";
  TabViewContentPage tabPage = new TabViewContentPage();
  tabviewitem.Content = tabPage;
  tabviewitem.ContextRequested += Tabviewitem_ContextRequested;
  return tabviewitem;
}

2. 追加した［ContextRequested］イベントに次のコードを追加します。

private void Tabviewitem_ContextRequested(UIElement sender, ContextRequestedEventArgs args)
{
  MenuFlyout menuFlyout = new MenuFlyout();
  MenuFlyoutItem menuFlyoutItem = new MenuFlyoutItem();
  menuFlyoutItem.Text = "メニュー１";
  menuFlyout.Items.Add(menuFlyoutItem);

  Microsoft.UI.Xaml.Controls.TabViewItem? tabviewitem = sender as Microsoft.UI.Xaml.Controls.TabViewItem;
  if (tabviewitem == null)
  {
    return;
  }

  tabviewitem.ContextFlyout = menuFlyout;
}

実行すると、タブを右クリックした際にメニューが表示されます。

まとめ

今回は、WinUI3プロジェクトでTabViewに追加したタブに右クリックで表示するメニューを追加する方法について紹介しました。

［TabView］コントロールの［ContextFlyout］にメニューに追加したメニューは、タブ以外の部分でも表示されます。

そのため、追加したタブ［TabViewItem］に［ContextRequested］イベントを追加して、メニューを追加します。

WinUI 3 アプリで［TabView］コントロールに追加したタブに右クリックメニューを表示したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただき、ありがとうございます。