.net Maui Collectionview Example

4 min read Jun 04, 2024

Explorer la CollectionView dans .NET MAUI

.NET MAUI offre une variété de contrôles d'interface utilisateur pour présenter des données, et la CollectionView est l'un des plus puissants. Elle permet d'afficher des collections de données de manière flexible et efficace, que ce soit sous forme de liste, de grille ou de flux.

Dans cet article, nous allons explorer la CollectionView dans .NET MAUI en créant un exemple simple qui affiche une liste d'éléments.

Création de l'Exemple

Créez un nouveau projet .NET MAUI.
Ajoutez un modèle de données. Pour cet exemple, nous allons utiliser une classe simple nommée "Item":

public class Item
{
    public string Title { get; set; }
    public string Description { get; set; }
}

Créez une liste d'éléments. Dans votre page XAML, ajoutez une CollectionView et définissez sa source de données :

Implémentez le code-behind. Dans le fichier code-behind de votre page, définissez une propriété Items qui contiendra la liste d'éléments :

public partial class MainPage : ContentPage
{
    public List Items { get; set; }

    public MainPage()
    {
        InitializeComponent();

        Items = new List
        {
            new Item { Title = "Premier élément", Description = "Description du premier élément." },
            new Item { Title = "Deuxième élément", Description = "Description du deuxième élément." },
            new Item { Title = "Troisième élément", Description = "Description du troisième élément." }
        };

        BindingContext = this;
    }
}

Explication du Code

ItemsSource: Cette propriété lie la CollectionView à la source de données, dans ce cas, la liste Items.
ItemTemplate: Cette propriété définit le modèle à utiliser pour afficher chaque élément de la collection.
DataTemplate: Ce template définit l'apparence de chaque élément. Ici, nous utilisons un Grid avec deux Label pour afficher le titre et la description.
Binding: La directive Binding permet de lier les propriétés des éléments aux propriétés des contrôles dans le DataTemplate.

Personnaliser la CollectionView

La CollectionView offre de nombreuses options de personnalisation, notamment :

ItemsLayout: Permet de définir la disposition des éléments (liste, grille, flux).
SelectionMode: Permet de choisir le mode de sélection des éléments.
SelectionChangedCommand: Permet de gérer les événements de sélection.
RefreshCommand: Permet de rafraîchir la CollectionView.

Conclusion

La CollectionView est un outil puissant pour afficher des données dans .NET MAUI. Elle offre une grande flexibilité et des options de personnalisation pour créer des interfaces utilisateur attrayantes et fonctionnelles. N'hésitez pas à explorer les différentes fonctionnalités de la CollectionView pour créer des applications mobiles riches et dynamiques.