Afficher les clients dans une liste

L’affichage et la manipulation de données réelles dans l’interface utilisateur sont essentielles aux fonctionnalités de nombreuses applications. Cet article vous montre ce que vous devez savoir pour afficher une collection d’objets Customer dans une liste.

Ce n’est pas un didacticiel. Si vous en souhaitez un, consultez notre didacticiel de liaison de données, qui vous fournira une expérience guidée pas à pas.

Nous allons commencer par une discussion rapide sur la liaison de données : ce qu’elle est et comment elle fonctionne. Ensuite, nous allons ajouter un ListView à l’interface utilisateur, ajouter une liaison de données et personnaliser la liaison de données avec des fonctionnalités supplémentaires.

Que devez-vous savoir ?

La liaison de données est un moyen d’afficher les données d’une application dans son interface utilisateur. Cela permet séparation des préoccupations dans votre application, en gardant votre interface utilisateur distincte de votre autre code. Cela crée un modèle conceptuel plus propre qui est plus facile à lire et à gérer.

Chaque liaison de données comporte deux éléments :

• Une source qui fournit les données à lier.
• Cible dans l’interface utilisateur où les données sont affichées.

Pour implémenter une liaison de données, vous devez ajouter du code à votre source qui fournit des données à la liaison. Vous devez également ajouter l’une des deux extensions de balisage à votre code XAML pour spécifier les propriétés de la source de données. Voici la différence clé entre les deux :

• x:Bind est fortement typé et génère du code au moment de la compilation pour de meilleures performances. x :Bind est défini par défaut sur une liaison à usage unique, qui optimise l’affichage rapide des données en lecture seule qui ne changent pas.
• liaison est faiblement typée et assemblée au moment de l’exécution. Cela entraîne des performances inférieures à celles de x :Bind. Dans presque tous les cas, vous devez utiliser x :Bind au lieu de Binding. Toutefois, vous êtes susceptible de le rencontrer dans du code plus ancien. Par défaut, la liaison utilise un transfert de données unidirectionnel, ce qui est optimisé pour les données en lecture seule susceptibles de changer à la source.

Nous vous recommandons d’utiliser x :Bind dans la mesure du possible, et nous allons l’afficher dans les extraits de code de cet article. Pour plus d’informations sur les différences, consultez la comparaison des fonctionnalités {x:Bind} et {Binding}.

Créer une source de données

Tout d’abord, vous aurez besoin d’une classe pour représenter vos données client. Pour vous donner un point de référence, nous allons montrer le processus sur cet exemple nu :

public class Customer
{
    public string Name { get; set; }
}

Créer une liste

Avant de pouvoir afficher un quelconque client, vous devez créer la liste pour les accueillir. L'vue liste est un contrôle XAML de base qui est idéal pour cette tâche. Votre ListView nécessite actuellement une position sur la page et aura bientôt besoin d’une valeur pour sa propriété ItemSource .

<ListView ItemsSource=""
    HorizontalAlignment="Center"
    VerticalAlignment="Center"/>

Une fois que vous avez lié des données à votre ListView, nous vous encourageons à revenir à la documentation et à expérimenter la personnalisation de son apparence et de sa disposition pour répondre le mieux à vos besoins.

Lier des données à votre liste

Maintenant que vous avez créé une interface utilisateur de base pour gérer vos liaisons, vous devez configurer votre source pour les prendre en charge. Voici un exemple de la façon dont cela peut être effectué :

public sealed partial class MainPage : Page
{
    public ObservableCollection<Customer> Customers { get; }
        = new ObservableCollection<Customer>();

    public MainPage()
    {
        this.InitializeComponent();
          // Add some customers
        this.Customers.Add(new Customer() { Name = "NAME1"});
        this.Customers.Add(new Customer() { Name = "NAME2"});
        this.Customers.Add(new Customer() { Name = "NAME3"});
    }
}

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

La vue d’ensemble de la liaison de données vous guide tout au long d’un problème similaire, dans sa section sur la liaison à une collection d’éléments. Notre exemple montre les étapes cruciales suivantes :

• Dans le code-behind de votre interface utilisateur, créez une propriété de type ObservableCollection<T> pour contenir vos objets Client.
• Liez le ItemSource de votre ListView à cette propriété.
• Fournissez un De base itemTemplate pour listView, qui configure la façon dont chaque élément de la liste s’affiche.

N’hésitez pas à consulter la documentation Affichage Liste si vous souhaitez personnaliser la mise en page, ajouter une sélection d'éléments ou modifier le DataTemplate que vous venez de créer. Mais que se passe-t-il si vous souhaitez modifier vos clients ?

Modifier vos clients via l’interface utilisateur

Vous avez affiché les clients dans une liste, mais la liaison de données vous permet de faire plus. Que se passe-t-il si vous pouvez modifier vos données directement à partir de l’interface utilisateur ? Pour ce faire, parlons d’abord des trois modes de liaison de données :

• Une seule fois : cette liaison de données n’est activée qu’une seule fois et ne réagit pas aux modifications.
• Liaison de données unidirectionnelle: Cette liaison de données met à jour l’interface utilisateur avec les modifications apportées à la source de données.
• Bidirectionnelle : cette liaison de données met à jour l’interface utilisateur avec toutes les modifications apportées à la source de données et met également à jour les données avec les modifications apportées dans l’interface utilisateur.

Si vous avez suivi les extraits de code précédents, la liaison que vous avez effectuée utilise x :Bind et ne spécifie pas de mode, ce qui en fait une liaison One-Time. Si vous souhaitez modifier vos clients directement à partir de l’interface utilisateur, vous devez le remplacer par une liaison de Two-Way, afin que les modifications des données soient renvoyées aux objets Customer. liaison de données en profondeur contient plus d’informations.

La liaison bidirectionnelle met également à jour l’interface utilisateur si la source de données est modifiée. Pour que cela fonctionne, vous devez implémenter INotifyPropertyChanged sur la source et vérifier que ses setters de propriétés déclenchent l’événement PropertyChanged . La pratique courante consiste à appeler une méthode d’assistance comme la méthode OnPropertyChanged , comme indiqué ci-dessous :

public class Customer : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
                {
                    _name = value;
                    this.OnPropertyChanged();
                }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

Ensuite, rendez le texte de votre ListView éditable en utilisant un TextBox au lieu d’un TextBlock, et assurez-vous que vous définissez le mode dans vos liaisons de données sur TwoWay.

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBox Text="{x:Bind Name, Mode=TwoWay}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Un moyen rapide de s’assurer que cela fonctionne consiste à ajouter un deuxième ListView avec des contrôles TextBox et des liaisons OneWay. Les valeurs de la deuxième liste changent automatiquement à mesure que vous modifiez la première.

Aller plus loin

Maintenant que vous avez créé une liste de clients avec une liaison bidirectionnelle, n’hésitez pas à consulter à nouveau la documentation que nous vous avions fournie et à expérimenter. Vous pouvez également consulter notre didacticiel de liaison de données si vous souhaitez une procédure pas à pas des liaisons de base et avancées, ou examiner des contrôles comme le modèle liste/détails pour rendre une interface utilisateur plus robuste.

API et documents utiles

Voici un résumé rapide des API et d’autres documentations utiles pour vous aider à commencer à utiliser la liaison de données.

API utiles

Documents utiles

Exemples de code utiles