Virtualisation des données ListView et GridViewListView and GridView data virtualization

Remarque  Pour plus d’informations, reportez-vous à la session //build/ Dramatically Increase Performance when Users Interact with Large Amounts of Data in GridView and ListView.Note  For more details, see the //build/ session Dramatically Increase Performance when Users Interact with Large Amounts of Data in GridView and ListView.

Améliorez les performances et le délai de démarrage des éléments ListView et GridView via la virtualisation des données.Improve ListView and GridView performance and startup time through data virtualization. Pour la virtualisation de l’interface utilisateur, la réduction d’un élément et la mise à jour progressive des éléments, voir Optimisation des options d’interface ListView et GridView.For UI virtualization, element reduction, and progressive updating of items, see ListView and GridView UI optimization.

Une méthode de virtualisation des données est requise pour tout jeu de données si volumineux qu’il ne peut pas ou ne doit pas être entièrement stocké dans la mémoire.A method of data virtualization is needed for a data set that is so large that it cannot or should not all be stored in memory at one time. Une première partie du jeu de données est chargée en mémoire (à partir du disque local, du réseau ou du cloud), puis la virtualisation de l’interface utilisateur est appliquée à ce jeu de données partiel.You load an initial portion into memory (from local disk, network, or cloud) and apply UI virtualization to this partial data set. Par la suite, les données sont chargées à la demande dans le jeu de données principal, de façon incrémentielle ou à partir de points arbitraires (accès aléatoire).You can later load data incrementally, or from arbitrary points in the master data set (random access), on demand. La pertinence de la virtualisation des données pour vous dépend de nombreux facteurs :Whether data virtualization is appropriate for you depends on many factors.

  • la taille du jeu de données ;The size of your data set
  • la taille de chaque élément ;The size of each item
  • la source du jeu de données (disque local, réseau ou cloud) ;The source of the data set (local disk, network, or cloud)
  • la consommation de mémoire totale de votre application.The overall memory consumption of your app

Remarque  N’oubliez pas qu’une fonctionnalité est activée par défaut pour ListView et GridView ; elle affiche des éléments visuels d’espace réservé temporaire quand l’utilisateur effectue un mouvement panoramique/de défilement rapide.Note  Be aware that a feature is enabled by default for ListView and GridView that displays temporary placeholder visuals while the user is panning/scrolling quickly. Ces éléments visuels d’espace réservé sont remplacés par votre modèle d’élément lors du chargement des données.As data is loaded, these placeholder visuals are replaced with your item template. Vous pouvez désactiver la fonctionnalité en définissant ListViewBase.ShowsScrollingPlaceholders sur false. Toutefois, si vous procédez ainsi, nous vous recommandons d’utiliser l’attribut x:Phase pour restituer progressivement les éléments dans votre modèle d’élément.You can turn the feature off by setting ListViewBase.ShowsScrollingPlaceholders to false, but if you do so then we recommend that you use the x:Phase attribute to progressively render the elements in your item template. Voir Mettre à jour les éléments ListView et GridView de façon progressive.See Update ListView and GridView items progressively.

Voici plus d’informations sur les techniques de virtualisation des données incrémentielles et à accès aléatoire.Here are more details about the incremental and random-access data virtualization techniques.

Virtualisation incrémentielle des donnéesIncremental data virtualization

La virtualisation incrémentielle des données assure le chargement séquentiel des données.Incremental data virtualization loads data sequentially. Un contrôle ListView faisant appel à la virtualisation incrémentielle des données peut être utilisé pour afficher une collection d’un million d’éléments, mais seulement 50 éléments sont chargés initialement.A ListView that uses incremental data virtualization may be used to view a collection of a million items, but only 50 items are loaded initially. À mesure que l’utilisateur parcourt la collection, les 50 éléments suivants sont chargés.As the user pans/scrolls, the next 50 are loaded. Au fil du chargement des éléments, la taille curseur de la barre de défilement diminue.As items are loaded, the scroll bar's thumb decreases in size. Pour appliquer ce type de virtualisation des données, vous devez écrire une classe de source de données qui implémente ces interfaces.For this type of data virtualization you write a data source class that implements these interfaces.

Une source de données de ce type constitue une liste en mémoire qui peut être étendue en permanence.A data source like this is an in-memory list that can be continually extended. Le contrôle d’éléments demande les éléments à l’aide des propriétés de nombre et d’indexeur IList standard.The items control will ask for items using the standard IList indexer and count properties. Le nombre doit représenter le nombre d’éléments localement et non la taille réelle du jeu de données.The count should represent the number of items locally, not the true size of the dataset.

Lorsque le contrôle d’éléments approche de la fin des données existantes, il appelle ISupportIncrementalLoading.HasMoreItems.When the items control gets close to the end of the existing data, it will call ISupportIncrementalLoading.HasMoreItems. Si vous renvoyez true, il appellera ISupportIncrementalLoading.LoadMoreItemsAsync en transmettant un nombre conseillé d’éléments à charger.If you return true, then it will call ISupportIncrementalLoading.LoadMoreItemsAsync passing an advised number of items to load. Selon la source des données chargées (disque local, réseau ou cloud), vous pouvez choisir de charger un nombre d’éléments différent de celui recommandé.Depending on where you're loading data from (local disk, network, or cloud), you may choose to load a different number of items than that advised. Par exemple, si votre service prend en charge les lots de 50 éléments, mais que le contrôle d’éléments en demande seulement 10, vous pouvez en charger 50.For example, if your service supports batches of 50 items but the items control only asks for 10 then you can load 50. Chargez les données depuis votre back end, ajoutez-les à votre liste et déclenchez une notification de modification via INotifyCollectionChanged ou IObservableVector<T> afin que le contrôle d’éléments soit informé des nouveaux éléments.Load the data from your back end, add it to your list, and raise a change notification via INotifyCollectionChanged or IObservableVector<T> so that the items control knows about the new items. Renvoyez également le nombre d’éléments que vous avez effectivement chargés.Also return a count of the items you actually loaded. Si vous chargez moins d’éléments que le nombre recommandé ou que l’utilisateur a parcouru le contrôle d’éléments encore plus loin entre-temps, de nouveaux éléments sont demandés à votre source de données et le cycle se poursuit.If you load fewer items than advised, or the items control has been panned/scrolled even further in the interim, then your data source will be called again for more items and the cycle will continue. Pour en savoir plus, téléchargez l’exemple de liaison de données XAML pour Windows 8.1 et réutilisez le code source dans votre application Windows 10.You can learn more by downloading the XAML data binding sample for Windows 8.1 and re-using its source code in your Windows 10 app.

Virtualisation des données par accès aléatoireRandom access data virtualization

La virtualisation des données par accès aléatoire permet le chargement à partir d’un point arbitraire du jeu de données.Random access data virtualization allows loading from an arbitrary point in the data set. Un contrôle ListView faisant appel à la virtualisation des données par accès aléatoire et utilisé pour afficher une collection d’un million d’éléments peut charger les éléments 100 000 à 100 050.A ListView that uses random access data virtualization, used to view a collection of a million items, can load the items 100,000 – 100,050. Si l’utilisateur affiche ensuite le début de la liste, le contrôle charge les 50 premiers éléments.If the user then moves to the beginning of the list, the control loads items 1 – 50. À tout moment, le curseur de la barre de défilement indique que le contrôle ListView contient un million d’éléments.At all times, the scroll bar's thumb indicates that the ListView contains a million items. La position du curseur de la barre de défilement est déterminée par rapport à l’emplacement des éléments visibles dans le jeu de données de la collection.The position of the scroll bar's thumb is relative to where the visible items are located in the collection's entire data set. Ce type de virtualisation des données peut considérablement réduire les besoins en mémoire et les temps de chargement pour la collection.This type of data virtualization can significantly reduce the memory requirements and load times for the collection. Pour l’appliquer, vous devez écrire une classe de source de données qui récupère les données à la demande, gère un cache local et implémente les interfaces suivantes :To enable it you need to write a data source class that fetches data on demand and manages a local cache and implements these interfaces.

IItemsRangeInfo fournit des informations sur les éléments utilisés activement par le contrôle.IItemsRangeInfo provides information on which items the control is actively using. Le contrôle d’éléments appelle cette méthode chaque fois que son affichage est modifié et inclut les deux ensembles de plages suivants :The items control will call this method whenever its view is changing, and will include these two sets of ranges.

  • l’ensemble des éléments qui se trouvent dans la fenêtre d’affichage ;The set of items that are in the viewport.
  • un ensemble d’éléments non virtualisés utilisés par le contrôle qui ne se trouvent pas forcément dans la fenêtre d’affichage :A set of non-virtualized items that the control is using that may not be in the viewport.
    • une mémoire tampon d’éléments autour de la fenêtre d’affichage que le contrôle d’éléments conserve afin d’assurer la fluidité du défilement panoramique tactile ;A buffer of items around the viewport that the items control keeps so that touch panning is smooth.
    • l’élément sélectionné ;The focused item.
    • le premier élément.The first item.

En implémentant IItemsRangeInfo, votre source de données sait quels éléments doivent être récupérés et mis en cache et quand nettoyer les données du cache qui ne sont plus requises.By implementing IItemsRangeInfo your data source knows what items need to be fetched and cached, and when to prune from the cache data that is no longer needed. IItemsRangeInfo utilise des objets ItemIndexRange pour décrire un ensemble d’éléments en fonction de leur index dans la collection.IItemsRangeInfo uses ItemIndexRange objects to describe a set of items based on their index in the collection. Cela permet d’éviter l’utilisation de pointeurs d’éléments, qui peuvent ne pas être corrects ou stables.This is so that it doesn't use item pointers, which may not be correct or stable. L’interface IItemsRangeInfo est conçue pour être utilisée par une seule instance d’un contrôle d’éléments, car elle s’appuie sur les informations d’état de ce contrôle d’éléments.IItemsRangeInfo is designed to be used by only a single instance of an items control because it relies on state information for that items control. Si plusieurs contrôles d’éléments ont besoin d’accéder aux mêmes données, une instance distincte de la source de données est requise pour chacun d’eux.If multiple items controls need access to the same data then you will need a separate instance of the data source for each. Ils peuvent partager un cache commun, mais la logique de vidage du cache sera plus complexe.They can share a common cache, but the logic to purge from the cache will be more complicated.

Voici la stratégie de base pour votre source de données dans le cadre de la virtualisation des données par accès aléatoire :Here's the basic strategy for your random access data virtualization data source.

  • Lorsqu’un élément est demandéWhen asked for an item
    • S’il est disponible dans la mémoire, renvoyez-le.If you have it available in memory, then return it.
    • S’il n’est pas disponible, renvoyez une valeur null ou un élément d’espace réservé.If you don’t have it, then return either null or a placeholder item.
    • Utilisez la demande relative à un élément (ou les informations de plage de IItemsRangeInfo) pour connaître les éléments requis et pour récupérer les données des éléments de façon asynchrone à partir de votre back end.Use the request for an item (or the range information from IItemsRangeInfo) to know which items are needed, and to fetch data for items from your back end asynchronously. Une fois les données récupérées, déclenchez une notification de modification via INotifyCollectionChanged or IObservableVector<T> afin que le contrôle d’éléments soit informé du nouvel élément.After retrieving the data, raise a change notification via INotifyCollectionChanged or IObservableVector<T> so that the items control knows about the new item.
  • (Facultatif) À mesure que la fenêtre d’affichage du contrôle d’éléments change, identifiez les éléments requis à partir de la source de données via votre implémentation de IItemsRangeInfo.(Optionally) as the items control's viewport changes, identify what items are needed from your data source via your implementation of IItemsRangeInfo.

En outre, la stratégie permettant de déterminer à quel moment charger les éléments de données, le nombre d’éléments à charger et les éléments à conserver en mémoire dépend de votre application.Beyond that, the strategy for when to load data items, how many to load, and which items to keep in memory is up to your application. Voici quelques considérations générales à retenir :Some general considerations to keep in mind:

  • Effectuez des demandes asynchrones pour les données ; ne bloquez pas le thread d’interface utilisateur.Make asynchronous requests for data; don't block the UI thread.
  • Trouvez la fourchette idéale pour la taille des lots dans lesquels vous récupérez des éléments.Find the sweet spot in the size of the batches you fetch items in. Préférez les lots de grande taille aux lots « bavards ».Prefer chunky to chatty. Pas trop petits pour ne pas avoir à faire de trop nombreuses petites demandes ; pas trop volumineux pour ne pas que la récupération prenne trop de temps.Not so small that you make too many small requests; not too large that they take too long to retrieve.
  • Prenez en compte le nombre souhaité de demandes en attente simultanées.Consider how many requests you want to have pending at the same time. Il est plus facile d’en effectuer une à la fois, mais cela peut s’avérer trop lent si le temps de réponse est élevé.Performing one at a time is easier, but it may be too slow if turnaround time is high.
  • Pouvez-vous annuler les demandes de données ?Can you cancel requests for data?
  • Si vous utilisez un service hébergé, existe-t-il un coût par transaction ?If using a hosted service, is there a cost per transaction?
  • Quels types de notifications sont fournis par le service lorsque les résultats d’une requête sont modifiés ?What kind of notifications are provided by the service when the results of a query are changed? Serez-vous informé si un élément est inséré à l’index 33 ?Will you know if an item is inserted at index 33? Si votre service prend en charge les requêtes basées sur une instruction key-plus-offset, cela peut s’avérer préférable à la simple utilisation d’un index.If your service supports queries based on a key-plus-offset, that may be better than just using an index.
  • Quel degré d’intelligence recherchez-vous pour la prérécupération des éléments ?How smart do you want to be in pre-fetching items? Allez-vous essayer de suivre la direction et la vitesse du défilement pour prédire les éléments requis ?Are you going to try and track the direction and velocity of scrolling to predict which items are needed?
  • Quel degré d’agressivité recherchez-vous pour le vidage du cache ?How aggressive do you want to be in purging the cache? Il s’agit d’un compromis entre la mémoire et l’expérience.This is a tradeoff of memory versus experience.