动态控件之UI和数据加载分离

一、问题说明

比如一个弹框页面中包含listbox控件，弹框页面打开时，先进行listbox初始化，然后再进行数据加载，如果数据加载较慢，这里就会出现，弹框一直无法显示出来，直到数据加载完成，赋值给listbox控件，才会显示。

_listbox.ItemsSource = data;

 

二、解决方式

解决方式也简单，就是异步，多线程等等吧。比如加载数据的方法如下：

private void InitAlbumData(string? text = "")
{
    IsBusy = true;
    List<AlbumModel>? albums = new List<AlbumModel>();
    Task.Run(() =>
    {
        Thread.Sleep(5000);
        albums = MockData.GetAlbums(text);

    }).ContinueWith(t =>
    {
        if (t.IsCompletedSuccessfully)
        {
            // 数据加载完成后更新数据源  
            albumViews.Clear();
            if (albums != null && albums.Count > 0)
            {
                foreach (var album in albums)
                {
                    AlbumView albumView = new AlbumView(album);
                    albumViews.Add(albumView);
                }
            }
            IsBusy = false;
        }
    }, TaskScheduler.FromCurrentSynchronizationContext());
}

这样就可以了。

TaskScheduler.FromCurrentSynchronizationContext() 确保在UI线程上更新数据源 

涉及到数据的ui控件的均应该在ContinueWith中执行，等待数据加载好后，再进行处理，比如上边AlbumView就是一个封装的用户控件。

这样就保证了弹框能够直接弹出显示，数据会在加载好后进行展示，而不是弹框卡顿，等待数据加载完成后才会显示了。