.NET MAUI中点击按钮弹出多选项菜单的实现方法

方案1：使用Button自带的Flyout属性（推荐） #

MAUI的Button原生支持Flyout属性，左键点击按钮时会自动弹出绑定的菜单，这是最简洁的原生实现方式，无需额外事件处理。

XAML示例 #

<Button Text="弹出菜单">
    <Button.Flyout>
        <Flyout>
            <FlyoutItem Text="菜单项1">
                <FlyoutItem.Icon>
                    <FontImageSource Glyph="&#xe700;" FontFamily="Segoe MDL2 Assets"/>
                </FlyoutItem.Icon>
                <FlyoutItem.Command>
                    <Command>
                        <x:Arguments>
                            <Action>
                                <x:Static Member="local:MainPage.MenuItem1Clicked"/>
                            </Action>
                        </x:Arguments>
                    </Command>
                </FlyoutItem.Command>
            </FlyoutItem>
            <FlyoutItem Text="菜单项2">
                <FlyoutItem.Icon>
                    <FontImageSource Glyph="&#xe701;" FontFamily="Segoe MDL2 Assets"/>
                </FlyoutItem.Icon>
                <FlyoutItem.Command>
                    <Command>
                        <x:Arguments>
                            <Action>
                                <x:Static Member="local:MainPage.MenuItem2Clicked"/>
                            </Action>
                        </x:Arguments>
                    </Command>
                </FlyoutItem.Command>
            </FlyoutItem>
            <!-- 添加分隔线 -->
            <FlyoutSeparator/>
            <FlyoutItem Text="退出">
                <FlyoutItem.Command>
                    <Command>
                        <x:Arguments>
                            <Action>
                                <x:Static Member="local:MainPage.ExitClicked"/>
                            </Action>
                        </x:Arguments>
                    </Command>
                </FlyoutItem.Command>
            </FlyoutItem>
        </Flyout>
    </Button.Flyout>
</Button>

后台C#逻辑 #

直接定义菜单点击对应的处理方法即可：

public static void MenuItem1Clicked()
{
    Application.Current.MainPage.DisplayAlert("提示", "菜单项1被点击", "确定");
}

public static void MenuItem2Clicked()
{
    // 菜单项2的业务逻辑
}

public static void ExitClicked()
{
    // 退出相关逻辑
}

方案2：手动触发ContextFlyout（复用已有菜单场景） #

如果已经定义了ContextFlyout，可以通过按钮的Clicked事件手动调用ShowAt方法，实现左键触发右键菜单的效果：

XAML示例 #

<Button Text="弹出菜单" Clicked="Button_Clicked">
    <Button.ContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="菜单项A" Clicked="MenuFlyoutItemA_Clicked"/>
            <MenuFlyoutItem Text="菜单项B" Clicked="MenuFlyoutItemB_Clicked"/>
        </MenuFlyout>
    </Button.ContextFlyout>
</Button>

后台C#逻辑 #

private void Button_Clicked(object sender, EventArgs e)
{
    var button = sender as Button;
    if (button?.ContextFlyout is FlyoutBase flyout)
    {
        flyout.ShowAt(button);
    }
}

private void MenuFlyoutItemA_Clicked(object sender, EventArgs e)
{
    // 菜单项A的处理逻辑
}

private void MenuFlyoutItemB_Clicked(object sender, EventArgs e)
{
    // 菜单项B的处理逻辑
}

方案3：自定义Popup菜单（高度自定义场景） #

如果需要完全自定义菜单的样式、布局，可以用MAUI的Popup控件打造专属菜单：

自定义Popup内容（MenuPopup.xaml） #

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.MenuPopup">
    <VerticalStackLayout BackgroundColor="White" WidthRequest="200" Padding="5">
        <Button Text="自定义菜单项1" Clicked="MenuItem1_Clicked" Borderless="True" HorizontalOptions="Start"/>
        <Button Text="自定义菜单项2" Clicked="MenuItem2_Clicked" Borderless="True" HorizontalOptions="Start"/>
        <BoxView HeightRequest="1" BackgroundColor="#eee" Margin="0,5"/>
        <Button Text="关闭" Clicked="Close_Clicked" Borderless="True" TextColor="#ff4444" HorizontalOptions="Start"/>
    </VerticalStackLayout>
</ContentView>

触发Popup的主页面逻辑 #

private async void Button_Clicked(object sender, EventArgs e)
{
    var popup = new MenuPopup();
    await Application.Current.MainPage.ShowPopupAsync(popup);
}

// MenuPopup.xaml.cs中的事件处理
private void MenuItem1_Clicked(object sender, EventArgs e)
{
    // 自定义菜单项1逻辑
    this.Close();
}

private void MenuItem2_Clicked(object sender, EventArgs e)
{
    // 自定义菜单项2逻辑
    this.Close();
}

private void Close_Clicked(object sender, EventArgs e)
{
    this.Close();
}

内容的提问来源于stack exchange，提问作者Jtastic