当前位置：首页 > article >正文

.NET MAUI（.NET Multi-platform App UI）上下文菜单

article 2024/9/28 13:19:14

在.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控件上添加上下文菜单的代码如下：

<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属性，以决定需要执行的操作。

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控件上添加带有子菜单的上下文菜单：

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