.NET MAUI(.NET Multi-platform App UI)上下文菜单

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

在菜单项上显示图标

MenuFlyoutItemMenuFlyoutSubItemMenuItem类继承IconImageSource属性,允许你在菜单项旁边显示图标。图标可以是图像或字体图标。但请注意,Mac Catalyst目前不支持在上下文菜单项上显示图标。

注意事项

  • 目前,运行时无法向MenuFlyout添加或删除项。
  • Mac Catalyst不支持在Entry控件上显示上下文菜单,且不支持在上下文菜单项上显示图标。

通过以上步骤和注意事项,你可以在.NET MAUI应用中灵活地实现和使用上下文菜单,为用户提供更加丰富的交互体验。

相关推荐
九鼎科技-Leo7 小时前
了解 .NET 运行时与 .NET 框架:基础概念与相互关系
windows·c#·.net
躺不平的理查德9 小时前
数据结构-链表【chapter1】【c语言版】
c语言·开发语言·数据结构·链表·visual studio
帅得不敢出门9 小时前
安卓设备adb执行AT指令控制电话卡
android·adb·sim卡·at指令·电话卡
九鼎科技-Leo9 小时前
什么是 ASP.NET Core?与 ASP.NET MVC 有什么区别?
windows·后端·c#·asp.net·mvc·.net
.net开发9 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
我又来搬代码了10 小时前
【Android】使用productFlavors构建多个变体
android
weixin_5375904512 小时前
《C++ Primer Plus》中文版第二章习题
开发语言·c++·visual studio
德育处主任12 小时前
Mac和安卓手机互传文件(ADB)
android·macos
芦半山12 小时前
Android“引用们”的底层原理
android·java
迃-幵13 小时前
力扣:225 用队列实现栈
android·javascript·leetcode