Xamarin Forms UWP 绑定ListView的ObservableCollection更新延迟问题

根因说明 #

该问题由两个已知场景共同导致：

1. MainThread.BeginInvokeOnMainThread是无等待的异步调度方法，集合修改操作的执行时序和UI渲染不同步，导致Task.Delay触发时部分条目还未完成渲染
2. UWP平台Xamarin Forms的ListView默认RecycleElement缓存策略对字符串类型的绑定项存在复用异常，会出现空行、内容重复显示的问题

修复步骤 #

1. 修正UI线程调度逻辑 #

将BeginInvokeOnMainThread替换为可等待的InvokeOnMainThreadAsync，把单次循环内的所有集合修改操作封装到同一个UI调度块中，保证UI完成渲染后再进入延时：

for(int i = 0; i < length; i++)
{
    // 计算逻辑保留在调度块外，避免阻塞UI线程
    string firstMsg = "first message";
    string newValueMsg = "some new value";

    // 单次循环内所有集合修改统一调度
    await MainThread.InvokeOnMainThreadAsync(() =>
    {
        myObserableCollection.Add(firstMsg);
        // 其他添加操作
        myObserableCollection.Add(newValueMsg);
    });

    await Task.Delay(delayTime);
}

注：你提供的示例代码中for循环多写了一个右括号，实际调试前可先修正该语法错误。

2. 修复ListView项复用异常 #

两种方案二选一即可：

方案A：修改ListView缓存策略

在XAML中修改ListView的CachingStrategy属性：

<ListView 
    CachingStrategy="RetainElement"
    ItemsSource="{Binding myObserableCollection}"
    <!-- 其余属性保持不变 -->
>

方案B：绑定自定义包装类（推荐）

避免直接绑定字符串集合，将内容包装到实现了INotifyPropertyChanged的自定义类中，从根源上避免复用冲突：

// 自定义消息包装类
public class DisplayMessage : INotifyPropertyChanged
{
    private string _content;
    public string Content
    {
        get => _content;
        set
        {
            _content = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

// 修改集合定义
public ObservableCollection<DisplayMessage> myObserableCollection { get; set; } = new();

// 修改添加逻辑
await MainThread.InvokeOnMainThreadAsync(() =>
{
    myObserableCollection.Add(new DisplayMessage { Content = "first message" });
    myObserableCollection.Add(new DisplayMessage { Content = "some new value" });
});

对应修改XAML的ItemTemplate绑定：

<ListView ItemsSource="{Binding myObserableCollection}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Content}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

内容的提问来源于stack exchange，提问作者Matthew The Terrible