WinUI 3中ListView集合变更时如何强制更新内部ComboBox？

问题描述 #

ListView的ItemTemplate内包含ComboBox，用于显示项的可编辑属性。因数据来自异步源，通过Loaded事件初始化ComboBox的SelectedItem属性。页面首次加载正常，但调用SetItems()更新集合（清空后重新添加项）时出现异常：

• 首次加载时每个项的ComboBox均触发Loaded事件，SelectedValue显示正确；
• 后续更新时仅最后一项的ComboBox触发Loaded事件，其他项的ComboBox显示混乱，内容仿佛上移一位。

XAML代码 #

<ListView ItemsSource="{x:Bind MyCollection}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="models:MyDataType">
            <!-- 省略部分内容 -->
            <ComboBox x:Name="MyComboBox"
                      Tag="{x:Bind ID}"
                      SelectedValuePath="Status"
                      Loaded="MyComboBox_Loaded"></ComboBox>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

后台代码 #

// 集合
public ObservableCollection<MyDataType> MyCollection { get; set; }

// ComboBox Loaded事件处理程序
private void MyComboBox_Loaded(object sender, RoutedEventArgs e)
{
    ComboBox comboBox = sender as ComboBox;
    string id = comboBox.Tag as string;

    MyDataType item = this.MyCollection.Where(i => i.ID == id).FirstOrDefault();

    comboBox.SelectedValue = item.Status;

    comboBox.SelectionChanged += this.MyComboBox_SelectionChanged;

    System.Diagnostics.Debug.WriteLine("ComboBox for item " + item.ID + " loaded and set to " + item.Status);
}

// 更新可观察集合的方法
public void SetItems(List<MyDataType> items)
{
    this.MyCollection.Clear();
    items.ForEach(i => this.MyCollection.Add(i));
}

问题根源 #

确实是ListView的UI复用机制导致：为提升性能，ListView会回收复用已创建的UI元素，复用的元素不会再次触发Loaded事件，因此无法重新初始化ComboBox，导致显示混乱。

解决方案 #

利用DataContextChanged事件替代（或配合）Loaded事件——ListView复用UI元素时，会将元素的DataContext更新为新的集合项，监听该事件可在每次项变更时重新初始化ComboBox。同时需注意移除重复绑定的事件，避免内存泄漏。

修改后的后台代码 #

// 集合
public ObservableCollection<MyDataType> MyCollection { get; set; }

private void MyComboBox_Loaded(object sender, RoutedEventArgs e)
{
    ComboBox comboBox = sender as ComboBox;
    // 注册DataContextChanged事件，处理UI复用场景
    comboBox.DataContextChanged += MyComboBox_DataContextChanged;
    // 首次加载时初始化
    InitializeComboBox(comboBox);
}

private void MyComboBox_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
{
    ComboBox comboBox = sender as ComboBox;
    // DataContext变更（复用UI）时重新初始化
    InitializeComboBox(comboBox);
}

private void InitializeComboBox(ComboBox comboBox)
{
    MyDataType item = comboBox.DataContext as MyDataType;
    if (item == null) return;

    // 先移除旧的事件绑定，避免重复触发
    comboBox.SelectionChanged -= MyComboBox_SelectionChanged;

    // 重新初始化SelectedValue
    comboBox.SelectedValue = item.Status;

    // 绑定SelectionChanged事件
    comboBox.SelectionChanged += MyComboBox_SelectionChanged;

    System.Diagnostics.Debug.WriteLine($"ComboBox for item {item.ID} initialized to {item.Status}");
}

// 优化集合更新方法，减少UI刷新次数
public void SetItems(List<MyDataType> items)
{
    using (CollectionViewSource.GetDefaultView(MyCollection).DeferRefresh())
    {
        MyCollection.Clear();
        foreach (var item in items)
        {
            MyCollection.Add(item);
        }
    }
}

额外说明 #

1. DataContextChanged的优势：无论UI元素是首次创建还是被复用，只要绑定的集合项变更，就会触发该事件，确保每次都能正确初始化ComboBox；
2. 移除旧事件绑定：复用UI元素时，如果不移除之前的SelectionChanged绑定，会导致同一事件被多次注册，引发逻辑错误和内存泄漏；
3. DeferRefresh优化：在更新集合时使用DeferRefresh，可将多次UI合并为一次刷新，提升性能，避免频繁的UI更新。

内容的提问来源于stack exchange，提问作者Michael Kintscher they-them