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

Question

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

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

由于 Listbox 是虚拟化的，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
    }
}

发现了一个类似的问题here，但这不是关于将项目加载到列表框。有没有更好的方法来延迟加载您绑定到 Listbox 的部分数据？

编辑：我尝试了 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”意味着在向用户显示页面之前和之后将两个“页面”（或视口的项目）加载到内存中。您的应用会消耗更多内存，但用户可以在遇到未加载的图像之前滚动得更快、更远。