Fermer

mars 28, 2019

Telerik WPF DataGrid – Deep Dive8 minutes de lecture



Dans cet article, nous allons nous plonger dans le DataGrid WPF Telerik et ses principales fonctionnalités, ainsi que sur la procédure de chargement des données dans le composant, l’optimisation des performances, le style et la personnalisation pour une apparence plus moderne et plus personnelle. feel.

Avez-vous déjà entendu parler de DataGrids, GridView ou simplement de grilles? Eh bien, si vous êtes un développeur d’applications, vos chances sont très grandes, car elles peuvent être trouvé dans à peu près n'importe quelle application offrant une gestion des données à ses utilisateurs – et pour de bonnes raisons.

Si vous êtes nouveau En ce qui concerne le sujet, un DataGrid est un contrôle d’application qui affiche les données dans une grille personnalisable, vous l’avez deviné. Les grilles de données constituent un moyen puissant et flexible d'afficher les données pour les utilisateurs de votre application sous forme de tableau les données pouvant être en lecture seule ou modifiables par l'utilisateur, selon les cas d'utilisation. [19659003]
Les données affichées dans un tableau avec des lignes et des colonnes sont à la fois faciles à manipuler et à représenter grâce à diverses fonctionnalités, telles que le filtrage, le tri et le regroupement. Dans le monde dans lequel nous vivons aujourd’hui, où nous vivons dans le «big data», les utilisateurs travaillent souvent avec d’énormes ensembles de données, qu’ils soient industriels, financiers, bancaires, de la santé, de la vente au détail, de l’automobile, etc. Les données doivent être disponibles, gérables et exploitables dans toute l'organisation, et les grilles de données sont l'ingrédient clé pour y parvenir.

En raison de l’adoption massive des grilles de données (pensez à Microsoft Excel), les utilisateurs sont tellement habitués à utiliser des feuilles de calcul de type Excel qu’ils s’attendent intuitivement à trouver le même ensemble de fonctionnalités dans tout ce qui en ressemble légèrement – qu’il s’agisse du terminal de l’aéroport. kiosque, les tableaux de bord des ventes au travail, le logiciel de gestion des actifs interne, les dossiers médicaux ou les clients de messagerie.

En raison de la demande croissante, la responsabilité reproduire cette expérience dans chaque scénario incombe au développeur mais il reste beaucoup à faire pour répondre aux besoins toujours croissants en fonctionnalités de l'utilisateur, dans un contexte de paradigmes de conception en constante évolution. la meilleure façon de procéder.

Quiconque a créé une grille de données d'application à partir de rien peut me dire que cela peut s'avérer être une tâche ardue. Cela est particulièrement vrai lorsque vous essayez de fournir toutes les fonctionnalités conventionnelles (regroupement, tri, pagination, filtrage), tout en maintenant une expérience utilisateur exceptionnelle. Faites-moi confiance – je suis allé là-bas et c'est précisément pourquoi je voulais prendre le temps et approfondir les fonctionnalités de la grille de données les plus demandées et les plus fréquemment utilisées, et la façon dont nous les avons abordées dans notre Interface utilisateur Telerik pour WPF suite .

Divers articles sur le Web peuvent vous aider à créer une grille WPF par défaut classique de Microsoft, dont la plupart ont probablement déjà été lus. Je souhaite donc prendre un angle différent ici et partager des informations de mon point de vue en tant que créateur et client du Telerik WPF DataGrid .

Table des matières:

(accédez facilement à une section spécifique en cliquant dessus)

  1. DataGrid et le défi du développeur
  2. Caractéristiques principales de Telerik WPF DataGrid
  3. Chargement du DataGrid WPF Telerik avec Data
  4. Astuces et conseils de performance DataGrid [19659019] Comment styliser et personnaliser votre grille de données WPF

1. DataGrids et le défi du développeur

Considérons le scénario suivant comme base du sujet: Vous devez créer une application de bureau pour le secteur de la finance ou de la santé. Avec votre équipe, vous avez travaillé de nombreuses heures et créé l'architecture parfaite pour votre application WPF. Vous utilisez DI, MVVM, IoC et obtenez les données d'un service Web, du cloud ou d'une base de données (locale ou distante), et vous traitez le tout de manière testable et maintenable. C’est ce à quoi les développeurs sont bons et ont fait de nombreuses fois. Ok, je suis d’accord, c’est plus qu’un seul scénario, mais dans tous les cas, vous vous retrouvez dans la même situation:

Vous devez maintenant présenter ces données à l’utilisateur de manière simple à gérer, tout en fournissant une grande interface utilisateur et une expérience utilisateur. Cela peut être difficile et même le meilleur peut lutter. En fin de compte, les utilisateurs finaux de votre application ne se soucient vraiment pas de l’architecture que vous avez utilisée, tant que l’application peut faire le travail. Par conséquent, si vous vous trouvez dans une situation similaire et que vous ne souhaitez pas consacrer d'innombrables heures au développement, vous pouvez envisager de consulter l'interface utilisateur de Telerik pour WPF. Cette suite servira de base aux rubriques des sections suivantes et des exemples pratiques fournis.

Vous trouverez ci-dessous un exemple d'application inspirée d'Outlook, qui utilise quelques-unes des commandes et fonctionnalités les plus couramment utilisées dans les projets WPF:

 Interface utilisateur de Telerik pour WPF - DataGrid - Pillar Page - Exemple de mail [19659003] Dans les sections suivantes, nous aborderons la polyvalence et les fonctionnalités de la boîte à outils, ainsi que certaines des fonctionnalités de grille les plus couramment utilisées et les plus demandées. Il s’agit notamment d’alimenter et de charger des données dans la grille, d’améliorer ses performances et, enfin, de la styliser, de la personnaliser et de fournir aux utilisateurs finaux de l’application une UX exceptionnelle. En outre, vous pouvez consulter le référentiel GitHub auquel je ferai référence tout au long du message .

2. Fonctions principales de Telerik WPF DataGrid [19659023]  Caractéristiques principales de WPF DataGrid Image

Le Telerik WPF DataGrid est un composant puissant et facile à utiliser pour les applications de bureau, qui offre une variété de fonctionnalités intégrées à couvrent la grande majorité des scénarios d’applications sectorielles.

Dans cet article, nous allons parcourir beaucoup de terrain – n'hésitez pas à lire du haut ou à survoler la fonctionnalité qui captive votre intérêt.

Création de colonnes

Pour la base d'un graphe de données WPF, nous avons besoin de lignes et colonnes . Les lignes sont évidentes: elles représentent les objets de votre source de données. Les colonnes, par contre, représentent les propriétés de ces objets. La plupart des datagrids prennent en charge la génération automatique de colonnes. Cette fonctionnalité vous permet d'afficher vos données avec une configuration minimale à nulle. Il convient aux scénarios simples ou aux situations dans lesquelles la forme des données à présenter est déterminée au moment de l'exécution. Le contrôle des colonnes générées peut être effectué à l'aide de l'attribut d'affichage bien connu ou de l'événement DataGrid AutoGeneratingColumn . Ce dernier vous donne un contrôle complet sur les colonnes générées et sur le processus de génération lui-même.

Si vous avez besoin de plus de contrôle sur le type et la manière dont les colonnes sont présentées, vous pouvez les définir manuellement. Avec la solution Telerik WPF DataGrid, vous avez plusieurs types de colonnes à votre disposition: données, expression, case à cocher, liste déroulante, image, entrée masquée, lien hypertexte. Vous pouvez faire beaucoup en utilisant ceux-ci. Et si vous avez besoin de quelque chose de plus, vous pouvez toujours définir votre propre modèle de cellule. Vous contrôlez également l'en-tête et le pied de page, vous pouvez donc placer des éléments tels que des images dans l'en-tête de la colonne ou ajouter du texte au pied de colonne. Les agrégats de colonne sont très utiles. Avec cette fonctionnalité, vous pouvez ajouter des fonctions d'agrégation telles que min, max, sum, avg au contenu de votre colonne et afficher les résultats dans le pied de colonne.

 Colonnes WPF DataGrid Image

Regroupement de vos données

Le regroupement de vos données est une fonctionnalité très puissante et utile. Le rendre facile et convivial est l’une des fonctionnalités clés du Telerik WPF DataGrid. Vos utilisateurs peuvent facilement regrouper les données en faisant simplement glisser la colonne souhaitée vers le panneau de groupe. Le regroupement multiple est également pris en charge.

 Image de regroupement WPF DataGrid

Vous souvenez-vous des agrégats de colonne? Lorsque les données sont regroupées, les fonctions d’agrégation fonctionnent également et vous fournissent des informations agrégées sur chaque groupe. Il s'agit du comportement intégré de . Pour l'activer, vous devez ajouter des fonctions d'agrégat à vos colonnes et regrouper vos données .

WPF DataGrid Grouping Aggregates Image  » title= »WPF DataGrid Grouping Aggregates »/>

. Une dernière chose. En raison de la complexité, le regroupement d'un ensemble de données volumineux sur plusieurs niveaux peut entraîner des problèmes de performances. Le Telerik DataGrid est préparé pour de tels cas et utilise un type de rendu spécial . Il s'appelle le mode de rendu de groupe à plat et est contrôlé par la propriété GroupRenderMode . Il affiche simplement les lignes les unes en dessous des autres au lieu de les imbriquer à plusieurs niveaux.

N'oublions pas le tri

C'est assez intuitif pour n'importe quel scénario. Les clients ont l'habitude de cliquer sur l'en-tête de la colonne et s'attendent à trouver la flèche de sens de tri habituelle. Ils tiennent pour acquis que chaque grille de données doit le faire, que ce soit pour le Web, les ordinateurs de bureau ou les appareils mobiles. Bien entendu, les grilles Telerik prennent en charge le tri des colonnes et cela fonctionne de la manière habituelle. Mais il y a plus.

Lorsque vos données sont regroupées, vous pouvez modifier le sens de tri de chaque groupe individuellement et, en outre, vous pouvez trier les données de chaque groupe dans une autre colonne. Ceci est indiqué par les flèches montrées dans les boutons de groupe apparaissant dans le panneau de groupe et dans les en-têtes de colonne, comme on peut le voir dans les captures d'écran que j'ai ajoutées ci-dessus. Le tri sur plus d'une colonne est également pris en charge, ce qui vous permet de mieux comprendre vos données.

Le tout-puissant filtrage

L'une de mes fonctionnalités intégrées préférées est le filtrage de colonne (même si, je dois l'avouer, je suis un peu biaisé). L'utilisateur peut filtrer les données présentées selon leurs propres critères, ce qui est particulièrement utile dans les ensembles de données volumineux et complexes. Par défaut, le filtrage est activé sur toutes les colonnes liées aux données. Vous pouvez désactiver ce comportement en le désactivant si vous estimez que le filtrage sur cette colonne n'est pas nécessaire. La fenêtre de filtrage elle-même ressemble beaucoup à ce que l'on trouve dans pratiquement tous les outils de traitement de feuille de calcul.

 Image de filtrage WPF DataGrid

Le filtre d'une colonne donnée sélectionne toutes les valeurs distinctes présentes dans votre ensemble de données pour cette colonne particulière. L'utilisateur peut filtrer en sélectionnant simplement une ou plusieurs valeurs spécifiques à l'aide des cases à cocher. Les expressions de filtre avancées sont également prises en charge. Vous pouvez filtrer les expressions qui vérifient si les valeurs de vos colonnes commencent par une valeur de chaîne spécifique, ou sont supérieures, égales, inférieures ou entre des valeurs données. Les possibilités sont infinies ici et tout est fait automatiquement pour vous et hors de la boîte. Le consommateur de vos données, lorsqu'elles sont présentées dans un Telerik DataGrid, dispose de toute la puissance de filtrage dont il a besoin.

Pagination pour des jeux de données plus volumineux

Parfois, vous avez parfois trop de données à saisir par l'utilisateur. Une solution populaire consiste à utiliser la pagination. Telerik UI pour WPF contient un composant spécialement conçu à cet effet: le RadDataPager . Il fonctionne en étroite collaboration avec le DataGrid et il est très facile à installer et à configurer.

 Image de pagination WPF DataGrid

Le contrôle des options d'apparence et de pagination commence par le DisplayMode . propriété. Il est de type énumération de drapeau PagerDisplayModes et ses membres contrôlent ce qui est affiché par le pageur. Vous pouvez également contrôler la taille de la page, qui correspond au nombre d’éléments affichés en même temps à l’écran.

Un avantage intéressant à propos de la séparation du composant qui effectue la pagination à partir de DataGrid est que vous pouvez utiliser le pager de données avec d’autres des composants tels que ListView ComboBox ou même des graphiques. Cela peut être utile lors de la création d’un tableau de bord, par exemple.

Détails de la ligne

Lorsque vous avez beaucoup d’informations et que vous ne pouvez pas tout afficher en utilisant uniquement des colonnes, vous pouvez peut-être les afficher dans le détail de la ligne. Chaque ligne WPF DataGrid est capable de présenter des informations supplémentaires si la forme d'une ligne en détail . L'avantage de cette approche est qu'elle peut être configurée pour ne s'afficher que lorsque la ligne est sélectionnée. Cela peut réduire le nombre de colonnes et donner à votre grille de données une présentation plus nette et plus compacte, tout en fournissant toutes les informations dont l'utilisateur a besoin. Vous pouvez également afficher les détails de la ligne à tout moment, que la ligne soit sélectionnée ou non, si vous préférez.

 WPF DataGrid Image des détails de la ligne

La configuration des détails de la ligne s'effectue par le biais du modèle de détails de ligne. Vous avez une totale liberté quant à ce que vous y mettez. Vous pouvez afficher du texte, insérer des graphiques ou même d’autres grilles de données. Les possibilités sont infinies.

Exporter vers différents formats

L'un des avantages de l'utilisation de la boîte à outils Telerik UI for WPF est que vous marchez sur les épaules de géants. Il existe déjà une excellente bibliothèque de traitement de documents qui a été développée pour les outils Telerik et, bien sûr, elle est bien intégrée au Telerik WPF DataGrid. Les données présentées par la grille peuvent être exportées vers de nombreux formats pour différentes applications, y compris Microsoft Excel (les formats xlsx et xls sont pris en charge), et l'exportation au format PDF et HTML est également possible. Tout vient tout droit sorti de la boîte. Vous pouvez aussi le personnaliser.

Le presse-papier est un autre moyen d’exporter des données. DataGrid prend en charge la copie et le collage de données depuis et vers le Presse-papiers, ce qui le rend très flexible. Vous avez la possibilité de copier les cellules avec ou sans les en-têtes, les pieds de page, les lignes et les colonnes vides.

Grille hiérarchique

Parfois, vos données peuvent être hiérarchiques avec une relation parent-enfant. En élargissant nos échantillons de données actuels, nous pouvons afficher les employés que nos gestionnaires gèrent. Le DataGrid peut afficher ces données à l'aide d'un imbriqué DataGrid .

 Image imbriquée WPF DataGrid

Notez que la grille imbriquée est un DataGrid complet. Le support hiérarchique de DataGrid gère également les ensembles de données à référence automatique . Ainsi, si vos données ont une relation ParentID par exemple, vos données sont bonnes à utiliser. Si toutes vos données ne forment pas une hiérarchie, vous pouvez masquer ou afficher les icônes d'extension de ligne en les liant directement à vos données.

Cette fonction peut être utile dans les cas où vos données sont vraiment de nature hiérarchique et que vous pouvez les explorer en profondeur. sens. Cela peut également réduire l'encombrement et le débordement de données dans les grands ensembles de données. Combiné à un chargement paresseux, il peut également améliorer les performances, car vous n'allez récupérer que les données que vous affichez réellement à l'écran.

Gestion des données

L'affichage des données est excellent, mais le DataGrid de Telerik vous permet également modifier les données qu'il présente. Vous pouvez effectuer des opérations d'insertion, de mise à jour et de suppression avec validation et tout le reste. Pour l'activer, vous devez actionner quelques commutateurs et vous êtes prêt à partir. Assurez-vous que votre collection n'est pas en lecture seule et que le type des objets de votre ensemble de données possède un constructeur par défaut public.

 Image d'édition de WPF DataGrid

Cette fonctionnalité peut être utile certains scénarios lorsque votre ensemble de données n'est pas trop complexe. Vous pouvez également permettre à l'utilisateur de modifier les valeurs de cellules particulières sans devoir ouvrir d'autres vues ni remplir de longs formulaires.

Theming

Enfin et surtout, vos données ne sont qu'un fichier tas de chiffres sans une belle et moderne interface utilisateur. Il existe de nombreux thèmes facilement disponibles que vous pouvez appliquer à DataGrid et à tout composant Telerik. Deux de mes thèmes préférés sont les thèmes Material et Fluent. Le thème de Windows 8 est un autre excellent dans les captures d'écran ci-dessus.

Thème principal

Thème Fluent

L'application d'un thème à votre DataGrid est un jeu d'enfant . Faites simplement référence au thème que vous désirez et fusionnez ses ressources dans votre fichier App.xaml. Pourquoi la fusion? Parce que les assemblages Telerik NoXaml, qui sont ceux recommandés, ne contiennent aucun fichier Xaml. Afin de donner à votre WPF DataGrid la bonne apparence, vous devez référencer un thème et fusionner les ressources de votre application. Cette séparation permet de regrouper les ressources dépendant du thème dans différents assemblages et réduit la taille globale des dépendances et de votre application, car vous faites uniquement référence à ce dont vous avez réellement besoin.

Un autre avantage des assemblys NoXaml est le suivant: que vous pouvez personnaliser très facilement les thèmes intégrés . Vous pouvez absolument changer n'importe quoi, de la couleur à la modélisation complète du composant. Lorsque vous avez juste besoin de donner un style à un composant spécifique, vous serez heureux de savoir qu'il existe de nombreuses API pour le faire. Continuez à lire pour en savoir plus.

3. Chargement du DataGrid WPF de Telerik avec Data

 Chargement du DataGrid WPF Image

Les données. Il se présente sous toutes ses formes. Parmi toutes les visualisations, la grille de données est la plus largement utilisée et la plus répandue.

Nous allons maintenant examiner comment charger votre Telerik GridView avec différents types de données. MVVM nous permet de séparer le code qui prépare les données pour l’affichage et est responsable du traitement des entrées de l’utilisateur du code qui gère la vue. De plus, MVVM est spécialement conçu pour WPF.

Si vous êtes nouveau sur MVVM ou avez besoin d’un rappel, prenez un moment pour lire une introduction au motif MVVM . Dans ce billet, je supposerai que vous avez une compréhension de base du fonctionnement de MVVM. Vous n’avez pas besoin de MVVM et vous voulez juste visualiser vos données dans un code-behind, ne vous inquiétez pas – vous trouverez toujours quelques pépites de sagesse ici.

Liaison de données de base

Commençons par les bases. Les grilles de données affichent les données sous forme de lignes et de colonnes. Pour afficher vos données, vous avez besoin d'un ensemble d'objets. Pour chaque élément de votre collection, une nouvelle ligne est ajoutée à la grille. Les colonnes sont construites à partir des propriétés publiques de vos objets. Vous pouvez utiliser le mappage automatique des colonnes ou prendre le contrôle manuel et définir vous-même les colonnes. Dans les deux cas, il n'y a pas de bonne ou de mauvaise façon de faire, mais une automatique et une manuelle.

 WPF PivotGrid image

À de nombreuses occasions, les gens envisagent d'utiliser une grille alors qu'ils ont en fait besoin d'un pivot. Si vos données ressemblent davantage à des mesures et des dimensions comportant plusieurs couches d'imbrication, des totaux de lignes et de colonnes comme dans l'image ci-dessus, alors examine le RadPivot . Il s'agit d'un composant spécialement conçu pour afficher les données dans un pivot, qui permet aux utilisateurs d'ajouter ou de supprimer des mesures et des dimensions à la volée.

Voyons comment nous pouvons dater notre grille de données. (Consultez la documentation officielle ici .)
Nous commençons par définir un modèle. J'utiliserai un modèle employé simple. Ensuite, nous avons besoin d’un modèle de vue avec une propriété publique qui exposera notre collection d’employés. Commençons par les données simples en mémoire.

public classe MainViewModel: ViewModelBase

{

private ObservableCollection _data;

public [19659094] ObservableCollection Données

{

[1945979]. get => _data;

défini

[1945901]. ] {

Si (_données == valeur)





Source link