在VirtualizingStackPanel中检测项目可见性,以获取延迟加载图像

时间:2013-07-16 22:02:12

标签: windows-store-apps virtualizingstackpanel

以下是我的情景:

我有一个Gridview,显示从网络服务检索的数据。数据的数量可能非常大。因此,VirtualizingStackPanel用于显示内容。其中一些数据可能需要在渲染图像时进行回溯(延迟加载)

我(非常有限)的理解是,VirtualStackPanel将自动请求数据作为需要呈现数据的网格。如果需要渲染的元素是图像类型,我发送占位符图像并提交异步网络调用以检索该图像。

但是,我注意到正在接收渲染所有元素的调用,因此发送大量网络调用以检索图像(特别是如果大多数项目是图像类型的话)。

问题:我是否应该在代码(XAML或C#)中为VirtualizingStackPanel配置一些内容,或者应该检测是否真正显示该项目,然后发出网络呼叫?

这是我的XAML。

    <GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemGridView"
        AutomationProperties.Name="Grouped Items"
        Grid.RowSpan="3"
        Padding="116,137,40,46"
        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
        VirtualizingStackPanel.VirtualizationMode="Standard"
        ItemTemplateSelector="{StaticResource CellStyleSelector}"
        ItemClick="ItemView_ItemClick"
        IsItemClickEnabled="True"
        SelectionMode="None"
        IsSwipeEnabled="false">

        <GridView.ItemsPanel>
            <ItemsPanelTemplate>                        
                <VirtualizingStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

这是Item的属性,它绑定到XAML中的Image

    private ImageSource _image = null;
    private String _imagePath = null;
    public ImageSource ThumbImage
    {
        get
        {
            // Check if the image is already cached
            if (this._image == null)
            {

                // Setup a placehoder image
                this._imagePath = "Assets/metro_photo_55@2x.png";                
                this._image = new BitmapImage(new Uri(Defs.BaseUri, this._imagePath));    

                // Async call to download thumb image from server
                this.getThumb();

            }

            return this._image;
        }
        private set 
        {
            this.SetProperty(ref this._image, value);
        }
     }

这是下载拇指的异步调用

private async void getThumb()
{
   // Get image and store
   Network network = new Network();

   // Since this is a bound property. this action updates the UI
   this.ThumbImage = await network.getImage(this._rawData[Defs.PATH_KEY], true);

   Debug.WriteLine(this._rawData[Defs.PATH_KEY] + " - Thumb retrieved!");

}

0 个答案:

没有答案