0

这是我的场景:

我有一个显示从网络服务检索到的数据的 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>

这是绑定到 XAML 中的图像的项的属性

    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!");

}
4

0 回答 0