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

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

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

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

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

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

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

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

WinUI 3 ギャラリー アイコン

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 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 プロパティを使用してメニューとして表示します。

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

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>

ライトディスミス

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

<MenuFlyout LightDismissOverlayMode="Off" />

メニュー バーの作成

WinUI 3 ギャラリー アイコン

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

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

メニュー バーの例

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

関連資料

• Windows アプリの設計の基本
• メニューとコンテキスト メニュー
• コレクションとリストのコンテキスト コマンド
• MenuFlyout クラス
• MenuBar クラス