Afficher des clients dans une liste

Article
07/13/2023

Il est essentiel de pouvoir afficher et manipuler des données réelles dans l’interface utilisateur pour les fonctionnalités de nombreuses applications. Cet article vous montre ce que vous devez savoir pour afficher une collection d’objets Client dans une liste.

Il ne s’agit pas d’un didacticiel. Si vous en souhaitez un, consultez notre didacticiel de liaison de données qui vous fournira une expérience interactive pas à pas.

Nous allons commencer par une présentation rapide de la liaison de données : en quoi elle consiste et comment elle fonctionne. Puis nous allons ajouter un ListView à l’interface utilisateur, ajouter une liaison de données et la personnaliser avec des fonctionnalités supplémentaires.

Ce que vous devez savoir

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

Chaque liaison de données comporte deux parties :

une source qui fournit les données à lier ;
une 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 à la source qui fournit les 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 source de données. Voici la principale différence entre les deux :

x:Bind est fortement typée et génère du code au moment de la compilation pour de meilleures performances. x:Bind est par défaut une liaison à usage unique optimisée pour l’affichage rapide des données en lecture seule qui ne changent pas.
Binding est faiblement typée et assemblée lors de l’exécution. Elle produit des performances inférieures à celles de x:Bind. Dans la plupart des cas, vous devez utiliser x:Bind au lieu de Binding. Toutefois, vous la trouverez probablement dans des codes anciens. Binding est par défaut un transfert de données à sens unique optimisé pour les données en lecture seule susceptibles d’être modifiées à la source.

Nous vous recommandons d’utiliser x:Bind chaque fois que c’est possible, comme nous allons l’illustrer dans les extraits de code de cet article. Pour plus d’informations sur les différences, consultez Comparaison des fonctionnalités {x:Bind} et {Binding}.

Création d'une source de données

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

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

Créer une liste

Si vous souhaitez afficher les clients, vous devez créer une liste pour les contenir. Le contrôle ListView est un contrôle XAML de base idéal pour cette tâche. Votre contrôle ListView nécessite actuellement une position dans la page et aura rapidement 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 contrôle ListView, nous vous invitons à vous reporter à la documentation et à vous familiariser avec la personnalisation de son apparence et de sa disposition afin de mieux répondre à vos besoins.

Lier des données à votre liste

Maintenant que vous avez créé une interface utilisateur de base pour contenir vos liaisons, vous devez configurer votre source pour les fournir. Voici un exemple de la manière de procéder :

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 explique comment régler un problème similaire dans sa section sur la liaison à une collection d’éléments. Le présent exemple illustre les étapes essentielles suivantes :

Dans le code-behind de votre interface utilisateur, créez une propriété de type ObservableCollection<T> pour contenir les objets client.
Liez l’ItemSource de votre contrôle ListView à cette propriété.
Fournissez un ItemTemplate de base au contrôle ListView, qui configurera l’affichage de chaque élément dans la liste.

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

Modifier vos clients par le biais de l’interface utilisateur

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

À usage unique : cette liaison de données est activée uniquement une fois et ne réagit pas aux modifications apportées.
À sens unique : 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 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 antérieurs, la liaison que vous avez apportée utilise x:Bind et ne spécifie pas de mode, ce qui produit une liaison à usage unique. Si vous souhaitez modifier vos clients directement à partir de l’interface utilisateur, vous devez la remplacer par une liaison bidirectionnelle, afin que les modifications des données soient transférées vers les objets client. Présentation détaillée de la liaison de données contient des informations supplémentaires.

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 vous assurer que ses méthodes setter de propriété déclenchent l’événement PropertyChanged. Une pratique courante consiste à les faire appeler une méthode d’assistance telle que la méthode OnPropertyChanged, comme illustré 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));
}

Rendez ensuite le texte dans votre ListView modifiable à l’aide d’un TextBox au lieu d’un TextBlock et assurez-vous de définir le Mode sur vos liaisons de données sur TwoWay (bidirectionnel).

<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 vous assurer que cela fonctionne consiste à ajouter un deuxième ListView avec des contrôles TextBox et des liaisons OneWay. Les valeurs de la seconde liste changent automatiquement lorsque vous modifiez la première.

Notes

Modifier directement à l’intérieur d’un contrôle ListView est un moyen simple de montrer une liaison bidirectionnelle en action, mais cela peut poser des problèmes de facilité d’utilisation. Si vous cherchez à améliorer votre application, envisagez d’utiliser d’autres contrôles XAML pour modifier vos données et de garder votre ListView en affichage seul.

Aller plus loin

Maintenant que vous avez créé une liste de clients avec une liaison bidirectionnelle, n’hésitez pas à vous reporter à la documentation dont nous avons fourni les liens et à faire vos propres tests. Vous pouvez également consulter notre tutoriel de liaison de données si vous souhaitez une procédure pas à pas sur les liaisons de base et avancées, ou examiner des contrôles tels que le modèle Liste/Détails pour créer une interface utilisateur plus solide.

API et documents utiles

Voici un résumé rapide des API et des autres documents utiles pour vous aider à commencer à utiliser la Liaison de données.

API utiles

API	Description
Modèle de données	Décrit la structure visuelle d’un objet de données pour permettre l’affichage d’éléments spécifiques dans l’interface utilisateur.
x:Bind	Documentation sur l’extension de balisage x:Bind recommandée.
Binding	Documentation sur l’ancienne extension de balisage Binding.
ListView	Contrôle d’interface utilisateur qui affiche des éléments de données dans une pile verticale.
TextBox	Contrôle de texte de base pour l’affichage de données de texte modifiables dans l’interface utilisateur.
INotifyPropertyChanged	Interface pour rendre les données observables, en fournissant une liaison de données.
ItemsControl	La propriété ItemsSource de cette classe permet à un contrôle ListView d’établir une liaison avec une source de données.

Documents utiles

Rubrique	Description
Présentation détaillée de la liaison de données	Vue d’ensemble des principes de liaison de données
Vue d’ensemble de la liaison de données	Informations conceptuelles détaillées sur la liaison de données.
ListView	Informations sur la création et la configuration d’un contrôle ListView, y compris l’implémentation d’un DataTemplate

Exemples de code utiles

Exemple de code	Description
Didacticiel de liaison de données	Expérience interactive pas à pas sur les principes fondamentaux de la liaison de données.
ListView et GridView	Découvrez des contrôles ListView plus complexes avec liaison de données.
QuizGame	Regardez la liaison de données en action, notamment la classe BindableBase (dans le dossier « Common ») pour une implémentation standard de INotifyPropertyChanged.