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

[アーティクル]
06/02/2023

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

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

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

メニューとコンテキストメニューのシナリオを識別し、メニューのポップアップとコマンドバーのポップアップを使用する場合のガイダンスについては、「メニューとショートカットメニュー」を参照してください。

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

特定のコマンドを頻繁に使っていて、利用可能なスペースがある場合は、メニューを使って移動しなくてもよいように、独自の要素に直接コマンドを配置する例について、コレクションのコマンドに関するページを参照してください。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

MenuBar には、Windows 10 Version 1809 (SDK 17763) 以降、または Windows UI ライブラリが必要です。

UWP アプリの MenuFlyout コントロールと MenuBar コントロールは、Windows UI ライブラリ 2 の一部として含まれています。インストール手順などについて詳しくは、「Windows UI Library (Windows UI ライブラリ)」をご覧ください。これらのコントロールの API は、 Windows.UI.Xaml.Controls 名前空間と Microsoft.UI.Xaml.Controls 名前空間の両方に存在します。

UWP API:MenuFlyout クラス、 MenuBar クラス、 ContextFlyout プロパティ、 FlyoutBase.AttachedFlyout プロパティ
WinUI 2 Apis:MenuBar クラス、 ContextFlyout プロパティ、 FlyoutBase.AttachedFlyout プロパティ
WinUI 2 ギャラリーアプリを開き、MenuBar の動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。 WinUI 2.2 以降には、丸い角を使用するこれらのコントロール用の新しいテンプレートが含まれています。詳しくは、「角の半径」をご覧ください。

WinUI 2 でこの記事のコードを使用するには、XAML のエイリアスを使って (ここでは muxc を使用)、プロジェクトに含まれる Windows UI ライブラリ API を表します。詳細については、「WinUI 2 の概要」を参照してください。

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:MenuFlyout />
<muxc:MenuBar />

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

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

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

メニューのポップアップを作成するには、MenuFlyout クラスを使います。メニューのコンテンツを定義するには、MenuFlyoutItem、MenuFlyoutSubItem、ToggleMenuFlyoutItem、RadioMenuFlyoutItem、MenuFlyoutSeparator の各オブジェクトを MenuFlyout に追加します。

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

MenuFlyoutItem—即座にアクションを実行します。
MenuFlyoutSubItem - メニュー項目のカスケードリストを含みます。
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 == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

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

<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;
    }
}

アイコン

次のようなメニュー項目のアイコンを用意することを検討します。

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

標準的な視覚表現がないコマンドにアイコンを用意しなければならないと考える必要はありません。わかりづらいアイコンは役に立たず、視覚的な混乱をもたらし、ユーザーが重要なメニュー項目に集中できなくなります。

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

<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 16 ピクセルになります。

簡易非表示

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

<MenuFlyout LightDismissOverlayMode="Off" />

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

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

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

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

注意

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

<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>

サンプルコードの入手

WinUI ギャラリーのサンプル - すべての XAML コントロールを対話型形式で表示します。
XAML コンテキストメニューのサンプル

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

UWP と WinUI 2

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

アイコン

簡易非表示

メニューバーの作成

サンプルコードの入手

フィードバック

その他のリソース

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

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

UWP と WinUI 2

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

アイコン

簡易非表示

メニュー バーの作成

サンプル コードの入手

関連記事

フィードバック

その他のリソース

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

メニューバーの作成

サンプルコードの入手