在.NET MAUI(.NET Multi-platform App UI)框架中,上下文菜单(通常称为右键菜单)是一个为用户提供针对特定控件上下文相关命令的界面元素。这些菜单可以非常方便地添加到.NET MAUI应用的Mac Catalyst和Windows平台上,以增强用户体验。下面,我将从C#程序员的视角,对.NET MAUI中的上下文菜单进行详解。
上下文菜单的定义
在.NET MAUI中,上下文菜单是通过MenuFlyout
类来定义的。MenuFlyout
可以包含多个子项,包括:
- MenuFlyoutItem:表示可点击的菜单项。
- MenuFlyoutSubItem :表示可点击的子菜单项,它可以包含多个
MenuFlyoutItem
。 - MenuFlyoutSeparator:用于分隔菜单中的项,以提高可读性。
创建上下文菜单项
要在控件上添加上下文菜单,你可以将MenuFlyout
对象添加到该控件的FlyoutBase.ContextFlyout
附加属性中。当用户右键单击该控件时,上下文菜单将在点击位置显示。
例如,在WebView
控件上添加上下文菜单的代码如下:
XML
<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
事件处理程序,以处理菜单项的点击事件。
处理点击事件
在事件处理程序中,你可以通过sender
参数获取被点击的MenuFlyoutItem
对象,并访问其CommandParameter
属性,以决定需要执行的操作。
cs
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}" };
}
创建子菜单项
你也可以在MenuFlyout
中添加MenuFlyoutSubItem
来创建子菜单。每个MenuFlyoutSubItem
可以包含多个MenuFlyoutItem
。
例如,在Label
控件上添加带有子菜单的上下文菜单:
cs
<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" />
<!-- 其他子菜单项 -->
</MenuFlyoutSubItem>
<!-- 其他子菜单 -->
</MenuFlyout>
</FlyoutBase.ContextFlyout>
</Label>
在菜单项上显示图标
MenuFlyoutItem
和MenuFlyoutSubItem
从MenuItem
类继承IconImageSource
属性,允许你在菜单项旁边显示图标。图标可以是图像或字体图标。但请注意,Mac Catalyst目前不支持在上下文菜单项上显示图标。
注意事项
- 目前,运行时无法向
MenuFlyout
添加或删除项。 - Mac Catalyst不支持在
Entry
控件上显示上下文菜单,且不支持在上下文菜单项上显示图标。
通过以上步骤和注意事项,你可以在.NET MAUI应用中灵活地实现和使用上下文菜单,为用户提供更加丰富的交互体验。