在 .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 的属性定义对单击菜单项或子项的响应。有关菜单项的详细信息，请参阅展示菜单项。

警告

Mac Catalyst 目前不支持 Entry 上的上下文菜单。

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

下列示例显示定义上下文菜单的 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>

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

单击菜单项时，将执行 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 添加项或删除项。

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

在 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 应用项目添加图像。

通过

创建上下文菜单项

创建子菜单项

在菜单项上显示图标

其他资源