UWP中MenuFlyout子项绑定Flyout无效问题求助

问题核心原因 #

UWP的MenuFlyoutItem本身没有内置Flyout属性，直接给它配置Flyout相关内容不会被系统识别，这就是你的代码被忽略的根本原因。

两种可行解决方法 #

方法一：用Button作为MenuFlyout的子项 #

Button控件原生支持Flyout属性，把它嵌入MenuFlyout即可实现点击弹出Flyout的效果，示例XAML代码：

<Button Content="设置">
    <Button.Flyout>
        <MenuFlyout>
            <!-- 用Button替代MenuFlyoutItem，直接绑定Flyout -->
            <Button Content="打开自定义Flyout">
                <Button.Flyout>
                    <Flyout>
                        <StackPanel Width="200" Padding="10">
                            <TextBlock Text="这是自定义Flyout内容" Margin="0 0 0 10"/>
                            <Button Content="确定" HorizontalAlignment="Right"/>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
            <!-- 其他常规MenuFlyout项 -->
            <MenuFlyoutItem Text="常规设置"/>
        </MenuFlyout>
    </Button.Flyout>
</Button>

如果觉得Button和MenuFlyoutItem视觉风格不一致，可以通过修改Button的Style让两者外观统一。

方法二：在MenuFlyoutItem的Click事件中手动触发Flyout #

如果必须使用MenuFlyoutItem，可以在后台代码里手动调用Flyout的ShowAt方法指定弹出位置。

XAML代码：

<Button Content="设置">
    <Button.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem x:Name="FlyoutTriggerItem" Text="打开自定义Flyout" Click="FlyoutTriggerItem_Click"/>
            <MenuFlyoutItem Text="常规设置"/>
        </MenuFlyout>
    </Button.Flyout>
    <!-- 定义需要弹出的Flyout -->
    <Flyout x:Name="CustomFlyout">
        <StackPanel Width="200" Padding="10">
            <TextBlock Text="手动触发的Flyout内容" Margin="0 0 0 10"/>
            <Button Content="取消" HorizontalAlignment="Right"/>
        </StackPanel>
    </Flyout>
</Button>

后台C#代码：

private void FlyoutTriggerItem_Click(object sender, RoutedEventArgs e)
{
    var triggerItem = sender as MenuFlyoutItem;
    // 将点击的MenuFlyoutItem作为Flyout的弹出锚点
    CustomFlyout.ShowAt(triggerItem);
}

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