多Flyout场景下，GridView项的MenuFlyout ItemsSource绑定异常求助

我之前也踩过这个一模一样的坑！用了那个附加属性方案实现MenuFlyout的ItemsSource绑定后，第一次点击正常，切换到其他GridView项就炸——核心原因其实是MenuFlyout的实例复用问题：默认情况下，Flyout控件会被多个GridViewItem共享复用，导致绑定上下文混乱，第二次点击时旧的绑定数据和新的Item上下文冲突，触发异常。

下面给你几个亲测有效的解决方案：

方案1：给每个GridViewItem分配独立的Flyout实例 #

这是最直接的解决办法，不要在ItemTemplate里引用静态Flyout资源，而是直接在模板内部定义Flyout，确保每个Item都拥有自己的Flyout实例：

<GridView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <!-- 直接在模板内定义Flyout，每个Item都会生成独立实例 -->
            <Grid.Flyout>
                <MenuFlyout local:MenuFlyoutHelper.ItemsSource="{Binding MenuItems}">
                    <local:MenuFlyoutHelper.ItemTemplate>
                        <DataTemplate>
                            <MenuFlyoutItem Text="{Binding Text}" Command="{Binding Command}" />
                        </DataTemplate>
                    </local:MenuFlyoutHelper.ItemTemplate>
                </MenuFlyout>
            </Grid.Flyout>
            
            <!-- 你的Item内容 -->
            <TextBlock Text="{Binding DisplayText}" Margin="10" />
        </Grid>
    </DataTemplate>
</GridView.ItemTemplate>

这样每个Flyout都和对应的GridViewItem绑定，不会出现上下文串用的问题。

方案2：修复附加属性的清理逻辑 #

如果你还是想用共享资源的方式，可以修改Jerry Nixon的附加属性代码，在绑定更新或Flyout关闭时做好清理工作：

1. 在ItemsSource属性变更时，先清空原有Flyout项再添加新数据：

private static void ItemsSourcePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var flyout = d as MenuFlyout;
    if (flyout == null) return;

    // 先清空旧项，避免新旧数据冲突
    flyout.Items.Clear();

    var newItems = e.NewValue as IEnumerable;
    if (newItems == null) return;

    var itemTemplate = GetItemTemplate(flyout);
    foreach (var item in newItems)
    {
        var container = (FrameworkElement)itemTemplate.LoadContent();
        container.DataContext = item;
        flyout.Items.Add(container);
    }
}

2. 监听Flyout的Closed事件，关闭时清空内容并重置上下文，防止内存泄漏和旧数据残留：

private static void AttachCleanupHandler(MenuFlyout flyout)
{
    flyout.Closed += (s, args) =>
    {
        flyout.Items.Clear();
        flyout.DataContext = null;
    };
}

记得在附加属性首次设置时调用这个AttachCleanupHandler方法。

方案3：改用AttachedFlyout+手动触发的方式 #

这种方式能更精准地控制Flyout的显示时机，避免复用问题：

<GridView.ItemTemplate>
    <DataTemplate>
        <Grid x:Name="ItemRoot" Tag="{Binding}">
            <!-- 绑定AttachedFlyout -->
            <FlyoutBase.AttachedFlyout>
                <MenuFlyout local:MenuFlyoutHelper.ItemsSource="{Binding MenuItems}">
                    <local:MenuFlyoutHelper.ItemTemplate>
                        <DataTemplate>
                            <MenuFlyoutItem Text="{Binding Text}" />
                        </DataTemplate>
                    </local:MenuFlyoutHelper.ItemTemplate>
                </MenuFlyout>
            </FlyoutBase.AttachedFlyout>

            <!-- 手动触发Flyout，比如右键点击 -->
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="RightTapped">
                    <Core:InvokeCommandAction Command="{Binding ShowFlyoutCommand}" CommandParameter="{Binding ElementName=ItemRoot}" />
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>

            <!-- Item内容 -->
            <TextBlock Text="{Binding DisplayText}" />
        </Grid>
    </DataTemplate>
</GridView.ItemTemplate>

然后在ViewModel里实现触发命令：

public ICommand ShowFlyoutCommand => new RelayCommand<FrameworkElement>(element =>
{
    if (element != null)
    {
        FlyoutBase.ShowAttachedFlyout(element);
    }
});

每次触发都会使用当前Item绑定的Flyout，上下文完全对应，不会出问题。

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