.NET MAUI デスクトップアプリでコンテキストメニューを表示する

[アーティクル]
09/30/2024

コンテキストメニュー (通常は右クリックメニュー) は、クリックされているコントロールに固有のコンテキストコマンドを提供します。 .NET Multi-Platform App UI (.NET MAUI) では、Mac Catalyst および Windows 上の Element から派生する任意のコントロールにコンテキストメニューを追加できます。これには、すべてのページ、レイアウト、ビューが含まれます。

コンテキストメニューは MenuFlyout で定義され、次の子で構成されます。

MenuFlyoutItem: クリックできるメニュー項目を表します。
MenuFlyoutSubItem: クリックできるサブメニュー項目を表します。
MenuFlyoutSeparator: メニュー内の項目を区切る水平線です。

MenuFlyoutSubItem は MenuFlyoutItem から派生します。また、後者は MenuItem から派生します。 MenuItem は、メニュー項目の外観と動作を指定できるようにする複数のプロパティを定義します。メニュー項目またはサブ項目の外観は、Text プロパティと IconImageSource プロパティを設定することで定義できます。メニュー項目またはサブ項目のクリックに対する応答は、Clicked、Command、CommandParameter の各プロパティを設定することで定義できます。メニュー項目の詳細については、「メニュー項目を表示する」をご覧ください。

警告

Entry のコンテキストメニューは現在、Mac Catalyst ではサポートされていません。

MenuFlyout オブジェクトは、Element から派生するコントロールの FlyoutBase.ContextFlyout 添付プロパティに追加できます。ユーザーがコントロールを右クリックすると、ポインターがクリックされた場所にコンテキストメニューが表示されます。

次の例は、コンテキストメニューを定義する WebView を示しています。

<WebView x:Name="webView"
         Source="https://video2.skills-academy.com/dotnet/maui"
         MinimumHeightRequest="400">
    <FlyoutBase.ContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Go to docs repo"
                            Clicked="OnWebViewGoToRepoClicked"
                            CommandParameter="docs" />
            <MenuFlyoutItem Text="Go to engineering repo"
                            Clicked="OnWebViewGoToRepoClicked"
                            CommandParameter="eng" />
        </MenuFlyout>
    </FlyoutBase.ContextFlyout>
</WebView>

この例では、コンテキストメニューによって次の 2 つのメニュー項目が定義されています。

メニュー項目をクリックすると、OnWebViewGoToRepoClicked イベントハンドラーが実行されます。

void OnWebViewGoToRepoClicked(object sender, EventArgs e)
{
    MenuFlyoutItem menuItem = sender as MenuFlyoutItem;
    string repo = menuItem.CommandParameter as string;
    string url = repo == "docs" ? "docs-maui" : "maui";
    webView.Source = new UrlWebViewSource { Url = $"https://github.com/dotnet/{url}" };
}

OnWebViewGoToRepoClicked イベントハンドラーは、クリックされた MenuFlyoutItem オブジェクトの CommandParameter プロパティ値を取得し、その値を使用して WebView の移動先 URL を構築します。

警告

現在、実行時に MenuFlyout に項目を追加したり、項目を削除したりすることはできません。

キーボードアクセラレータをコンテキストメニュー項目に追加すると、キーボードショートカットからコンテキストメニュー項目を呼び出すことができます。詳細については、「キーボードアクセラレータ」をご覧ください。

1 つ以上の MenuFlyoutSubItem オブジェクトを MenuFlyout に追加することで、サブメニュー項目をコンテキストメニューに追加できます。

<Label x:Name="label"
       Text="Right-click to choose color">
   <FlyoutBase.ContextFlyout>
       <MenuFlyout>
           <MenuFlyoutItem Text="Black"
                           Clicked="OnLabelClicked"
                           CommandParameter="Black" />
           <MenuFlyoutSubItem Text="Light">
               <MenuFlyoutItem Text="Blue"
                               Clicked="OnLabelClicked"
                               CommandParameter="LightBlue" />
               <MenuFlyoutItem Text="Coral"
                               Clicked="OnLabelClicked"
                               CommandParameter="LightCoral" />
               <MenuFlyoutItem Text="Cyan"
                               Clicked="OnLabelClicked"
                               CommandParameter="LightCyan" />
           </MenuFlyoutSubItem>
           <MenuFlyoutSubItem Text="Dark">
               <MenuFlyoutItem Text="Blue"
                               Clicked="OnLabelClicked"
                               CommandParameter="DarkBlue" />
               <MenuFlyoutItem Text="Cyan"
                               Clicked="OnLabelClicked"
                               CommandParameter="DarkCyan" />
               <MenuFlyoutItem Text="Magenta"
                               Clicked="OnLabelClicked"
                               CommandParameter="DarkMagenta" />
           </MenuFlyoutSubItem>
       </MenuFlyout>
   </FlyoutBase.ContextFlyout>
</Label>

この例では、コンテキストメニューでメニュー項目と、それぞれ 3 つのメニュー項目を含む 2 つのサブメニューを定義します。

MenuFlyoutItem と MenuFlyoutSubItem は、MenuItem から IconImageSource プロパティを継承します。これにより、コンテキストメニュー項目のテキストの横に小さなアイコンを表示できます。このアイコンには、画像またはフォントアイコンを指定できます。

警告

Mac Catalyst では、コンテキストメニュー項目にアイコンを表示することはできません。

次の例は、フォントアイコンを使用してメニュー項目のアイコンを定義するコンテキストメニューを示しています。

<Button Text="&#x25B6;&#xFE0F; Play"
        WidthRequest="80">
    <FlyoutBase.ContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Pause"
                            Clicked="OnPauseClicked">
                <MenuFlyoutItem.IconImageSource>
                    <FontImageSource Glyph="&#x23F8;"
                                     FontFamily="Arial" />
                </MenuFlyoutItem.IconImageSource>
            </MenuFlyoutItem>
            <MenuFlyoutItem Text="Stop"
                            Clicked="OnStopClicked">
                <MenuFlyoutItem.IconImageSource>
                    <FontImageSource Glyph="&#x23F9;"
                                     FontFamily="Arial" />
                </MenuFlyoutItem.IconImageSource>
            </MenuFlyoutItem>
        </MenuFlyout>
    </FlyoutBase.ContextFlyout>
</Button>

この例では、コンテキストメニューは、Windows にアイコンとテキストを表示する 2 つのメニュー項目を定義します。

フォントアイコンの表示については、「フォントアイコンの表示」をご覧ください。 .NET MAUI プロジェクトへの画像の追加については、「.NET MAUI アプリプロジェクトに画像を追加」をご覧ください。

次の方法で共有

コンテキストメニュー項目を作成する

サブメニュー項目を作成する

メニュー項目にアイコンを表示する

その他のリソース