Share via

メニューとショートカット メニュー

  • [アーティクル]

メニューとコンテキスト メニューは、外観や、何を含めることができるかという点で似ています。 どちらも、コマンドやオプションを一覧として統合された形で表示し、必要になるまで非表示にすることでスペースを節約します。 ただし、これらを作成にするために使用する必要があるものや、ユーザーがこれらにアクセスする方法など、両者の間には違いがあります。

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

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

メニューとコンテキスト メニューは、コマンドを統合し、必要になるまで非表示にすることでスペースを節約するためのものです。 通知や確認要求などの任意のコンテンツを表示する場合は、ダイアログまたはポップアップを使います。

頻繁に使用される特定のコマンドについては、スペースに余裕がある場合は、メニューを使って移動しなくてもよいように、独自の要素に直接配置することを検討してください。

メニューまたはコンテキスト メニューは、どのような場合に使えばよいでしょうか。

  • ホスト要素がボタンである場合や、追加のコマンドを表示することを主な役割とする他のコマンド要素である場合は、メニューを使います。
  • ホスト要素が、別の主な役割 (テキストまたは画像を表示するなど) を持つ他の種類の要素である場合は、コンテキスト メニューを使います。

テキストまたは画像要素にコマンド (切り取り、コピー、貼り付けなど) を追加する場合は、メニューの代わりにコンテキスト メニューを使います。 このシナリオでは、テキスト要素の主な役割はテキストを表示して編集することであり、追加のコマンド (切り取り、コピー、貼り付けなど) は補助的な役割であるため、コンテキスト メニューに含めます。

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

コンテキスト メニュー

コンテキスト メニューには、次の特徴があります。

  • 1 つの要素にアタッチされ、セカンダリ コマンドを表示します。
  • 右クリック (または、指で長押しするなどの同等の操作) によって呼び出されます。
  • ContextFlyout プロパティを介して要素に関連付けられます。

コンテキスト メニューに一般的なコマンド (コピー、切り取り、貼り付け、削除、共有、テキスト選択など) を含める場合は、コマンド バーのポップアップを使用して、これらの一般的なコマンドをプライマリ コマンドとしてグループ化し、コンテキスト メニューに横一列に表示されるようにします。

コンテキスト メニューに一般的なコマンドを含めない場合は、コマンド バーのポップアップまたはメニュー　ポップアップを使用してコンテキスト メニューを表示できます。 CommandBarFlyout を使用することをお勧めします。これは MenuFlyout よりも多くの機能を提供し、必要に応じて、セカンダリ コマンドのみを使用することによって MenuFlyout と同じ動作と外観を実現できるためです。

メニューの特性は、次のとおりです。

  • 常に表示される 1 つのエントリ ポイント (たとえば、画面上部の [ファイル] メニュー) があります。
  • 通常、ボタンまたは親のメニュー項目にアタッチされます。
  • 左クリック (または、指でタップするなどの同等の操作) によって呼び出されます。
  • Flyout プロパティまたは FlyoutBase.AttachedFlyout プロパティを介して要素に関連付けられます。また、アプリ ウィンドウの上部のメニュー バーにグループ化されます。

ユーザーが追加のコマンドを表示することが主な役割となっているコマンド要素 (ボタンなど) を呼び出す場合は、メニュー　ポップアップを使用して、キャンバス上の UI 要素にアタッチされたポップアップとしてインラインで表示される単一のトップレベル メニューをホストします。 MenuFlyout ごとに、メニュー項目とサブメニューをホストできます。 より多くの統合やグループ化が必要なアプリの場合は、複数のトップレベル メニューのセットを横一列にすばやく簡単に表示する手段としてメニュー バーを使用します。

UWP と WinUI 2

重要

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

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

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

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

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

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

<muxc:CommandBarFlyout />
<muxc:MenuBar />