如何在UWP中同一位置组合使用Flyout与MenuFlyout

问题原因 #

UWP/WinUI 中 Button.Flyout 是单一依赖属性，仅支持赋值一个 FlyoutBase 派生类实例，你同时为其设置两个Flyout对象时，仅最后定义的MenuFlyout会生效，所以无法达到预期效果。

解决方案 #

场景1：同一个弹出层同时包含自定义内容+菜单

如果你需要弹出层顶部放自定义内容、下方接菜单选项，直接复用MenuFlyout的Header属性承载自定义内容即可，完整代码如下：

<Button Width="24" Height="24" Padding="0" HorizontalAlignment="Right" CornerRadius="12" BorderThickness="0">
    <Image Source="/Assets/UserLogo.png"/>
    <Button.Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedRight">
            <!-- 此处替换为你原来Flyout中的自定义内容 -->
            <MenuFlyout.Header>
                <StackPanel Padding="12,8">
                    <TextBlock Text="Sample"/>
                    <!-- 可继续添加头像、用户名等需要的自定义控件 -->
                </StackPanel>
            </MenuFlyout.Header>
            <MenuFlyout.Items>
                <MenuFlyoutSubItem Text="Add" Icon="Add" Tag="left">
                    <MenuFlyoutItem Text="New repository"/>
                    <MenuFlyoutItem Text="Import repository"/>
                    <MenuFlyoutItem Text="New gist"/>
                    <MenuFlyoutItem Text="New organization"/>
                    <MenuFlyoutItem Text="New project"/>
                </MenuFlyoutSubItem>
                <MenuFlyoutItem Text="Your profile"/>
                <MenuFlyoutItem Text="Your repository"/>
                <MenuFlyoutItem Text="Your codespaces"/>
                <MenuFlyoutItem Text="Your projects"/>
                <MenuFlyoutItem Text="Your stars"/>
                <MenuFlyoutItem Text="Your gists"/>
                <MenuFlyoutSeparator/>
                <MenuFlyoutItem Text="Settings" Icon="Setting" Tag="right"/>
                <MenuFlyoutSeparator/>
                <MenuFlyoutItem Text="Sign out" Tag="right"/>
            </MenuFlyout.Items>
        </MenuFlyout>
    </Button.Flyout>
</Button>

场景2：不同交互触发不同Flyout

如果你需要左键点击弹出普通Flyout、右键点击弹出菜单Flyout，可以将两个Flyout放到按钮资源中，手动处理对应事件控制弹出：

<Button Width="24" Height="24" Padding="0" HorizontalAlignment="Right" CornerRadius="12" BorderThickness="0" 
        Click="Button_OnClick" RightTapped="Button_OnRightTapped">
    <Image Source="/Assets/UserLogo.png"/>
    <Button.Resources>
        <Flyout x:Key="CustomFlyout">
            <StackPanel>
                <TextBlock Text="Sample"/>
            </StackPanel>
        </Flyout>
        <MenuFlyout x:Key="UserMenuFlyout" Placement="BottomEdgeAlignedRight">
            <MenuFlyout.Items>
                <!-- 菜单项内容和之前保持一致，此处省略 -->
            </MenuFlyout.Items>
        </MenuFlyout>
    </Button.Resources>
</Button>

后台事件逻辑：

private void Button_OnClick(object sender, RoutedEventArgs e)
{
    var customFlyout = (Flyout)((Button)sender).Resources["CustomFlyout"];
    customFlyout.ShowAt((Button)sender);
}

private void Button_OnRightTapped(object sender, RightTappedRoutedEventArgs e)
{
    var menuFlyout = (MenuFlyout)((Button)sender).Resources["UserMenuFlyout"];
    menuFlyout.ShowAt((Button)sender, e.GetPosition((Button)sender));
}

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