Partager via

Comment créer une liaison de données (WPF .NET)

  • Article

Cet article explique comment créer un xaml de liaison. L’exemple utilise un objet de données qui représente un employé d’une entreprise. Cet objet de données est lié à une fenêtre XAML qui utilise TextBlock des contrôles pour répertorier les détails de l’employé. Vous allez créer une interface utilisateur qui ressemble à l’image suivante :

Fenêtre WPF qui affiche des détails sur un employé, comme son prénom, son nom, son titre, sa date d’embauche et son salaire.

Pour en savoir plus sur la liaison de données, consultez vue d’ensemble de la liaison de données dans WPF.

Créer un objet de données

Dans cet exemple, un employé est utilisé comme objet de données auquel l’interface utilisateur est liée.

  1. Ajoutez une nouvelle classe à votre projet et nommez-la Employee.

  2. Remplacez le code par l’extrait de code suivant :

    using System;
using System.ComponentModel;

namespace ArticleSample
{
    public class Employee : INotifyPropertyChanged
    {
        private decimal _salary;
        public event PropertyChangedEventHandler? PropertyChanged;

        public required string FirstName { get; set; }
        public required string LastName { get; set; }
        public required string Title { get; set; }
        public required DateTime HireDate { get; set; }

        public required decimal Salary
        {
            get => _salary;
            set
            {
                _salary = value;

                // Support TwoWay binding
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Salary)));
            }
        }
    }
}

    Imports System.ComponentModel

Public Class Employee
    Implements INotifyPropertyChanged

    Private _salary As Decimal
    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    Public Property FirstName As String
    Public Property LastName As String
    Public Property Title As String
    Public Property HireDate As DateTime

    Public Property Salary As Decimal
        Get
            Return _salary
        End Get
        Set(value As Decimal)
            _salary = value
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(NameOf(Salary)))
        End Set
    End Property

End Class

L’objet de données de l’employé est une classe simple qui décrit un employé :

  • Prénom et nom de l’employé.
  • Date à laquelle l’employé a été embauché.
  • Titre de la société de l’employé.
  • Combien gagne l’employé.

Lier à un objet de données

Le code XAML suivant illustre l’utilisation de la Employee classe en tant qu’objet de données. La propriété de l’élément DataContext racine est liée à une ressource statique déclarée dans le code XAML. Les contrôles individuels sont liés aux propriétés du Employee.

  1. Ajouter une nouvelle fenêtre au projet et le nommer EmployeeView

  2. Remplacez le code XAML par l’extrait de code suivant :

    Important

    L’extrait de code suivant est extrait d’un projet C#. Si vous utilisez Visual Basic, vous x:Class devez le déclarer sans l’espace ArticleSample de noms. Vous pouvez voir à quoi ressemble la version de Visual Basic ici.

    <Window x:Class="ArticleSample.EmployeeView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ArticleSample"
        Title="" Height="250" Width="300">
    <Window.Resources>
        <local:Employee x:Key="EmployeeExample" FirstName="Niki" LastName="Demetriou"
                                                HireDate="2022-02-16" Salary="5012.00"
                                                Title="Content Artist" />
    </Window.Resources>
    <StackPanel DataContext="{StaticResource EmployeeExample}">
        <Label FontSize="32">Employee</Label>
        <Border BorderBrush="Gray" BorderThickness="2" />
        <Grid Grid.Row="1" Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Text="First Name:" Grid.Row="0" Margin="0,0,10,0" />
            <TextBlock Text="Last Name:" Grid.Row="1" />
            <TextBlock Text="Title:" Grid.Row="2" />
            <TextBlock Text="Hire Date:" Grid.Row="3" />
            <TextBlock Text="Salary" Grid.Row="4" />

            <TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
            <TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
            <TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1" />
            <TextBlock Text="{Binding HireDate, StringFormat=d}" Grid.Row="3" Grid.Column="1" />
            <TextBlock Text="{Binding Salary, StringFormat=C0}" Grid.Row="4" Grid.Column="1" />
        </Grid>
        <Border BorderBrush="Gray" BorderThickness="2" />
        
        <StackPanel Margin="5,10" Orientation="Horizontal">
            <TextBlock Text="Change Salary:" Margin="0,0,10,0" />
            <TextBox Text="{Binding Salary, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C0}" Width="100" />
        </StackPanel>
    </StackPanel>
</Window>

L’espace de noms du code ne correspond pas à l’espace de noms de votre projet, sauf si vous avez créé un projet nommé ArticleSample. Vous pouvez copier et coller l’élément Window.Resources racine (StackPanel) dans mainWindow si vous avez créé un projet.

Pour mieux comprendre comment le code XAML précédent utilise la liaison de données, tenez compte des points suivants :

  • Une ressource XAML est utilisée pour créer une instance de la Employee classe.

    En règle générale, l’objet de données est transmis ou associé à la fenêtre. Cet exemple code en dur l’employé à des fins de démonstration.

    <Window.Resources>
    <local:Employee x:Key="EmployeeExample" FirstName="Niki" LastName="Demetriou"
                                            HireDate="2022-02-16" Salary="5012.00"
                                            Title="Content Artist" />
</Window.Resources>

  • L’élément racine (StackPanel) a son contexte de données défini sur l’instance codée en Employee dur.

    Les éléments enfants héritent de leur DataContext parent, sauf si explicitement définis.

    <StackPanel DataContext="{StaticResource EmployeeExample}">

  • Les propriétés de l’instance Employee sont liées aux TextBlock contrôles.

    Le Binding n’spécifie pas , BindingSourcedonc il DataContext est utilisé comme source.

    <TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
<TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1" />
<TextBlock Text="{Binding HireDate, StringFormat=d}" Grid.Row="3" Grid.Column="1" />
<TextBlock Text="{Binding Salary, StringFormat=C0}" Grid.Row="4" Grid.Column="1" />

  • Un TextBox contrôle est lié avec TwoWay le mode, ce qui permet de TextBox modifier la Employee.Salary propriété.

    <TextBox Text="{Binding Salary, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C0}" Width="100" />

Contenu connexe