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

相关推荐
HAPPY酷1 小时前
Visual Studio C++ 项目“添加现有项“避坑指南
java·c++·visual studio
guizhoumen3 小时前
liunx环境手动安装.net8的教程
.net
Android系统攻城狮3 小时前
Android tinyalsa深度解析之pcm_get_timestamp调用流程与实战(一百一十八)
android·pcm·tinyalsa·android hal·audio hal
yuezhilangniao5 小时前
win10环境变量完全指南:Java、Maven、Android、Flutter -含我的环境备份
android·java·maven
奔跑吧 android6 小时前
【车载Audio】【AudioHal 06】【高通音频架构】【深入浅出 Android Audio HAL:从加载到函数指针绑定的全链路解析】
android·音视频·audioflinger·aosp13·8295·audiohal·高通音频架构
无巧不成书02186 小时前
Kotlin Multiplatform (KMP) 鸿蒙开发整合实战|2026最新方案
android·开发语言·kotlin·harmonyos·kmp
全栈小57 小时前
【C#】.net 6.0和8.0有什么区别,以及8.0增加了那些功能,这些功能有那些作用
开发语言·c#·.net
qq_297908017 小时前
C#印刷线路板ERP进销存报价财务库存贸易生产企业管理系统软件
sqlserver·开源·c#·.net·开源软件