在虚拟化列表框中延迟加载图像

Question

我正在尝试异步加载列表框中每个项目的缩略图。

<Image Source="{Binding Path=Thumbnail, TargetNullValue={StaticResource DefaultImage}}"/>

由于列表框是虚拟化的 Thumbnail 属性的 getter 仅在项目位于显示端口或接近该端口时调用。

public BitmapSource Thumbnail
{
    get
    {
        TriggerLoad();
        return _thumbnail;
    }
}

我正在等待在 TriggerLoad 函数中加载 Thumbail 的昂贵操作，但 UI 响应速度不快，尤其是当您尝试快速滚动大项目列表时。

private async void TriggerLoad()
{
    if (!LoadTriggered)
    {
        LoadTriggered = true;
        var cacheItem = _cache[key] as CacheItem;

        if (cacheItem != null)
            await LoadBitmapFromCache(cacheItem); // returns a Task
        else
            await LoadBitmapFromService(Id); // returns a Task
    }
}

在这里找到了一个类似的问题，但这与将项目加载到列表框无关。有没有更好的方法来延迟加载绑定到列表框的数据的一部分？

编辑：我尝试了 PriorityBinding 和 IsAsync 选项，滚动并不比我当前的解决方案好。

Answer 1

听起来虽然您的 UI 正在虚拟化，但它加载新图像的速度不够快，无法跟上用户的滚动速度。尝试将 VirtualizationMode 设置为 Recycling 并设置更长的 CacheLength。像这样：

<ListBox
    VirtualizingPanel.IsContainerVirtualizable="True"
    VirtualizingPanel.IsVirtualizing="True"
    VirtualizingPanel.VirtualizationMode="Recycling"
    VirtualizingPanel.CacheLengthUnit="Page"
    VirtualizingPanel.CacheLength="2,2"
    etc.../>

将 CacheLength 从“1,1”增加到“2,2”意味着将在向用户显示页面之前和之后将两个“页面”（或项目的视口值）加载到内存中。您的应用程序将消耗更多内存，但用户将能够在遇到未加载的图像之前进一步、更快地滚动。