在 .NET MAUI 桌面应用中显示上下文菜单

上下文菜单（通常称为右键单击菜单）提供特定于所单击控件的上下文命令。 在 .NET 多平台应用 UI（.NET MAUI）中，上下文菜单可以添加到 Mac Catalyst 和 Windows 上派生自 Element的任何控件。 这包括所有页面、布局和视图。

使用MenuFlyout定义一个上下文菜单，该菜单可以包含以下子项目：

  • MenuFlyoutItem，表示可单击的菜单项。
  • MenuFlyoutSubItem，表示可以单击的子菜单项。
  • MenuFlyoutSeparator，这是一条水平线，用于分隔菜单中的项。

MenuFlyoutSubItem 派生自 MenuFlyoutItem，后者又派生自 MenuItem。 MenuItem 定义多个属性，这些属性允许指定菜单项的外观和行为。 可以通过设置 Text和 IconImageSource 属性来定义菜单项或子项的外观。 可以通过设置Clicked、Command和CommandParameter属性来定义对菜单项或子项单击的响应。 有关菜单项的详细信息，请参阅 “显示”菜单项。

警告

在 Mac Catalyst 上，当前不支持 Entry 的上下文菜单。

创建上下文菜单项

可以将对象 MenuFlyout 添加到 FlyoutBase.ContextFlyout 派生自 Element的任何控件的附加属性中。 当用户右键单击控件时，上下文菜单将显示在单击指针的位置。

以下示例演示了一个定义上下文菜单的WebView：

<WebView x:Name="webView"
         Source="https://learn.microsoft.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>

在此示例中，上下文菜单定义两个菜单项：

WebView 上的上下文菜单的屏幕截图。

单击菜单项时， 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事件处理程序检索CommandParameter被单击的对象MenuFlyoutItem的属性值，并使用其值生成导航到的 WebView URL。

警告

目前无法向运行时添加项或从 MenuFlyout 中删除项。

键盘快捷键可以添加到上下文菜单项，以便可以通过键盘快捷方式调用上下文菜单项。 有关详细信息，请参阅 键盘加速器。

创建子菜单项

可以通过向 MenuFlyout 添加一个或多个 MenuFlyoutSubItem 对象，将子菜单项添加到上下文菜单中。

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

在此示例中，上下文菜单定义一个菜单项和两个子菜单，每个子菜单包含三个菜单项：

包含子菜单项的上下文菜单的屏幕截图。

在菜单项上显示图标

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 上显示图标和文本：

使用图标的上下文菜单的屏幕截图。

有关显示字体图标的详细信息，请参阅 显示字体图标。 有关将映像添加到 .NET MAUI 项目的信息，请参阅 向 .NET MAUI 应用项目添加图像。

  • Last updated on