メニューポップアップとメニューバー

メニューのポップアップは、ユーザーの要求時にコマンドまたはオプションの一覧を表示するために、メニューとコンテキストメニューのシナリオで使用されます。メニューのポップアップには、メニュー項目とサブメニューを含む、単一かつインラインのトップレベルのメニューが表示されます。水平行に複数のトップレベルメニューのセットを表示するには、メニューバーを使用します (通常はアプリウィンドウの上部に配置します)。

一般的なコンテキストメニューの例

これは適切なコントロールですか?

メニューとコンテキストメニューのシナリオの識別に関するヘルプと、メニューポップアップとコマンドバーのポップアップを使用するタイミングに関するガイダンスについては、メニューとコンテキストメニューを参照してください。

メニューのポップアップは、コマンドを整理するためのメニューとショートカットメニューとして使用できます。通知や確認要求などの任意のコンテンツを表示するには、ダイアログまたはポップアップを使用します。

特定のコマンドが頻繁に使用され、使用可能な領域がある場合は、コレクションのコマンドを参照してください。たとえば、コマンドを独自の要素に直接配置する例を参照して、ユーザーがメニューを使用してアクセスする必要がないようにします。

重要な API:MenuFlyout クラス、 ContextFlyout プロパティ、 FlyoutBase.AttachedFlyout プロパティ

WinUI 3 ギャラリーアプリを開き、MenuFlyout の動作を確認する

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを参照します。

メニューポップアップを作成するには、 MenuFlyout クラスを使用します。メニューの内容を定義するには、 MenuFlyoutItem、 MenuFlyoutSubItem、 SplitMenuFlyoutItem、 ToggleMenuFlyoutItem、 RadioMenuFlyoutItem、 MenuFlyoutSeparator オブジェクトを MenuFlyout に追加します。

これらのオブジェクトは次を対象としています。

MenuFlyoutItem - 即時アクションの実行。
MenuFlyoutSubItem - メニュー項目のカスケードリストを含みます。
SplitMenuFlyoutItem - 階層リスト内の関連アクションを使用して、既定のアクションを実行します。詳細については、分割メニュー項目の追加を参照してください。
ToggleMenuFlyoutItem - オプションのオンとオフを切り替えます。
RadioMenuFlyoutItem — 相互に排他的なメニュー項目の切り替え。
MenuFlyoutSeparator - メニュー項目を視覚的に分離します。

次の使用例は、 MenuFlyout を作成し、ほとんどのコントロールで使用できるプロパティである ContextFlyout プロパティを使用して、MenuFlyout をコンテキストメニューとして表示します。

<Rectangle
  Height="100" Width="100">
  <Rectangle.ContextFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </Rectangle.ContextFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

次の例はほぼ同じですが、 ContextFlyout プロパティを使用して MenuFlyout クラスをコンテキストメニューとして表示する代わりに、 FlyoutBase.ShowAttachedFlyout プロパティを使用してメニューとして表示します。

<Rectangle
  Height="100" Width="100"
  Tapped="Rectangle_Tapped">
  <FlyoutBase.AttachedFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </FlyoutBase.AttachedFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

重要な API:SplitMenuFlyoutItem クラス、 Items プロパティ

WinUI 3 ギャラリーアプリを開き、SplitMenuFlyoutItem の動作を確認する

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを参照します。

SplitMenuFlyoutItem は、メニューポップアップに分割ボタンエクスペリエンスを提供します。これには 2 つの部分があります：

プライマリパーツは、MenuFlyoutItem などの既定のアクションを実行します。ユーザーが選択したときに応答するには、 Click イベントを処理するか、 Command プロパティを設定します。
セカンダリパーツは、MenuFlyoutSubItem などの関連するオプションのサブメニューを開きます。

コマンドに共通の既定のアクションと、ファイルをさまざまな形式で保存するなど、いくつかのバリエーションがある場合は、分割メニュー項目を使用します。各バリエーションを個別の項目として一覧表示した場合よりも、メニューが短く維持されます。

注

SplitMenuFlyoutItem には、Windows アプリ SDK 1.8.6 以降が必要です。

この例では、WinUI 3 ギャラリーアプリから、2 つの分割ボタン付きメニュー項目を MenuFlyout に追加します。サブメニュー項目は Items プロパティにあります。 Itemsは SplitMenuFlyoutItem の XAML コンテンツプロパティであるため、サブメニュー項目を SplitMenuFlyoutItem 要素内に直接追加できます。

<StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="File Options">
        <Button.Flyout>
            <MenuFlyout>
                <SplitMenuFlyoutItem Text="Save" Click="SplitMenuFlyoutItem_Click">
                    <SplitMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE74E;" />
                    </SplitMenuFlyoutItem.Icon>
                    <MenuFlyoutItem Text="Save as .docx" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .pdf" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .txt" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
                <SplitMenuFlyoutItem Text="Share" Icon="Share" Click="SplitMenuFlyoutItem_Click">
                    <MenuFlyoutItem Text="Share via email" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Share via link" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    <TextBlock x:Name="SelectedCommandText" VerticalAlignment="Center" />
</StackPanel>

private void SplitMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // SplitMenuFlyoutItem derives from MenuFlyoutItem, so one handler works for both.
    if (sender is MenuFlyoutItem selectedItem)
    {
        SelectedCommandText.Text = "Clicked: " + selectedItem.Text;
    }
}

サブメニューには、MenuFlyoutSeparator オブジェクトやその他の SplitMenuFlyoutItem オブジェクトを含めることもできます。 Items コレクションが空の場合、セカンダリパーツは無効になります。

サブメニューをカスタマイズするには、SubMenuPresenterStyle をサブメニューのプレゼンターのスタイルに設定し、SubMenuItemStyle をサブメニュー内の項目のスタイルに設定します。

ユーザーは、キーボードを使用するときに、2 つの部分を個別に操作します。

プライマリパーツにフォーカスがある場合は、Enter キーまたは Space キーを押して既定のアクションを実行するか、右方向キーを押してセカンダリパーツにフォーカスを移動します。
セカンダリパーツにフォーカスがある場合は、Enter キーまたは右方向キーを押してサブメニューを開きます。
サブメニューが開いている場合は、Esc キーまたは左方向キーを押して閉じます。

スクリーンリーダーでは、2 つの部分も個別に読み上げられます。セカンダリ部分は、メニュー項目のその他のオプションを提供するボタンとして読み上げられます。

Icons

次のメニュー項目アイコンを指定することを検討してください。

最もよく使われる項目。
アイコンが一般的またはよく知られているメニュー項目。
アイコンがコマンドの役割を適切に示すメニュー項目。

標準の視覚化がないコマンドのアイコンの提供は義務ではありません。わかりづらいアイコンは役に立たず、視覚的な混乱をもたらし、ユーザーが重要なメニュー項目に集中できなくなります。

アイコンを含むコンテキストメニューの例

<MenuFlyout>
  <MenuFlyoutItem Text="Share" >
    <MenuFlyoutItem.Icon>
      <FontIcon Glyph="&#xE72D;" />
    </MenuFlyoutItem.Icon>
  </MenuFlyoutItem>
  <MenuFlyoutItem Text="Copy" Icon="Copy" />
  <MenuFlyoutItem Text="Delete" Icon="Delete" />
  <MenuFlyoutSeparator />
  <MenuFlyoutItem Text="Rename" />
  <MenuFlyoutItem Text="Select" />
</MenuFlyout>

ヒント

MenuFlyoutItems のアイコンのサイズは 16 x 16 ピクセルです。 SymbolIcon、FontIcon、または PathIcon を使用した場合、忠実さを失うことなく、アイコンが適切なサイズに自動的に拡大縮小されます。 BitmapIcon を使用する場合は、資産が 16 x 16px であることを確認します。

簡易非表示

簡易非表示コントロール (メニュー、コンテキストメニュー、その他のポップアップ) は、閉じられるまで一時的な UI にキーボードやゲームパッドのフォーカスを捕捉します。この動作の視覚的手掛かりを提供するために、Xboxのライトディスミスコントロールがスコープ外のUIの可視性を減らすオーバーレイを描画します。この動作は、 LightDismissOverlayMode プロパティを使用して変更できます。既定では、一時的な UI は、Xbox (Auto) 上にライトディスミスオーバーレイを描画しますが、他のデバイスファミリーには描画しません。オーバーレイを強制的にオンにするか、常にオフにするか選択できます。

<MenuFlyout LightDismissOverlayMode="Off" />

重要な API:MenuBar クラス。 MenuBarItem クラス

WinUI 3 ギャラリーアプリを開き、MenuBar の動作を確認する

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを参照します。

メニューポップアップと同じ要素を使ってメニューバーにメニューを作成します。ただし、MenuFlyoutItem オブジェクトは MenuFlyout でグループ化せずに、MenuBarItem 要素でグループ化します。各 MenuBarItem はトップレベルメニューとして MenuBar に追加されます。

注

この例は、UI 構造の作成方法のみを示していますが、どのコマンドの実装も示していません。

<MenuBar>
    <MenuBarItem Title="File">
        <MenuFlyoutSubItem Text="New">
            <MenuFlyoutItem Text="Plain Text Document"/>
            <MenuFlyoutItem Text="Rich Text Document"/>
            <MenuFlyoutItem Text="Other Formats..."/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="Open..."/>
        <MenuFlyoutItem Text="Save"/>
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="Exit"/>
    </MenuBarItem>

    <MenuBarItem Title="Edit">
        <MenuFlyoutItem Text="Undo"/>
        <MenuFlyoutItem Text="Cut"/>
        <MenuFlyoutItem Text="Copy"/>
        <MenuFlyoutItem Text="Paste"/>
    </MenuBarItem>

    <MenuBarItem Title="View">
        <MenuFlyoutItem Text="Output"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
        <RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
    </MenuBarItem>

    <MenuBarItem Title="Help">
        <MenuFlyoutItem Text="About"/>
    </MenuBarItem>
</MenuBar>

フィードバック

このページはお役に立ちましたか?

最終更新: 2026-10-16

メニュー ポップアップとメニュー バー

これは適切なコントロールですか?

メニューのポップアップの作成

分割メニュー項目を追加する

Icons

簡易非表示

メニュー バーの作成

関連資料

フィードバック

その他のリソース

メニューバーの作成