L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Telerik WPF DataGrid – Deep Dive
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.
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 .
DataGrid et le défi du développeur
1. DataGrids et le défi du développeur
[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] 
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.
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.
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.
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.
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.
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 .
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.
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
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. 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. À 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 .)
Thème Fluent 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 Liaison de données de base
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 public [19659094] ObservableCollection { [1945979]. get => _data; défini [1945901]. ] { Si (_données == valeur)
Source link