【WinUI 3】右クリックメニュー(ContextFlyout)の使い方を実例付きで解説！
2025-04-11
WinUI 3 のアプリ開発で「右クリックメニュー（コンテキストメニュー）」を実装したい場合、WPF の ContextMenu ではなく ContextFlyout を使います。この記事では、具体的な実装例を交えて分かりやすく解説します。
ContextFlyout を使った Grid の右クリックメニュー例
以下のコードで、Grid 要素を右クリックしたときにメニューを表示することができます。
<Grid Width="200" Height="200" Background="BlueViolet" >
<Grid.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="右クリック メニュー1" />
<MenuFlyoutItem Text="右クリック メニュー2" />
</MenuFlyout>
</Grid.ContextFlyout>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">右クリック</TextBlock>
</Grid>ポイント解説：
Grid.ContextFlyoutにMenuFlyoutを設定します。MenuFlyoutItemを追加することで、メニューの項目を定義できます。- 中央の
TextBlockに「右クリック」と表示して、UIの案内にしています。
WPF との違いに注意！
WPF における ContextMenu と混同しがちですが、WinUI 3 では ContextFlyout + MenuFlyout の組み合わせが主流です。実装方法が異なるため、移行の際は注意が必要です。
まとめ
WinUI 3 での右クリックメニュー実装は非常にシンプルで、上記のようなコードで簡単に導入できます。UI に応じて、他のコントロール（TextBox, Button, ListView など）にも ContextFlyout は設定可能です。
この記事を参考に、自分のアプリにも応用してみてください！
WinUI 3 / XAML の Grid.Width 設定方法
WinUI 3でMenuFlyoutをShowAtで表示する方法【コード付き解説】
MenuFlyout は WinUI 3 で便利なポップアップメニュー
WinUI 3の開発で混乱しがちな「空白のウィンドウ」と「空白のページ」の違い
PowerShellでMSIXアプリ（Storeアプリ）を起動する方法｜AppUserModelIdとURIスキーム活用術