.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应用中灵活地实现和使用上下文菜单,为用户提供更加丰富的交互体验。

相关推荐
九鼎科技-Leo5 小时前
什么是 WPF 中的依赖属性?有什么作用?
windows·c#·.net·wpf
长亭外的少年7 小时前
Kotlin 编译失败问题及解决方案:从守护进程到 Gradle 配置
android·开发语言·kotlin
建群新人小猿9 小时前
会员等级经验问题
android·开发语言·前端·javascript·php
dot.Net安全矩阵10 小时前
.NET 通过模块和驱动收集本地EDR的工具
windows·安全·web安全·.net·交互
zls36536510 小时前
.NET开源实时应用监控系统:WatchDog
.net
djk888810 小时前
.net将List<实体1>的数据转到List<实体2>
数据结构·list·.net
1024小神10 小时前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
兰琛10 小时前
20241121 android中树结构列表(使用recyclerView实现)
android·gitee
Y多了个想法11 小时前
RK3568 android11 适配敦泰触摸屏 FocalTech-ft5526
android·rk3568·触摸屏·tp·敦泰·focaltech·ft5526
NotesChapter12 小时前
Android吸顶效果,并有着ViewPager左右切换
android