C# WinUI3 のコンテキストメニューにチェックマークを追加する手順

C# WinUI 3アプリを作っていく途中で、調べたことを忘録的に投稿します。今回はWinUI3プロジェクトで、マウスの右クリックで表示させるコンテキストメニューにチェックマークを追加したい場合の対処法です。

ToggleMenuFlyoutItemが便利

コンテキストメニューで選択するメニュー部分には［MenuFlyoutItem］コントロールを使いますが、チェックマークを追加したい場合には［ToggleMenuFlyoutItem］コントロールが便利です。

こんな感じでXamlに［ToggleMenuFlyoutItem］でメニューを追加します。

<MediaPlayerElement Name="GridPlayer" Source="{Binding MediaPath}">
  <MediaPlayerElement.ContextFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="再生" Name="PlayMenu">
        <MenuFlyoutItem.Icon>
          <FontIcon Glyph="&#xE768;" FontFamily="Segoe MDL2 Assets" />
        </MenuFlyoutItem.Icon>
      </MenuFlyoutItem>
      <MenuFlyoutItem Text="一時停止" Name="PauseMenu">
        <MenuFlyoutItem.Icon>
          <FontIcon Glyph="&#xE769;" FontFamily="Segoe MDL2 Assets" />
        </MenuFlyoutItem.Icon>
      </MenuFlyoutItem>
      <ToggleMenuFlyoutItem Text="トグル" Name="ToggleMenu">
        <MenuFlyoutItem.Icon>
          <FontIcon Glyph="&#xF19E;" FontFamily="Segoe MDL2 Assets" />
        </MenuFlyoutItem.Icon>
      </ToggleMenuFlyoutItem>
    </MenuFlyout>
  </MediaPlayerElement.ContextFlyout>
</MediaPlayerElement>

実行すると、画面をマウスで右クリックするとコンテキストメニューが表示されます。

［ToggleMenuFlyoutItem］コントロールは、何も実装することなくメニューを選択すると、メニューにチェックマークが追加されます。（再度メニューを選択するとチェックマークが非表示になります）

イベントプロシージャの追加

追加したコンテキストメニューにイベントを追加します。

<MediaPlayerElement Name="GridPlayer" Source="{Binding MediaPath}">
  <MediaPlayerElement.ContextFlyout>
    <MenuFlyout Opening="MenuFlyout_Opening">
      <MenuFlyoutItem Text="再生" Name="PlayMenu" Click="PlayMenu_Click">
        <MenuFlyoutItem.Icon>
          <FontIcon Glyph="&#xE768;" FontFamily="Segoe MDL2 Assets" />
        </MenuFlyoutItem.Icon>
      </MenuFlyoutItem>
      <MenuFlyoutItem Text="一時停止" Name="PauseMenu" Click="PauseMenu_Click">
        <MenuFlyoutItem.Icon>
          <FontIcon Glyph="&#xE769;" FontFamily="Segoe MDL2 Assets" />
        </MenuFlyoutItem.Icon>
      </MenuFlyoutItem>
      <ToggleMenuFlyoutItem Text="トグル" Name="ToggleMenu" Click="ToggleMenu_Click">
        <MenuFlyoutItem.Icon>
          <FontIcon Glyph="&#xF19E;" FontFamily="Segoe MDL2 Assets" />
        </MenuFlyoutItem.Icon>
      </ToggleMenuFlyoutItem>
    </MenuFlyout>
  </MediaPlayerElement.ContextFlyout>
</MediaPlayerElement>

メニューの状態を、事前に変更したい場合には［MenuFlyout］コントロールの［Opening］イベントで処理します。

［sender］引数を利用してメニューを判別してチェックマークの状態などを事前に取得できます。

private void MenuFlyout_Opening(object sender, object e)
{
  foreach (var item in ((MenuFlyout)sender).Items)
  {
    if (item != null)
    {
      var mfItem = item as MenuFlyoutItem;
      string s = mfItem.Text;

      if(s == "トグル")
      {
        var tmfItem = item as ToggleMenuFlyoutItem;
        FontIcon icon = new FontIcon();
        if (tmfItem.IsChecked == true)
        {
          icon.Glyph = "\uF19E";
          tmfItem.Icon = icon;
        }
        else
        {
          icon.Glyph = "\uF19F";
          tmfItem.Icon = icon;
        }
      }
    }
  }
}

メニューのクリックイベントでは［sender］引数から選択したメニューの状態を取得が可能です。

private void ToggleMenu_Click(object sender, RoutedEventArgs e)
{
    if(((ToggleMenuFlyoutItem)sender).IsChecked == true)
    {
        //ToggleMenu Checked
    }
    else
    {
        //ToggleMenu UnChecked
    }
}

まとめ

今回は短い記事ですが、Visual StudioのWinUI3プロジェクトで、マウスの右クリックで表示させるコンテキストメニューにチェックマークを追加したい場合の手順について紹介しました。

また、［Opening］イベントを実装することでメニューの状態に応じたアイコン変更などメニューの表示を変更が可能です。

WinUI 3アプリでコンテキストメニューにチェックマークを追加したい人の参考になれば幸いです。

スポンサーリンク

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