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

相关推荐
hweiyu0012 小时前
Android基础入门教程(视频教程)
android
whm277714 小时前
Visual Basic 参数传送-形参与实参
开发语言·visual studio
Yupureki14 小时前
从零开始的C++学习生活 9:stack_queue的入门使用和模板进阶
c语言·数据结构·c++·学习·visual studio
冻咸鱼16 小时前
MySQL中表操作
android·sql·mysql·oracle
技术小黑屋_16 小时前
从零搭建 Android ADB MCP Server:让 AI 助手直接操控你的 Android 设备
android·adb
一匹电信狗16 小时前
【C++】C++风格的类型转换
服务器·开发语言·c++·leetcode·小程序·stl·visual studio
2501_9159214316 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
CodeCraft Studio16 小时前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
Jeled17 小时前
Android 集成指南:Google 登录、Facebook 登录 与 Firebase 深入接入(实战)
android·kotlin·android studio·memcached·facebook
用户0917 小时前
Android唤醒锁优化指南
android·面试·kotlin