Comment intégrer la recherche au fur et à mesure que vous tapez dans .NET MAUI DataGrid

Votre .NET MAUI DataGrid peut afficher des données en temps réel, permettre aux utilisateurs de rechercher avec du texte prédictif et d’utiliser des styles personnalisés.

Dans cet article, vous apprendrez à créer une application .NET MAUI qui se connecte à un service d’informations sur les crypto-monnaies en temps réel, affichant les informations dans un fichier Progress. Interface utilisateur Telerik pour .NET MAUI Contrôle DataGrid. Vous verrez également comment personnaliser le DataGrid pour qu’il corresponde aux couleurs de votre application, ainsi que comment utiliser le Rechercher pendant que vous tapez fonctionnalité, vous permettant de filtrer et de mettre en évidence les résultats lorsque vous tapez une recherche de texte. Commençons !

Mise en place du projet initial

Pour commencer notre voyage, installons d’abord les packages NuGet que nous utiliserons dans notre application, à savoir :

Pour utiliser les commandes Telerik, il est indispensable d’aller dans le MauiProgram.cs fichier et ajoutez le UseTelerik méthode au constructeur, comme indiqué ci-dessous :

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseTelerik()
            ...
    }
}

Ensuite, créez une classe que nous appellerons AssetsViewModel.cs et modifiez-le pour qu’il fonctionne avec la boîte à outils Mvvm comme suit :

public partial class AssetsViewModel : ObservableObject
{
}

Nous utiliserons la valeur par défaut MainPage.xaml fichier pour simplifier le processus.

Création de modèles pour consommer le service de crypto-monnaie

J’aime l’idée de pouvoir expérimenter avec des données réelles, j’ai donc cherché des services qui fournissent des informations en temps réel sur les valeurs des crypto-monnaies. Heureusement, j’ai trouvé un service appelé CoinCap 2.0 que vous pouvez même essayer sans vous inscrire, bien qu’il ait une limite de 200 requêtes par minute (comprenant une requête comme un enregistrement d’une crypto-monnaie).

La réponse du demandes’il est correct, a la structure JSON suivante :

{
    "data": [
        {
            "id": "bitcoin",
            "rank": "1",
            "symbol": "BTC",
            "name": "Bitcoin",
            "supply": "19747765.0000000000000000",
            "maxSupply": "21000000.0000000000000000",
            "marketCapUsd": "1165808360698.0693477874721805",
            "volumeUsd24Hr": "6473222897.4938131572636034",
            "priceUsd": "59034.9520919491065337",
            "changePercent24Hr": "-0.3843334475518520",
            "vwap24Hr": "59174.4649788736905926",
            "explorer": "https://blockchain.info/"
        }        
    ],
    "timestamp": 1725147060308
}

En copiant le code JSON ci-dessus et en utilisant la fonctionnalité de VS 2022 située dans Modifier | Coller spécial | Coller JSON en tant que classesnous obtiendrons un modèle comme celui-ci :

public class Assets
{
    public Datum[] data { get; set; }
    public long timestamp { get; set; }
}

public class Datum
{
    public string id { get; set; }
    public string rank { get; set; }
    public string symbol { get; set; }
    public string name { get; set; }
    public string supply { get; set; }
    public string maxSupply { get; set; }
    public string marketCapUsd { get; set; }
    public string volumeUsd24Hr { get; set; }
    public string priceUsd { get; set; }
    public string changePercent24Hr { get; set; }
    public string vwap24Hr { get; set; }
}

Vous pouvez générer ce modèle dans une nouvelle classe appelée Assets. Créons ensuite un deuxième modèle appelé AssetModel qui sera celui que nous utiliserons dans l’interface graphique. Le but de AssetModel est de pouvoir stocker les données avec un format appliqué, qui ressemble à ceci :

public class AssetModel
{
    public string Name { get; set; }
    public decimal Price { get; set; }
    public double _24hrs { get; set; }
    public string Symbol { get; set; }
}

Une fois notre paire de modèles prête, continuons avec la création du View Model.

Création du ViewModel qui obtiendra des informations sur la crypto-monnaie

Une fois que nous avons le modèle de données, il est temps d’ajouter des fonctionnalités au AssetsViewModel classe, qui ressemblera à ceci :

public partial class AssetsViewModel : ObservableObject
{
    private readonly HttpClient _httpClient;
    [ObservableProperty]
    private ObservableCollection<AssetModel> assets;

    public AssetsViewModel()
    {
        _httpClient = new HttpClient();
    }

    public async Task LoadAssetsAsync()
    {
        var response = await _httpClient.GetStringAsync("https://api.coincap.io/v2/assets");
        var assetsResponse = JsonSerializer.Deserialize<Assets>(response);
        var data = assetsResponse.data.Select(item => new AssetModel
        {
            Name = item.name,
            Price = decimal.Parse(item.priceUsd),
            _24hrs = Math.Round(double.Parse(item.changePercent24Hr), 4),
            Symbol = item.symbol
        });
        Assets = new ObservableCollection<AssetModel>(data);
    }
}

À partir du code ci-dessus, vous pouvez voir les fonctionnalités suivantes :

1. Un exemple de HttpClient est créé et initialisé dans le constructeur. Cette instance sera utilisée pour communiquer avec le point de terminaison du service afin d’obtenir les données.
2. Une propriété de type ObservableCollection avec un générique AssetModel est créé, que nous lierons à l’interface graphique.
3. Le LoadAssetsAsync est spécifiée, qui exécutera la demande au service. Dans celui-ci, le point de terminaison qui renvoie la liste des pièces binaires est interrogé, qui est désérialisé en un Assets taper.
4. La liste désérialisée est convertie en une nouvelle liste de type AssetModelpour obtenir uniquement les propriétés qui nous intéressent, en appliquant des opérations de formatage des données.

Création et liaison du contrôle DataGrid .NET MAUI

Maintenant que nous avons les modèles et View Model prêts, il est temps de créer l’interface graphique de l’application, en utilisant le .NET Grille de données MAUI contrôle de Telerik. Cette implémentation est très simple, car tout ce que nous avons à faire est d’ajouter l’espace de noms aux contrôles Telerik et d’ajouter la référence au DataGrid comme suit :

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

    <telerik:RadDataGrid x:Name="dataGrid" ItemsSource="{Binding Assets}" />
    ...
</ContentPage>

En revanche, dans le MainPage.xaml.cs fichier, nous devons supprimer les références aux contrôles par défaut et initialiser le BindingContext avec une référence à AssetsViewModel. Aussi, nous devons passer outre le OnAppearing méthode pour invoquer le LoadAssetsAsync méthode lorsque l’écran est affiché, comme suit :

public partial class MainPage : ContentPage
{
    AssetsViewModel ViewModel;
    public MainPage()
    {
        InitializeComponent();
        ViewModel = new AssetsViewModel();
        BindingContext = ViewModel;
    }

    protected override async void OnAppearing()
    {
        await ViewModel.LoadAssetsAsync();
    }
}

Avec ces changements, lors de l’exécution de l’application, nous aurons déjà un joli contrôle qui affichera les données réelles provenant du service :

Effectuer une synchronisation avec le service à une certaine heure

Si vous souhaitez mettre à jour les informations sur la page de candidature, vous devez créer une minuterie et l’exécuter à intervalles réguliers. Dans notre cas, nous pouvons le faire à partir du code derrière dans le OnAppearing méthode:

public partial class AssetsPage : ContentPage
{
    ...
    IDispatcherTimer timer;    
    protected override async void OnAppearing()
    {
        await ViewModel.LoadAssetsAsync();        
        timer = Dispatcher.CreateTimer();
        timer.Interval = TimeSpan.FromMilliseconds(60000);
        timer.Tick += async (s, e) =>
        {
            await ViewModel.LoadAssetsAsync();
        };
        timer.Start();
    }
    protected override void OnDisappearing()
    {        
        timer.Stop();
        timer.Tick -= async (s, e) =>
        {
            await ViewModel.LoadAssetsAsync();
        };
    }
}

Dans l’exemple ci-dessus, le minuteur sera exécuté toutes les minutes. Cela est lié au fait que le service REST met à jour les informations toutes les 60 secondes, il ne serait donc pas logique de les mettre à jour plus rapidement, même si vous pouvez sûrement trouver un autre service qui met à jour les informations plus souvent.

Personnalisation du contrôle Telerik DataGrid

Peut-être que, dans le cadre des exigences de votre application, vous devez appliquer certaines couleurs au contrôle DataGrid pour les rendre plus conformes au thème de l’application. Dans ces cas-là, nous devons indiquer au contrôle que nous ne voulons pas que les colonnes soient générées automatiquement :

<telerik:RadDataGrid
    x:Name="dataGrid"
    AutoGenerateColumns="False"
    ItemsSource="{Binding Assets}">
</telerik:RadDataGrid>

Ensuite, nous devons définir une balise pour chaque colonne en fonction de son type de données, parmi lesquelles nous avons à notre disposition les types suivants :

• DataGridTextColumn : pour les colonnes de texte
• DataGridNumericalColumn : pour les colonnes numériques
• DataGridBooleanColumn : pour les colonnes avec des valeurs booléennes
• DataGridDateColumn : pour les colonnes représentant les dates
• DataGridTimeColumn : pour les colonnes représentant des TimeSpans
• DataGridComboBoxColumn : utilise le contrôle ComboBox pour sélectionner une valeur dans une liste
• DataGridTemplateColumn : pour définir une cellule personnalisée avec un DataTemplate
• DataGridToggleRowDetailsColumn : représente un DataGridColumn et permet d’afficher et de masquer les détails des éléments.

Dans notre cas, comme nous ne voulons effectuer aucune opération sur les informations affichées, nous allons utiliser le DataGridTextColumn tapez, en attribuant le texte dans l’en-tête et la propriété du modèle que nous voulons lier :

    <telerik:RadDataGrid...>

        <telerik:RadDataGrid.Columns>
            
            <telerik:DataGridTextColumn HeaderText="Symbol" PropertyName="Symbol" />
            
            <telerik:DataGridTextColumn HeaderText="Name" PropertyName="Name" />
            
            <telerik:DataGridTextColumn
                CellContentFormat="{}{0:C}"
                HeaderText="Price(USD)"
                PropertyName="Price" />
            
            <telerik:DataGridTextColumn HeaderText="24h" PropertyName="_24hrs" />
        </telerik:RadDataGrid.Columns>

    </telerik:RadDataGrid>

Le code ci-dessus nous permet d’avoir plus de contrôle sur chaque propriété dans les colonnes, en pouvant les personnaliser autant que nous le souhaitons. Vous pouvez également personnaliser le style du contenu des cellules et de leurs en-têtes, à l’aide de l’option HeaderStyle et CellContentStyle propriétés:

        <telerik:RadDataGrid.Columns>
            
            <telerik:DataGridTextColumn HeaderText="Symbol" PropertyName="Symbol">
                
                <telerik:DataGridTextColumn.HeaderStyle>
                    <telerik:DataGridColumnHeaderStyle
                        BackgroundColor="#1F1F27"
                        BorderColor="#1A1A1A"
                        BorderThickness="0,0,0,1"
                        HorizontalTextAlignment="Center"
                        TextColor="#929CB4" />
                </telerik:DataGridTextColumn.HeaderStyle>
                
                <telerik:DataGridTextColumn.CellContentStyle>
                    <telerik:DataGridTextCellStyle
                        FontSize="15"
                        HorizontalTextAlignment="Center"
                        SelectedTextColor="White"
                        TextColor="White" />
                </telerik:DataGridTextColumn.CellContentStyle>
            </telerik:DataGridTextColumn>
            
            <telerik:DataGridTextColumn HeaderText="Name" PropertyName="Name">
                
                <telerik:DataGridTextColumn.HeaderStyle>
                    <telerik:DataGridColumnHeaderStyle
                        BackgroundColor="#1F1F27"
                        BorderColor="#1A1A1A"
                        BorderThickness="0,0,0,1"
                        HorizontalTextAlignment="Center"
                        TextColor="#929CB4" />
                </telerik:DataGridTextColumn.HeaderStyle>
                
                <telerik:DataGridTextColumn.CellContentStyle>
                    <telerik:DataGridTextCellStyle
                        FontSize="15"
                        HorizontalTextAlignment="Center"
                        SelectedTextColor="White"
                        TextColor="White" />
                </telerik:DataGridTextColumn.CellContentStyle>
            </telerik:DataGridTextColumn>
            
            <telerik:DataGridTextColumn
                CellContentFormat="{}{0:C}"
                HeaderText="Price(USD)"
                PropertyName="Price">
                
                <telerik:DataGridTextColumn.HeaderStyle>
                    <telerik:DataGridColumnHeaderStyle
                        BackgroundColor="#1F1F27"
                        BorderColor="#1A1A1A"
                        BorderThickness="0,0,0,1"
                        HorizontalTextAlignment="Center"
                        TextColor="#929CB4" />
                </telerik:DataGridTextColumn.HeaderStyle>
                
                <telerik:DataGridTextColumn.CellContentStyle>
                    <telerik:DataGridTextCellStyle
                        FontSize="15"
                        HorizontalTextAlignment="Center"
                        SelectedTextColor="White"
                        TextColor="White" />
                </telerik:DataGridTextColumn.CellContentStyle>
            </telerik:DataGridTextColumn>
            
            <telerik:DataGridTextColumn HeaderText="24h" PropertyName="_24hrs">
                
                <telerik:DataGridTextColumn.HeaderStyle>
                    <telerik:DataGridColumnHeaderStyle
                        BackgroundColor="#1F1F27"
                        BorderColor="#1A1A1A"
                        BorderThickness="0,0,0,1"
                        HorizontalTextAlignment="Center"
                        TextColor="#929CB4" />
                </telerik:DataGridTextColumn.HeaderStyle>
                
                <telerik:DataGridTextColumn.CellContentStyle>
                    <telerik:DataGridTextCellStyle
                        FontSize="15"
                        HorizontalTextAlignment="Center"
                        SelectedTextColor="White"
                        TextColor="White" />
                </telerik:DataGridTextColumn.CellContentStyle>
            </telerik:DataGridTextColumn>
        </telerik:RadDataGrid.Columns>
    </telerik:RadDataGrid>

Avec cela, nous avons modifié le style des en-têtes et le contenu des cellules, qui ressembleront à ceci :

Dans l’image ci-dessus, vous pouvez voir qu’il n’est pas possible de visualiser les informations sur la crypto-monnaie en raison de la couleur d’arrière-plan par défaut. Pour résoudre ce problème et personnaliser davantage l’application, modifions le RowBackgroundStyle, AlternateRowBackgroundStyle et SelectionStyle propriétés comme suit :

<telerik:RadDataGrid...>

    <telerik:RadDataGrid.Columns>
        ...        
    </telerik:RadDataGrid.Columns>
    <telerik:RadDataGrid.RowBackgroundStyle>
        <telerik:DataGridBorderStyle BackgroundColor="#252526" />
    </telerik:RadDataGrid.RowBackgroundStyle>
    <telerik:RadDataGrid.AlternateRowBackgroundStyle>
        <telerik:DataGridBorderStyle BackgroundColor="#2E2E2F" />
    </telerik:RadDataGrid.AlternateRowBackgroundStyle>
    <telerik:RadDataGrid.SelectionStyle>
        <telerik:DataGridBorderStyle
            BackgroundColor="#3A3A3B"
            BorderColor="#4A4A4B"
            BorderThickness="{OnIdiom Default=0,
                                      Phone=1}" />
    </telerik:RadDataGrid.SelectionStyle>
</telerik:RadDataGrid>

Avec les modifications ci-dessus, nous pouvons voir les informations correctement et nous avons personnalisé davantage la conception DataGrid :

Voyons maintenant comment appliquer des couleurs à la colonne 24h en fonction de sa valeur.

Implémentation de couleurs personnalisées pour la tendance des crypto-monnaies

Si vous avez utilisé une crypto-monnaie ou une application boursière, une donnée que vous souhaitez connaître simplement en la regardant est la performance de la crypto-monnaie ou de l’action. C’est pourquoi nous allons colorer les données dans le 24 heures colonne selon sa tendance.

Pour y parvenir, nous devons d’abord créer une classe qui hérite du DataGridStyleSelector tapez, qui ressemble à ceci :

class MyCellContentSelector : DataGridStyleSelector
{
    public DataGridStyle UpTemplate { get; set; }
    public DataGridStyle DownTemplate { get; set; }
    public override DataGridStyle SelectStyle(object item, BindableObject container)
    {
        DataGridCellInfo cellInfo = item as DataGridCellInfo;
        if (cellInfo != null)
        {
            var t = (cellInfo.Item as AssetModel)._24hrs;
            if ((cellInfo.Item as AssetModel)._24hrs > 0)
            {
                return UpTemplate;
            }
            else
            {
                return DownTemplate;
            }
        }
        return base.SelectStyle(item, container);
    }
}

À partir du code ci-dessus, nous voyons une paire de propriétés de type DataGridStyle ce qui nous permettra de savoir quel Template appliquer pour le contenu d’une cellule. Ensuite, dans la méthode SelectStyle, la cellule DataGrid est obtenue et la valeur du _24hrs propriété à partir de la référence du AssetModel lié à cette cellule.

Par la suite, il compare si la valeur est positive ou négative et renvoie le modèle correspondant en fonction de l’évaluation.

L’étape suivante consiste à ajouter le DataGridStyle styles. Je vais le faire dans la section ressources de la page où j’utilise le DataGrid, comme suit :

<ContentPage ...>

    <ContentPage.Resources>
        <local:MyCellContentSelector x:Key="MyCellContentStyleSelector">
            <local:MyCellContentSelector.UpTemplate>
                <telerik:DataGridTextCellStyle TextColor="#66BB6A" />
            </local:MyCellContentSelector.UpTemplate>
            <local:MyCellContentSelector.DownTemplate>
                <telerik:DataGridTextCellStyle TextColor="#D32F2F" />
            </local:MyCellContentSelector.DownTemplate>
        </local:MyCellContentSelector>
    </ContentPage.Resources>

    ...
</ContentPage>

Dans le code ci-dessus, je définis une référence au sélecteur que je peux utiliser dans les contrôles DataGrid et leurs différents styles, qui seront choisis en fonction du ContentSelector défini précédemment.

Enfin, dans la colonne 24h, ajoutons la référence au sélecteur au CellContentStyleSelector propriété:

 <telerik:DataGridTextColumn
     CellContentStyleSelector="{StaticResource MyCellContentStyleSelector}"
     HeaderText="24h"
     PropertyName="_24hrs">
     ...     
 </telerik:DataGridTextColumn>

Avec l’ajout du code ci-dessus, nous pourrons voir que chaque valeur de la colonne 24h est colorée en fonction de sa valeur, ainsi l’utilisateur pourra connaître immédiatement la tendance de la cryptomonnaie :

Voyons maintenant comment ajouter le Rechercher au fur et à mesure de la frappe fonctionnalité au DataGrid.

Ajout de la fonctionnalité de recherche au fur et à mesure de la saisie au DataGrid

Lorsque nous travaillons avec de nombreux enregistrements d’informations, pouvoir effectuer des recherches et des filtres à travers eux est fondamental dans nos applications. Le contrôle DataGrid a le Rechercher au fur et à mesure de la frappe fonctionnalité implémentée nativement, que nous pouvons activer via le SearchSettings propriété:

<telerik:RadDataGrid ...>

    <telerik:RadDataGrid.SearchSettings>
        <telerik:DataGridSearchSettings SearchPanelVisibilityMode="AlwaysVisible" />
    </telerik:RadDataGrid.SearchSettings>

Avec le code ci-dessus, nous pourrons voir qu’une barre de recherche est activée dans l’application qui filtrera les informations au fur et à mesure que nous tapons :

Certaines autres propriétés peuvent nous intéresser lors de la mise en œuvre de la recherche dans la zone de texte, comme la ApplyFilter propriété qui spécifie si seules les lignes où il y a une correspondance avec la requête doivent être affichées.

Une autre propriété utile est SearchTriggerqui contient les valeurs Completed et TextChangedet vous permet de spécifier quand la recherche doit être exécutée. La première consiste à attendre que nous ayons fini d’écrire dans la zone de texte, tandis que la seconde consiste à exécuter la requête immédiatement après qu’une modification se soit produite dans la zone de recherche.

Le TextMatchMode La propriété vous permet de spécifier comment la correspondance doit être effectuée sur les valeurs, les valeurs autorisées étant Contains, StartsWith et WholeWord.

Recherche de plusieurs valeurs avec la fonctionnalité de recherche au fur et à mesure de la saisie

Dans le cadre de la fonctionnalité Search-as-You-Type, il est également possible d’interagir avec le SearchStarting événement qui sera déclenché avant de démarrer une recherche. Cet événement peut être utile pour effectuer un certain type de prétraitement des informations de recherche, un cas pratique étant celui où nous souhaitons que l’utilisateur puisse rechercher plus d’un terme.

Pour profiter de l’événement, il suffit de s’abonner au SearchStarting événement dans DataGridSearchSettings comme suit:

<telerik:RadDataGrid.SearchSettings>
    <telerik:DataGridSearchSettings
        ApplyFilter="True"
        SearchPanelVisibilityMode="AlwaysVisible"
        SearchStarting="DataGridSearchSettings_SearchStarting"
        SearchTrigger="TextChanged"
        TextMatchMode="Contains"/>
</telerik:RadDataGrid.SearchSettings>

Dans le code ci-dessous, nous allons implémenter le gestionnaire d’événements comme suit :

 public partial class MainPage : ContentPage
 {
    ...
    private void DataGridSearchSettings_SearchStarting(object sender, Telerik.Maui.Controls.DataGrid.DataGridSearchStartingEventArgs e)
    {
        DataGridSearchSettings searchSettings = (DataGridSearchSettings)sender;
        string[] separators = {" ", "|", ","};
        List<string> split = searchSettings.SearchText?.Split(separators, System.StringSplitOptions.RemoveEmptyEntries).ToList();

        e.SearchTerms = split;
        e.SearchTermsLogicalOperator = LogicalOperator.Or;
    }
}

Dans le code ci-dessus, les actions suivantes sont effectuées :

1. La configuration de recherche du champ est obtenue.
2. Un tableau de séparateurs est défini que nous utiliserons pour identifier différents termes.
3. Chaque terme obtenu à partir de la zone de texte est ajouté aux termes de recherche.
4. Un Or L’opérateur est utilisé pour indiquer que nous voulons obtenir l’un des résultats obtenus.

Cela permettra à l’utilisateur d’obtenir différents résultats en une seule requête, en utilisant les séparateurs spécifiés dans le code :

L’image ci-dessus montre le résultat d’une recherche utilisant le | séparateur.

Conclusion

Tout au long de cet article, vous avez appris comment implémenter le contrôle Telerik DataGrid à partir de zéro, comment vous connecter à un service d’informations sur la crypto-monnaie pour afficher des données en temps réel, comment personnaliser chaque élément du contrôle pour avoir l’apparence souhaitée et comment activez la fonctionnalité Rechercher au fur et à mesure de la frappe pour filtrer les résultats de recherche. Bon codage !

Telerik UI pour .NET MAUI est livré avec un essai gratuit. Prêt à tenter votre chance ?

Essayez maintenant