これが私のシナリオです:
ネットワーク サービスから取得したデータを表示する Gridview があります。データ数がかなり多くなる場合があります。そのため、VirtualizingStackPanel を使用してコンテンツを表示します。これらのデータの一部は、レンダリング時に画像の取得が必要になる場合があります (遅延読み込み)。
私の (非常に限られた) 理解では、VirtualStackPanel は、データのレンダリングを必要とするグリッドとして自動的にデータを要求します。レンダリングが必要な要素が画像タイプの場合、プレースホルダー画像を送信し、非同期ネットワーク呼び出しを送信してその画像を取得します。
しかし、すべての要素をレンダリングするための呼び出しが受信され、その結果、画像を取得するための大量のネットワーク呼び出しが送信されることに気付きました (ほとんどのアイテムが画像タイプの場合)。
質問: VirtualizingStackPanel のコード (XAML または C#) で構成する必要があるものはありますか? または、項目が実際に表示されているかどうかを検出してネットワーク呼び出しを発行する必要がありますか?
これが私の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!");
}