Come creare un data binding (WPF .NET)

Questo articolo descrive come creare un codice XAML di associazione. Nell'esempio viene utilizzato un oggetto dati che rappresenta un dipendente di una società. Questo oggetto dati è associato a una finestra XAML che usa i TextBlock controlli per elencare i dettagli del dipendente. Si creerà un'interfaccia utente simile all'immagine seguente:

Per altre informazioni sul data binding, vedere Panoramica del data binding in WPF.

Creare un oggetto dati

In questo esempio, un dipendente viene usato come oggetto dati a cui è associata l'interfaccia utente.

1. Aggiungere una nuova classe al progetto e denominarla Employee.

2. Sostituire il codice con il frammento di codice seguente:

   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'oggetto dati dipendente è una classe semplice che descrive un dipendente:

• Nome e cognome del dipendente.
• Data di assunzione del dipendente.
• Titolo della società del dipendente.
• Quanto reddito guadagna il dipendente.

Eseguire l'associazione a un oggetto dati

Il codice XAML seguente illustra l'uso della Employee classe come oggetto dati. La proprietà dell'elemento DataContext radice è associata a una risorsa statica dichiarata nel codice XAML. I singoli controlli sono associati alle proprietà dell'oggetto Employee.

1. Aggiungere una nuova finestra al progetto e denominarla EmployeeView

2. Sostituire il codice XAML con il frammento di codice seguente:

   Importante

   Il frammento di codice seguente viene tratto da un progetto C#. Se si usa Visual Basic, deve x:Class essere dichiarato senza lo spazio dei ArticleSample nomi . È possibile visualizzare l'aspetto della versione di Visual Basic qui.

   <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>
   

Lo spazio dei nomi del codice non corrisponde allo spazio dei nomi del progetto, a meno che non sia stato creato un progetto denominato ArticleSample. È possibile copiare e incollare l'elemento Window.Resources radice e (StackPanel) in MainWindow se è stato creato un nuovo progetto.

Per comprendere meglio come il codice XAML precedente usa il data binding, considerare i punti seguenti:

• Una risorsa XAML viene usata per creare un'istanza della Employee classe .

  In genere l'oggetto dati viene passato o associato a Window. In questo esempio viene hardcodedato il dipendente a scopo dimostrativo.

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

• L'elemento radice (StackPanel) ha il contesto di dati impostato sull'istanza hardcoded Employee .

  Gli elementi figlio ereditano DataContext dal padre, a meno che non siano impostati in modo esplicito.

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

• Le proprietà dell'istanza Employee sono associate ai TextBlock controlli.

  Binding Non specifica un oggetto BindingSource, quindi DataContext viene usato come origine.

  <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 controllo è associato alla TwoWay modalità, consentendo all'oggetto TextBox di modificare la Employee.Salary proprietà.

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

Contenuto correlato

• Panoramica sul data binding