在虚拟化列表框中延迟加载图像 [英] Lazy loading images in Virtualized Listbox

问题描述

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

I'm trying to lazy load thumbnail image for each item in a Listbox asynchronously.

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

由于 Listbox 是虚拟化的，Thumbnail 属性的 getter 仅在项目位于显示端口或靠近显示端口时被调用.

Since Listbox is virtualized Thumbnail property's getter is called only when an item is in display port or near to that.

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

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

I am awaiting on expensive operation that loads Thumbail in TriggerLoad function, but UI isn't very responsive especially when you try to scroll fastly through large list of items.

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
    }
}

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

Found a similar questions here but it is not about loading items to a Listbox. Is there any better approach to lazy load only some part of the data you bind to Listbox?

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

I tried PriorityBinding and IsAsync option and scrolling is not better than my current solution.

推荐答案

听起来虽然你的 UI 是虚拟化的，但它加载新图像的速度不足以跟上用户的滚动.尝试将 VirtualizationMode 设置为 Recycling 并设置更长的 CacheLength.像这样:

Sounds like although your UI is virtualizing it isn't loading newer images quickly enough to keep up with your user's scrolling. Try setting VirtualizationMode to Recycling and set a longer CacheLength. Like so:

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

将 CacheLength 从1,1"增加到2,2"意味着在向用户显示的页面之前和之后将两个页面"(或相当于项目的视口)加载到内存中.您的应用会消耗更多的内存，但用户可以在遇到未加载的图像之前滚动得更快、更远.

Increasing CacheLength from "1,1" to "2,2" means two "pages" (or view-ports worth of items) will be loaded into memory before and after the page displayed to the user. Your app will consume that much more memory but users will be able to scroll further, faster, before running into images that aren't loaded.

这篇关于在虚拟化列表框中延迟加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！