.NET Maui DataGrid: Détails de la transaction, résumés de compte

L’interface utilisateur Telerik pour .net Maui DataGrid vous aide à créer des grilles puissantes et évolutives avec toutes les fonctionnalités de charge, filtre, modifier et à la demande dont vous avez besoin.

Dans les applications mobiles, en particulier dans le secteur financier –La façon dont nous présentons des données est essentielle pour offrir une expérience utilisateur efficace, organisée et claire. Que nous ayons affiché des transactions bancaires, des dossiers de dépenses, des rapports de revenus ou des soldes mensuels, la présentation devrait rendre les informations faciles à lire et à interagir.

Imaginez que vous examinez les transactions de compte bancaire et que vous devez cliquer sur chacune individuellement pour voir les détails. Cela semble fastidieux, non? Imaginez maintenant ces mêmes transactions indiquées dans un tableau soigneusement organisé, avec des colonnes claires comme la date, le montant, la description et le type de transaction – vous pourriez scanner toutes les informations en un coup d’œil.

C’est là que le .Net Maui DataGrid composant de la progression de l’interface utilisateur de Telerik pour Bibliothèque .net Maui vient. C’est un outil puissant qui vous permet d’afficher et de gérer de grands volumes de données d’une manière fluide, organisée et conviviale. Avec ce composant, vous pouvez visualiser les données, trier, filtrer, modifier les enregistrements directement dans la grille et accéder à de nombreuses autres fonctionnalités puissantes, le tout de manière simple et efficace.

🎯 Dans cet article, je vais vous montrer comment implémenter le Telerik DataGrid dans vos applications .net Maui afin que vous puissiez facilement intégrer des fonctionnalités telles que la visualisation des transactions, l’édition en place, le filtrage, l’organisation sur le terrain et bien plus encore. Transformons ces données en une expérience visuelle beaucoup plus utile, dynamique et professionnelle!

Qu’est-ce que le .net Maui DataGrid?

L’interface utilisateur Telerik pour .net Maui DataGrid affiche des données organisées en lignes et colonnes (comme une matrice), que vous pouvez également modifier.

Ce contrôle vous permet également de jouer avec des styles. Par exemple, l’alternance des couleurs de ligne, ce qui aide non seulement les utilisateurs à identifier rapidement chaque ligne, mais vous permet également de mieux faire correspondre la marque de votre application. Le composant prend en charge des fonctionnalités puissantes comme regroupement, tri, filtrage et plus encore.

De plus, il utilise la virtualisation des lignes et des cellules, ce qui signifie qu’il ne crée que les éléments visuels qui sont nécessaires à ce moment, en évitant les enregistrements inutiles qui ne sont pas actuellement visibles à l’écran. Cela améliore considérablement les performances de votre application!

Ce contrôle fait partie de l’interface utilisateur de Telerik pour la bibliothèque .net Maui, qui propose plus de 60 composants d’interface utilisateur conçus par des professionnels – idéal pour la construction d’applications modernes et multiplate-forme avec une expérience utilisateur poli.

Vous trouverez ci-dessous un exemple de l’apparence du datagrid:

Configuration initiale

Configurons la configuration de base afin que vous puissiez utiliser le contrôle directement dans votre fichier XAML. Pour l’instant, nous nous concentrerons uniquement sur cette configuration initiale. À mesure que nous avançons, vous verrez comment les autres détails sont implémentés étape par étape.

Tout d’abord, assurez-vous d’avoir les conditions préalables suivantes prêtes:

Une fois que toutes les conditions préalables sont définies, vous êtes prêt à commencer! 😎

Étape 1: Ajouter l’espace de noms Telerik

Accédez à votre fichier XAML et ajoutez l’espace de noms suivant:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Étape 2: Enregistrez Telerik dans Mauiprogram.cs

Dirigez-vous vers votre fichier Mauiprogram.cs et à l’intérieur du CreateMauiApp Méthode, ajouter .UseTelerik() Pour permettre les commandes de Telerik. Placez-le juste au-dessus .UseMauiApp<App>()comme ça:

using Telerik.Maui.Controls.Compatibility;

public static class MauiProgram 
{ 
    public static MauiApp CreateMauiApp() 
    { 
    var builder = MauiApp.CreateBuilder(); 
	    builder 
	    .UseTelerik() 
	    .UseMauiApp<App>() 
	    .ConfigureFonts(fonts => 
	    { 
		    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); 
	    });
	     
	    return builder.Build(); 
    } 
}

Définitions des colonnes

Le Telerik DataGrid vous permet de prendre les trois approches suivantes pour définir vos colonnes:

• Automatique: Il s’agit de l’option par défaut. Il crée automatiquement une colonne pour chaque propriété de votre source de données. Ce comportement est activé en définissant le AutoGenerateColumns propriété à vrai.
• Manuel: Cette option vous permet de définir manuellement les colonnes que le dataGrid affichera. Pour ce faire, vous devez ajouter les colonnes à la collection de colonnes et définir le AutoGenerateColumns propriété à false.
• Mixte: Cette option vous permet de combiner à la fois des colonnes définies manuellement et générées automatiquement. En d’autres termes, vous pouvez ajouter des colonnes spécifiques à la collection de colonnes et garder AutoGenerateColumns réglé sur true afin que les colonnes restantes soient générées automatiquement.

Génération manuelle

Si vous choisissez l’option de génération manuelle, vous pouvez définir des colonnes telles que Texte, numérique, booléen, date, heure, combobox et d’autres types moins courants comme:

• Colonne de modèle: Ce type de colonne vous permet de personnaliser pleinement le contenu de chaque cellule à l’aide d’un Datatemplat. C’est idéal lorsque vous souhaitez afficher des éléments d’interface utilisateur plus complexes, tels que des images, des boutons ou du texte formaté – au lieu de valeurs simples.
• Colonne TogglerrowDetails: Cette colonne ajoute un bouton à bascule qui permet aux utilisateurs d’étendre ou d’effondrer des détails supplémentaires pour une ligne spécifique. Il est parfait pour afficher des informations supplémentaires sans surcharger la vue de la grille principale.

Pour les colonnes avec un type spécifique (Texte, Numérique, Booléen, Date, Temps et Peigne), vous pouvez indiquer quelles propriétés de l’objet de données seront affichées dans la colonne de deux manières:

• PropertyName: Pour spécifier directement le nom de la propriété qui sera affiché dans la colonne.
• DataMemberBinding: Définit la liaison des données pour le contenu affiché dans la cellule. En utilisant DataMemberBinding Vous donne plus de contrôle sur la façon dont les informations sont formatées et présentées dans les cellules de données.

Vous pouvez voir comment l’utiliser ici:

<telerik:RadDataGrid x:Name="grid" 
    ItemsSource="{Binding Clubs}" 
    AutoGenerateColumns="False"> 
    <telerik:RadDataGrid.BindingContext> 
    <local:ViewModel /> 
    </telerik:RadDataGrid.BindingContext> 
    <telerik:RadDataGrid.Columns> 
    <telerik:DataGridTextColumn PropertyName="Name" 
    HeaderText="Name"> 
	    <telerik:DataGridTextColumn.CellContentStyle> 
	    <Style TargetType="telerik:DataGridTextCellAppearance">
	    
	    <Setter Property="TextColor" Value="#018383" /> 
	    <Setter Property="SelectedTextColor" Value="#A55200" /> 
	    <Setter Property="FontSize" Value="15" /> 
	    </Style> 
	    </telerik:DataGridTextColumn.CellContentStyle> 
	    </telerik:DataGridTextColumn> 
	    <telerik:DataGridNumericalColumn DataMemberBinding="{Binding StadiumCapacity, StringFormat="{0:N0}"}" 
	    HeaderText="Stadium Capacity"/> 
	    <telerik:DataGridBooleanColumn DataMemberBinding="{Binding IsChampion, Converter={StaticResource BoolToValueConverter}}" 
	    HeaderText="Champion"/> 
	    <telerik:DataGridDateColumn PropertyName="Established" 
	    HeaderText="Date Established"/> 
	    <telerik:DataGridComboBoxColumn PropertyName="Championship" 
	    HeaderText="Championship" 
	    ItemsSourcePath="Championships"/> 
	    <telerik:DataGridTemplateColumn HeaderText="Location"> 
	    <telerik:DataGridTemplateColumn.CellContentTemplate> 
	    <DataTemplate> 
	    <Grid> 
	    <VerticalStackLayout InputTransparent="True"> 
	    <Label Text="{Binding Country}" 
	    TextColor="#009688" 
	    Margin="0, 5, 0, 5" 
	    HorizontalOptions="Center" 
	    VerticalTextAlignment="Center"/> 
	    <Label Text="{Binding City}" 
	    TextColor="#80CBC4" 
	    HorizontalOptions="Center" 
	    VerticalTextAlignment="Center" 
	    FontSize="12"/> 
	    </VerticalStackLayout> 
	    </Grid> 
	    </DataTemplate> </telerik:DataGridTemplateColumn.CellContentTemplate> 
	    </telerik:DataGridTemplateColumn> 
	    <telerik:DataGridNumericalColumn DataMemberBinding="{Binding Path=Revenue, StringFormat="{0:C}", TargetNullValue="N/A"}" 
	    HeaderText="Revenue (in millions)"/> 
    </telerik:RadDataGrid.Columns> 
</telerik:RadDataGrid>

En tant que revue générale, il est important de connaître les fonctionnalités disponibles dans ce composant. Vous pouvez travailler avec des en-têtes de colonne, définir comment le contenu est affiché et modifié à l’aide de modèles, et même afficher des informations supplémentaires dans les pieds de pied de colonne. Vous pouvez également régler la largeur de la colonne manuellement ou automatiquement.

Un point clé est que vous pouvez geler les colonnes – tout comme dans Excel – ce qui est super utile car même si vous faites défiler beaucoup de données, ces colonnes restent visibles.

🔄 Réorganisation de la colonne

Oui! En plus de tout ce que nous avons déjà couvert, vous avez également la possibilité de réorganiser vos colonnes DataGrid en temps réel à l’aide de la fonctionnalité de glisser-déposer. Cela améliore considérablement la lisibilité, offre une expérience plus conviviale et facilite l’intégration avec les architectures MVVM.

🛠️ Propriétés clés pour l’activation de la réorganisation de la colonne

• CanuserreOrderColumns: Cette propriété prend une valeur booléenne et contrôle si l’utilisateur peut réorganiser les colonnes. Sa valeur par défaut est vraie.
• ColumnReorderIndicatorTemplate: Vous permet de personnaliser l’indicateur visuel qui apparaît entre les colonnes tout en faisant glisser une. Considérez-le comme une ligne verticale (par exemple, vert) qui montre où la colonne atterrira si vous la déposez.
• ColumnHeaderDragVisualTemplate: Définit l’apparence de l’en-tête de la colonne tout en étant traînée. Vous pouvez personnaliser sa couleur d’arrière-plan, son style de texte, ses bordures, etc. par exemple: une boîte verte avec du texte bleu qui apparaît en faisant glisser la colonne.

Vous trouverez ci-dessous un exemple simple démontrant l’implémentation XAML.

<Grid RowDefinitions="Auto, *"> 
    <Grid ColumnDefinitions="Auto, Auto" Margin="0, 0, 0, 10"> 
    <Label Text="Enable Column Reordering: " VerticalOptions="Center"/> 
    <Switch Grid.Column="1" 
    IsToggled="{Binding IsReorderingEnabled, Mode=TwoWay}" 
    VerticalOptions="Center" 
    HorizontalOptions="End"/> 
    </Grid> 
	    <telerik:RadDataGrid x:Name="dataGrid" 
	    Grid.Row="1" 
		    AutoGenerateColumns="False" 
		    ItemsSource="{Binding Data}" 
		    CanUserReorderColumns="{Binding IsReorderingEnabled}" 
		    ColumnReorderStarting="OnColumnReorderStarting" 
		    ColumnReordering="OnColumnReordering" 
		    ColumnReorderCompleting="OnColumnReorderCompleting" 
		    ColumnReordered="OnColumnReordered"> 
			    <telerik:RadDataGrid.Columns> 
			    <telerik:DataGridTextColumn PropertyName="Name" IsFrozen="True" /> 
			    <telerik:DataGridNumericalColumn PropertyName="Age" /> 
			    <telerik:DataGridComboBoxColumn PropertyName="Gender" /> 
			    <telerik:DataGridNumericalColumn PropertyName="Weight" /> 
			    </telerik:RadDataGrid.Columns> 
    </telerik:RadDataGrid> 
</Grid>

Tri de colonne

Une autre caractéristique super importante du dataGrid est la possibilité de trier les colonnes. Et la meilleure partie? C’est aussi simple que de cliquer sur un en-tête de colonne! De plus, si vous préférez plus de contrôle, vous pouvez également gérer le tri par code.

Le comportement de tri est contrôlé par le Usersordmode propriété, qui détermine comment le datagrid réagit lorsqu’un en-tête de colonne est cliqué. Vous pouvez choisir entre:

• Auto (par défaut): Comportement standard
• Célibataire: Une seule colonne peut être triée à la fois
• Multiple: Permet le tri multi-colonnes
• Aucun: Désactive le tri basé sur l’interface utilisateur

Vous pouvez également activer ou désactiver le tri pour une colonne spécifique en utilisant le Canusersort propriété (type bool).

Tri en code

Si vous souhaitez un contrôle complet, vous pouvez également trier les colonnes par programme. Il existe deux façons principales de le faire:

🔹 Utilisation PropertySortDescriptor: Cela vous permet de trier en fonction d’une propriété spécifique de votre modèle de données, tel que le nom et l’âge.

<telerik:RadDataGrid.SortDescriptors> 
    <telerik:PropertySortDescriptor PropertyName="Name" SortOrder="Ascending"/> 
</telerik:RadDataGrid.SortDescriptors>

🔹 Utilisation DelegatesortDescriptor: Idéal lorsque vous souhaitez trier en utilisant une valeur calculée, comme la longueur d’une chaîne.

public class CustomKeyLookup : IKeyLookup 
{ 
    public object GetKey(object item) => (item as Person).Name.Length; 
}
 
dataGrid.SortDescriptors.Add(new DelegateSortDescriptor 
{ 
    KeyLookup = new CustomKeyLookup() 
});

🔍 Explorer le filtrage

Filtrage via l’interface utilisateur

Vous avez également la possibilité d’activer le filtrage directement dans votre dataGrid. Chaque en-tête de colonne comprend une icône de filtre, et en cliquant dessus, vous verrez les conditions de filtre disponibles que vous pouvez appliquer.

✨ La partie la plus cool est que vous pouvez entièrement personnaliser l’apparence de l’interface utilisateur de filtrage en utilisant le FilterControltemplate propriété.

• FilterControlTemplate: Vous permet de définir un modèle personnalisé pour le contrôle du filtre de la colonne. Ce modèle doit inclure un contrôle qui hérite de Datagride FilterControlbasevous donnant un contrôle total sur l’apparence du panneau de filtre.

Filtrage programmatique

• Vous pouvez également appliquer des filtres directement via le code en ajoutant différents types de descripteurs de filtre au FilterDescriptorsCollection du dataGrid.

Ceci est parfait lorsque vous souhaitez appliquer un filtrage basé sur la logique, comme:

• Filtrage par la date actuelle
• Affichant uniquement des enregistrements actifs ou des statuts spécifiques
• Combiner plusieurs conditions de filtre

Comment modifier le contenu cellulaire dans un dataGrid

Vous pouvez facilement modifier le contenu cellulaire directement dans le dataGrid. L’édition est déclenchée par double-cliquez (ou taper) sur une cellule, et le comportement est contrôlé par le Propriété userReditModequi accepte les valeurs suivantes:

• Aucun (par défaut sur mobile) – désactive l’édition
• Cellule (par défaut sur le bureau) – Active l’édition au niveau des cellules

Vous pouvez également désactiver l’édition pour des colonnes spécifiques en définissant le Canuseredit propriété à false.

Vous souhaitez personnaliser l’expérience d’édition?

Si les éditeurs par défaut ne correspondent pas à vos besoins, vous pouvez définir éditeurs personnalisés pour chaque colonne en utilisant le CellEditTemplate propriété. Cela vous donne un contrôle total sur la façon dont les données sont modifiées.

Et oui, vous pouvez également styliser vos éditeurs en utilisant le CellEditorStyle propriété sur chaque colonne. Par exemple, voici un style appliqué à un TextColumn Éditeur avec texte audacieux et alignement centré:

<telerik:DataGridTextColumn.CellEditorStyle> 
    <Style TargetType="telerik:RadEntry"> 
	    <Setter Property="FontAttributes" Value="Bold" /> 
	    <Setter Property="HorizontalTextAlignment" Value="Center" /> 
	    <Setter Property="Margin" Value="2" /> 
    </Style> 
</telerik:DataGridTextColumn.CellEditorStyle>

Chargement à la demande dans le dataGrid

Lorsque vous travaillez avec de grands ensembles de données, ce composant vous permet de charger les données progressivementce qui améliore considérablement les performances et l’expérience utilisateur.

Modes de chargement disponibles

Ce comportement est contrôlé par le Fashion Loadondmand propriété, qui accepte les valeurs suivantes:

• Automatique: Charge automatiquement plus de données lorsque l’utilisateur défile près de la fin de la grille. Vous pouvez affiner lorsque cela est déclenché en utilisant le LoadOnDemandBufferItemsCount propriété.
• Manuel: Affiche un «Chargez plus» bouton en bas de la grille. Lorsque vous cliquez sur, il charge des données supplémentaires en fonction de votre logique.

Façons de mettre en œuvre la charge à la demande

1. Utilisation de chargemandCollection

Une collection spéciale qui fonctionne comme un ObservableCollection, mais prend en charge le chargement des éléments dynamiquement à l’aide d’une fonction déléguée.

this.Items = new LoadOnDemandCollection<Person>((token) => 
{ 
    var list = new List<Person>(); 
    for (int i = 0; i < 10; i++) 
	    list.Add(new Person { Name = $"LOD Person {i}", Age = i + 18 }); 
    return list; 
});

2. Utilisation de l’événement Loadondemand

Vous pouvez gérer cet événement et ajouter manuellement de nouveaux articles à la grille ItemsSource.

private void dataGrid_LoadOnDemand(object sender, LoadOnDemandEventArgs e) 
{ 
    var source = (sender as RadDataGrid).ItemsSource as ObservableCollection<Person>; 
    for (int i = 0; i < 15; i++) 
	    source.Add(new Person { Name = $"Person {i}", Age = i + 18 }); 
	    e.IsDataLoaded = true; 
}

3. Utilisation de la commande LoadMoreData (idéal pour MVVM)

Créez une commande personnalisée et ajoutez-le au DataGrid.Commands collection. Cela vous donne le contrôle total du ViewModel.

public class CustomLoadMoreDataCommand : DataGridCommand 
{ 
public override void Execute(object parameter) 
    { 
	    var viewModel = this.Owner.BindingContext as MyViewModel; 
	    for (int i = 0; i < 10; i++) 
		    viewModel.Items.Add(new Person { Name = $"Person {i}", Age = i + 18 }); 
    } 
}

Conclusion

C’est ça! Vous êtes maintenant entièrement équipé pour faire passer votre .net Maui DataGrid au niveau suivant. Du tri et au filtrage à l’édition et au chargement des données à la demande, vous avez tout ce dont vous avez besoin pour créer des grilles puissantes, dynamiques et évolutives qui offrent une expérience utilisateur fluide sur les plates-formes. 💪📊

Vous pouvez lire Plus d’informations sur le contrôle de la grille .net Maui ici.

Que vous laissiez les utilisateurs trier et filtrer facilement, la personnalisation des éditeurs en ligne ou la gestion des ensembles de données massifs avec un chargement incrémentiel, l’interface utilisateur de Telerik pour .net Maui DataGrid a le dos. Essayez-le, plus les 60 autres composants d’interface utilisateur dans la bibliothèque gratuitement pendant 30 jours:

Essayer maintenant

Si vous avez des questions, n’hésitez pas à laisser un commentaire ou à tendre la main – je suis heureux de vous aider!

Rendez-vous dans le prochain! 🙋‍♀️💚

Références