Rendre 1 million de lignes dans WPF sans bloquer l'interface utilisateur : un guide pratique avec Xceed DataGrid

Lorsque votre application WPF doit afficher des centaines de milliers, voire plus d'un million, de lignes, la plupart des grilles commencent à ralentir. Le défilement saccade, l'interface utilisateur se bloque et les utilisateurs perdent confiance dans l'application. Dans ce guide, nous vous expliquerons comment afficher 1 000 000 de lignes dans WPF sans bloquer l'interface utilisateur à l'aide de Xceed DataGrid for WPF. Nous comparerons une grille WPF naïve à Xceed DataGrid avec virtualisation de données asynchrone, présenterons un benchmark simple et vous fournirons du code que vous pourrez intégrer à votre propre application.

Vous rencontrez des blocages de l'interface utilisateur avec de gros volumes de données dans vos applications WPF ? Découvrez comment obtenir des performances de haut niveau pour le DataGrid WPF avec de grands ensembles de données en utilisant Xceed DataGrid. Ce guide vous montre comment rendre 1 million de lignes sans décalage, en utilisant la virtualisation asynchrone des données et les meilleures pratiques pour les applications .NET à l'échelle de l'entreprise.

Pourquoi les volets WPF naïfs se figent avec de grands ensembles de données

Une implémentation typique de grille WPF ressemble souvent à ceci :

Lier directement à un Liste ou CollectionObservable contenant toutes les lignes
Que WPF crée un élément visuel pour chaque ligne
S'appuyer sur les paramètres de virtualisation par défaut (ou aucun)

Cela fonctionne bien pour quelques milliers de lignes. Mais une fois que vous poussez dans des centaines de milliers voire des millions d'articles:

Le thread d'interface utilisateur est bloqué alors que la grille crée et mesure les éléments visuels
Le défilement devient saccadé car trop de conteneurs sont recyclés ou recréés
Utilisation de la mémoire atteint son pic parce que la grille essaie de garder trop de visuels actifs

Le résultat : la grille est lente, même si votre accès aux données est rapide.

Comment Xceed DataGrid pour WPF gère 1 million de lignes

Xceed DataGrid pour WPF est conçu pour grands ensembles de données du monde réel. La principale différence réside dans la manière dont il gère virtualisation et chargement asynchrone des données:

Virtualisation des données : Seule une petite fenêtre de lignes est réalisée à la fois, même si la source contient plus d'un million d'éléments.
Virtualisation de l'interface utilisateur : Les conteneurs visuels sont réutilisés de manière agressive, minimisant ainsi les coûts de mise en page et de rendu.
Chargement asynchrone : Les données sont récupérées et préparées sur des threads d'arrière-plan, maintenant ainsi l'interface utilisateur réactive

Concrètement, cela signifie :

Le chargement initial de la grille reste rapide, même avec d'énormes ensembles de données
Le défilement reste fluide car vous ne payez pas le coût de 1 million de visuels
L'empreinte mémoire reste prévisible et gérable

Avant/Après : Grille WPF naïve vs Xceed DataGrid

Comparons un scénario simplifié.

Grille WPF naïve (conceptuelle)

Ensemble de données 1 000 000 lignes dans une liste
Grille : Contrôle de grille de style ItemsControl standard avec virtualisation minimale

Comportement observé dans une configuration typique :

Chargement initial : plusieurs secondes avant que l'interface utilisateur ne devienne réactive
Défilement : saccades notables lors des sauts de page importants
Mémoire : utilisation élevée due à de nombreux conteneurs réalisés

Xceed DataGrid pour WPF avec virtualisation asynchrone

Même jeu de données : 1 000 000 lignes, mais exposées via une source virtualisée
Grille : Xceed DataGrid configuré pour la virtualisation des données + UI

Comportement observé dans une configuration typique :

Chargement initial : l'interface utilisateur devient utilisable beaucoup plus rapidement car seul un petit sous-ensemble est réalisé
Défilement : fluide, même lors de sauts lointains dans le jeu de données
Mémoire : significativement plus basse car seules les lignes visibles sont matérialisées

La suite de cet article explique comment y parvenir dans votre propre projet.

Configuration du Xceed DataGrid pour WPF

Tout d'abord, installez le package DataGrid via NuGet et référencez-le dans votre XAML.

XAML : Configuration de base de la grille avec virtualisation

<Window x:Class="MillionRowsDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
        Title="1M Rows Demo" Height="600" Width="1000">

  <Grid>
    <xcdg:DataGridControl
        x:Name="dataGrid"
        ItemsSource="{Binding Rows}"
        AutoCreateColumns="True"
        EnableColumnVirtualization="True"
        EnableRowVirtualization="True"
        VirtualizingPanel.ScrollUnit="Pixel"
        VirtualizingPanel.IsVirtualizing="True"
        VirtualizingPanel.IsVirtualizingWhenGrouping="True"
        UseLayoutRounding="True" />
  </Grid>
</Window>

Points clés :

ActiverLaVirtualisationDesLignes et ActiverLaVirtualisationDesColonnes ne pas dépasser le nombre de conteneurs réalisés
Panneau de virtualisation Paramètres, assurez-vous que la virtualisation reste active même lors de groupes ou de défilements intensifs

Générer 1 million de lignes dans le ViewModel

À des fins de démonstration, nous pouvons simuler un jeu de données de 1 million de lignes. Dans une application réelle, vous pourriez diffuser des données depuis une base de données ou un service.

public class MainViewModel
{
    public IList<RowViewModel> Rows { get; }

    public MainViewModel()
    {
        const int rowCount = 1_000_000;
        var rows = new List<RowViewModel>(rowCount);

        for (int i = 0; i < rowCount; i++)
        {
            rows.Add(new RowViewModel
            {
                Id = i,
                Name = $"Item {i}",
                Value = i % 1000,
                Timestamp = DateTime.UtcNow.AddSeconds(-i)
            });
        }

        Rows = rows;
    }
}

public class RowViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Value { get; set; }
    public DateTime Timestamp { get; set; }
}

Même avec une simple liste en mémoire, la virtualisation de Xceed DataGrid empêchera l'interface utilisateur d'essayer de rendre les 1 million de lignes en une seule fois.

Présentation de la virtualisation des données asynchrone

Pour des ensembles de données vraiment volumineux ou éloignés, vous ne voulez pas matérialiser toutes les lignes en mémoire. Au lieu de cela, vous pouvez utiliser un collection virtualisée qui charge des pages de données à la demande.

Voici un exemple conceptuel d'un modèle de collection asynchrone paginée :

public class AsyncVirtualizedCollection<T> : IList<T>
{
    // Implementation omitted for brevity.
    // The important idea: items are loaded in pages on demand,
    // often using async calls to a repository or service.
}

public class MillionRowsViewModel
{
    public IList<RowViewModel> Rows { get; }

    public MillionRowsViewModel(IDataSource dataSource)
    {
        Rows = new AsyncVirtualizedCollection<RowViewModel>(
            pageIndex => dataSource.GetPageAsync(pageIndex),
            pageSize: 200,
            itemCount: 1_000_000);
    }
}

Avec ce modèle :

La grille ne demande que les pages dont elle a besoin pour la vue actuelle
Les données sont récupérées de manière asynchrone, afin de garder le thread d'interface utilisateur réactif.
Vous évitez de charger les 1 million de lignes en mémoire en une seule fois

Xceed DataGrid fonctionne très bien avec ce style de source virtualisée car il est conçu pour virtualisation des données scénarios.

Performance simple : Temps de chargement, Mémoire, Fluidité du défilement

Chaque application est différente, mais vous pouvez exécuter un benchmark simple comparant votre grille actuelle à Xceed DataGrid.

1. Mesurer le temps de chargement initial

Démarrez un chronomètre quand vous posez ItemsSource
Arrêtez-le lorsque la grille devient interactive pour la première fois

var stopwatch = Stopwatch.StartNew();

dataGrid.ItemsSource = viewModel.Rows;

stopwatch.Stop();
Debug.WriteLine($"Initial grid load: {stopwatch.ElapsedMilliseconds} ms");

Comparer :

Grille naïve : Souvent plusieurs secondes avec 1 million de lignes
Xceed DataGrid : Généralement beaucoup plus rapide car il ne traite que les lignes visibles

2. Surveiller l'utilisation de la mémoire

Utilisez vos outils de profilage habituels (Visual Studio Diagnostic Tools, dotMemory, etc.) et comparez :

Mémoire de base avant la liaison de la grille
Mémoire après avoir parcouru une grande partie de l'ensemble de données

Avec Xceed DataGrid et la virtualisation appropriée, vous devriez voir :

Mémoire de pointe réduite
Utilisation de la mémoire plus stable dans le temps

3. Évaluer la fluidité du défilement

Ceci est subjectif mais essentiel pour l'expérience utilisateur :

Faire défiler lentement et rapidement dans l'ensemble de données
Sauter avec PageUp/PageDown et faire glisser la barre de défilement

Avec Xceed DataGrid configuré pour la virtualisation, le défilement devrait rester lisse et réactif, même lorsque le jeu de données sous-jacent est très volumineux.

Meilleures Pratiques pour les Grands Ensembles de Données dans WPF avec Xceed DataGrid

Pour obtenir les meilleures performances lors du rendu de plus d'un million de lignes :

Utiliser la virtualisation de données pour des jeux de données distants ou très volumineux
Gardez les modèles de ligne légers—éviter les visuels lourds ou les agencements complexes dans chaque cellule
Activer la virtualisation des lignes et des colonnes explicitement
Évitez les convertisseurs inutiles dans les chemins critiques ; précalculer les valeurs dans la mesure du possible
Profiler tôt avec des volumes de données réalistes, pas seulement des données d'échantillon

Ces pratiques, combinées au moteur de virtualisation de Xceed DataGrid, vous permettent de passer à l'échelle bien au-delà de ce qu'une grille WPF naïve peut gérer.

Essayez ceci avec votre propre jeu de données

Le meilleur banc d'essai est votre application réelle, avec vos données et contraintes réelles.

Essayez Xceed DataGrid pour WPF avec vos propres données – commencez un essai de 45 jours :https://xceed.com/trial/

Si vous souhaitez de l'aide pour reproduire ces résultats ou adapter cette approche à votre architecture, nous sommes heureux de collaborer.

Besoin d'aide pour reproduire ces résultats ? Contactez-nous :https://xceed.com/support/

FAQ

Ai-je vraiment besoin de la virtualisation de données si j'utilise déjà la virtualisation d'interface utilisateur ?La virtualisation de l'interface utilisateur aide, mais elle ne contrôle que le nombre d'éléments visuels créés. Avec plus d'un million de lignes, il vous faut également virtualisation des données donc vous ne chargez pas ou ne conservez pas tous les éléments en mémoire simultanément.

Q: Le regroupement, le tri et le filtrage fonctionneront-ils toujours bien avec 1 million de lignes ?R : Oui, mais vous devez être intentionnel. Xceed DataGrid est optimisé pour ces opérations, et vous pouvez les combiner avec des opérations côté serveur ou paginées lorsque vous travaillez avec de très grands ensembles de données.

Q: Puis-je commencer avec une liste en mémoire et passer à la virtualisation plus tard ?Absolument. De nombreuses équipes commencent avec une liste en mémoire pour plus de simplicité, puis introduisent une collection virtualisée une fois qu'elles comprennent leurs volumes de données réels et leurs exigences de performance.

Q : Et si mon réseau existant est déjà en production et en difficulté ?A : Vous pouvez introduire Xceed DataGrid progressivement — commencez par un seul écran ou module, comparez-le à votre grille actuelle, puis déployez le changement une fois que vous êtes sûr des gains de performance.