メニューとショートカット メニューMenus and context menus

メニューとコンテキスト メニューは、ユーザーが要求するときにコマンドやオプションの一覧を表示します。Menus and context menus display a list of commands or options when the user requests them. 1 つのインライン メニューを表示するには、メニュー ポップアップを使います。Use a menu flyout to show a single, inline menu. 横一列 (通常はアプリ ウィンドウの上部) に複数のメニューを表示するには、メニュー バーを使います。Use a menu bar to show a set of menus in a horizontal row, typically at the top of an app window. 各メニューにはメニュー項目とサブメニューが含まれることがあります。Each menu can have menu items and sub-menus.

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

Windows UI ライブラリを入手するGet the Windows UI Library
このコントロールは、Windows UI ライブラリの NuGet パッケージの一部として組み込まれており、パッケージには、UWP アプリの新しいコントロールと UI 機能が含まれています。This control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for UWP apps. インストール手順などの詳細については、Windows UI ライブラリの概要に関するページを参照してください。For more info, including installation instructions, see the Windows UI Library overview.
プラットフォーム APIPlatform APIs Windows UI ライブラリ APIWindows UI Library APIs
MenuFlyout クラスMenuBar クラスContextFlyout プロパティFlyoutBase.AttachedFlyout プロパティMenuFlyout class, MenuBar class, ContextFlyout property, FlyoutBase.AttachedFlyout property MenuBar クラスMenuBar class

適切なコントロールの選択Is this the right control?

メニューとコンテキスト メニューは、コマンドを整理してユーザーに要求されるまで非表示にすることによって、スペースを節約します。Menus and context menus save space by organizing commands and hiding them until the user needs them. 特定のコマンドを頻繁に使っていて、利用可能なスペースがある場合は、メニューを使って移動しなくてもよいように、メニュー内ではなく、独自の要素に直接配置することを検討してください。If a particular command will be used frequently and you have the space available, consider placing it directly in its own element, rather than in a menu, so that users don't have to go through a menu to get to it.

メニューとコンテキスト メニューは、コマンドを整理する目的で使います。通知や確認要求などの任意のコンテンツを表示する場合は、ダイアログまたはポップアップを使います。Menus and context menus are for organizing commands; to display arbitrary content, such as a notification or confirmation request, use a dialog or a flyout.

キャンバス上の UI 要素にアタッチされたポップアップにメニューを表示するには、MenuFlyout コントロールを使ってメニュー項目をホストします。To show a menu in a flyout attached to an on-canvas UI element, use the MenuFlyout control to host your menu items. メニュー ポップアップは、通常のメニューまたはコンテキスト メニューとして呼び出すことができます。You can invoke a menu flyout either as a regular menu or as a context menu. メニュー ポップアップは1 つのトップレベル メニュー (とオプションのサブメニュー) をホストします。A menu flyout hosts a single top-level menu (and optional sub-menus).

横一列に複数のトップレベル メニューを表示するには、メニュー バーを使います。To show a set of multiple top-level menus in a horizontal row, use a menu bar. 通常、メニュー バーはアプリ ウィンドウの上部に配置します。You typically position the menu bar at the top of the app window.

MenuBar と CommandBar はどちらも、ユーザーにコマンドを公開するために使用できるサーフェスを表します。MenuBar and CommandBar both represent surfaces that you can use to expose commands to your users. MenuBar を使うと、CommandBar で許容されるよりも多くの組織またはグループ化が必要になる可能性があるアプリ用のコマンド セットをすばやく簡単に公開できます。The MenuBar provides a quick and simple way to expose a set of commands for apps that might need more organization or grouping than a CommandBar allows.

MenuBar を CommandBar と組み合わせて使うこともできます。You can also use a MenuBar in conjunction with a CommandBar. MenuBar は、複数のコマンドを提供するために使い、CommandBar は、最も使用されるコマンドを強調表示するために使います。Use the MenuBar to provide the bulk of the commands, and the CommandBar to highlight the most used commands.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、MenuFlyout の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the MenuFlyout in action.

メニューとコンテキスト メニューは、外観や、何を含めることができるかという点で似ています。Menus and context menus are similar in how they look and what they can contain. 実際、これらは MenuFlyout という同じコントロールを使って作成できます。In fact, you can use the same control, MenuFlyout, to create them. 違いは、ユーザーのアクセス方法です。The difference is how you let the user access it.

メニューまたはコンテキスト メニューは、どのような場合に使えばよいでしょうか。When should you use a menu or a context menu?

  • ホスト要素がボタンである場合や、追加のコマンドを表示することを主な役割とする他のコマンド要素である場合は、メニューを使います。If the host element is a button or some other command element whose primary role is to present additional commands, use a menu.
  • ホスト要素が、別の主な役割 (テキストまたは画像を表示するなど) を持つ他の種類の要素である場合は、コンテキスト メニューを使います。If the host element is some other type of element that has another primary purpose (such as presenting text or an image), use a context menu.

たとえば、ボタンのメニューを使って、リストのフィルター処理および並べ替えのオプションを提供します。For example, use a menu on a button to provide filtering and sorting options for a list. このシナリオでは、ボタン コントロールの主な役割は、メニューへのアクセスを提供することです。In this scenario, the primary purpose of the button control is to provide access to a menu.

[メール] メニューの例

テキスト要素にコマンド (切り取り、コピー、貼り付けなど) を追加する場合は、メニューの代わりにコンテキスト メニューを使います。If you want to add commands (such as cut, copy, and paste) to a text element, use a context menu instead of a menu. このシナリオでは、テキスト要素の主な役割はテキストを表示して編集することであり、追加のコマンド (切り取り、コピー、貼り付けなど) は補助的な役割であるため、コンテキスト メニューに属します。In this scenario, the primary role of the text element is to present and edit text; additional commands (such as cut, copy, and paste) are secondary and belong in a context menu.

フォト ギャラリーでのコンテキスト メニューの例

  • 常に表示される 1 つのエントリ ポイント (たとえば、画面上部の [ファイル] メニュー) があります。Have a single entry point (a File menu at the top of the screen, for example) that is always displayed.
  • 通常、ボタンまたは親のメニュー項目にアタッチされます。Are usually attached to a button or a parent menu item.
  • 左クリック (または、指でタップするなどの同等の操作) によって呼び出されます。Are invoked by left-clicking (or an equivalent action, such as tapping with your finger).
  • Flyout プロパティまたは FlyoutBase.AttachedFlyout プロパティを介して要素に関連付けられます。また、アプリ ウィンドウの上部のメニュー バーにグループ化されます。Are associated with an element via its Flyout or FlyoutBase.AttachedFlyout properties, or grouped in a menu bar at the top of the app window.

コンテキスト メニューContext menus

  • 1 つの要素にアタッチされ、セカンダリ コマンドを表示します。Are attached to a single element and display secondary commands.
  • 右クリック (または、指で長押しするなどの同等の操作) によって呼び出されます。Are invoked by right clicking (or an equivalent action, such as pressing and holding with your finger).
  • ContextFlyout プロパティを介して要素に関連付けられます。Are associated with an element via its ContextFlyout property.

アイコンIcons

次のようなメニュー項目のアイコンを用意することを検討します。Consider providing menu item icons for:

  • 最もよく使われる項目。The most commonly used items.
  • アイコンが一般的またはよく知られているメニュー項目。Menu items whose icon is standard or well known.
  • アイコンがコマンドの役割を適切に示すメニュー項目。Menu items whose icon well illustrates what the command does.

標準的な視覚表現がないコマンドにアイコンを用意しなければならないと考える必要はありません。Don't feel obligated to provide icons for commands that don't have a standard visualization. わかりづらいアイコンは役に立たず、視覚的な混乱をもたらし、ユーザーが重要なメニュー項目に集中できなくなります。Cryptic icons aren’t helpful, create visual clutter, and prevent users from focusing on the important menu items.

アイコンのあるコンテキスト メニューの例

<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 ピクセルです。The size of the icon in a MenuFlyoutItem is 16x16px. SymbolIcon、FontIcon、または PathIcon を使用した場合、忠実さを失うことなく、アイコンが適切なサイズに自動的に拡大縮小されます。If you use SymbolIcon, FontIcon, or PathIcon, the icon automatically scales to the correct size with no loss of fidelity. BitmapIcon を使用すると、アセットは必ず 16 x 16 ピクセルになります。If you use BitmapIcon, ensure that your asset is 16x16px.

ポップアップ メニューまたはコンテキスト メニューの作成Create a menu flyout or a context menu

ポップアップ メニューまたはコンテキスト メニューを作成するには、MenuFlyout クラスを使います。To create a menu flyout or a context menu, you use the MenuFlyout class. メニューのコンテンツを定義するには、MenuFlyoutItemMenuFlyoutSubItemToggleMenuFlyoutItemRadioMenuFlyoutItemMenuFlyoutSeparator の各オブジェクトを MenuFlyout に追加します。You define the contents of the menu by adding MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem and MenuFlyoutSeparator objects to the MenuFlyout.

これらのオブジェクトの用途を次に説明します。These objects are for:

この例では、MenuFlyout を作成し、ほとんどのコントロールで利用できる ContextFlyout プロパティを使って、コンテキスト メニューとして MenuFlyout を表示します。This example creates a MenuFlyout and uses the ContextFlyout property, a property available to most controls, to show the MenuFlyout as a context menu.

<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 == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

次の例はほとんど同じですが、ContextFlyout プロパティを使って、コンテキスト メニューとして MenuFlyout クラスを表示する代わりに、FlyoutBase.ShowAttachedFlyout プロパティを使って、メニューとして MenuFlyout クラスを表示します。The next example is nearly identical, but instead of using the ContextFlyout property to show the MenuFlyout class as a context menu, the example uses the FlyoutBase.ShowAttachedFlyout property to show it as a menu.

<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 == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

簡易非表示Light dismiss

簡易非表示コントロール (メニュー、コンテキスト メニュー、その他のポップアップ) は、閉じられるまで一時的な UI にキーボードのフォーカスやゲームパッドのフォーカスを捕捉します。Light dismiss controls such as menus, context menus, and other flyouts, trap keyboard and gamepad focus inside the transient UI until dismissed. この動作に視覚的な合図を提供するために、Xbox の簡易非表示コントロールは、スコープ外の UI を暗く表示するオーバーレイを描画します。To provide a visual cue for this behavior, light dismiss controls on Xbox will draw an overlay that dims the visibility of out of scope UI. この動作は、LightDismissOverlayMode プロパティを使って変更できます。This behavior can be modified with the LightDismissOverlayMode property. 既定で、一時的な UI によって Xbox 上では簡易非表示オーバーレイが描画されます (自動) が、他のデバイス ファミリ上では描画されません。By default, transient UIs will draw the light dismiss overlay on Xbox (Auto) but not other device families. オーバーレイは、常に On にするか、常に Off にするかを選択できます。You can choose to force the overlay to be always On or always Off.

<MenuFlyout LightDismissOverlayMode="Off" />

メニュー バーの作成Create a menu bar

重要

MenuBar には、Windows 10 Version 1809 (SDK 17763) 以降、または Windows UI ライブラリが必要です。MenuBar requires Windows 10, version 1809 (SDK 17763) or later, or the Windows UI Library.

メニュー ポップアップと同じ要素を使ってメニュー バーにメニューを作成します。You use the same elements to create menus in a menu bar as in a menu flyout. ただし、MenuFlyoutItem オブジェクトは MenuFlyout でグループ化せずに、MenuBarItem 要素でグループ化します。However, instead of grouping MenuFlyoutItem objects in a MenuFlyout, you group them in a MenuBarItem element. 各 MenuBarItem はトップ レベル メニューとして MenuBar に追加されます。Each MenuBarItem is added to the MenuBar as a top level menu.

メニュー バーの例

注意

この例は、UI 構造の作成方法のみを示していますが、どのコマンドの実装も示していません。This example shows only how to create the UI structure, but does not show implementation of any of the commands.

<muxc:MenuBar>
    <muxc: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"/>
    </muxc:MenuBarItem>

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

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

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

サンプル コードを入手するGet the sample code