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

问题描述

我试图延迟加载缩略图的ListBox中的异步每个项目。

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

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

由于列表框是虚拟财产的缩略图的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;
    }
}

我在等待上加载Thumbail在TriggerLoad功能昂贵的操作，尤其是当您尝试通过项目的大名单滚动速度快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
    }
}

发现了类似的问题，这里但它不是有关加载项列表框。是否有延迟加载什么更好的方法只绑定到列表框数据的某些部分？

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.

推荐答案

听起来虽然你的用户界面虚拟化是不加载新图像不够迅速跟上用户的滚动。
尝试VirtualizationMode设置回收，并设置一个较长的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.../>

这1,1增加CacheLength为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屋！