Jak utworzyć powiązanie danych (WPF .NET)

W tym artykule opisano sposób tworzenia powiązania XAML. W przykładzie użyto obiektu danych reprezentującego pracownika w firmie. Ten obiekt danych jest powiązany z oknem XAML, które używa TextBlock kontrolek do wyświetlania listy szczegółów pracownika. Utworzysz interfejs użytkownika, który wygląda jak na poniższej ilustracji:

Aby dowiedzieć się więcej na temat powiązania danych, zobacz Omówienie powiązania danych w WPF.

Tworzenie obiektu danych

W tym przykładzie pracownik jest używany jako obiekt danych, z którego jest powiązany interfejs użytkownika.

1. Dodaj nową klasę do projektu i nadaj jej Employeenazwę .

2. Zastąp kod następującym fragmentem kodu:

   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
   

Obiekt danych pracownika to prosta klasa, która opisuje pracownika:

• Imię i nazwisko pracownika.
• Data zatrudnienia pracownika.
• Tytuł firmy pracownika.
• Ile dochodów zarabia pracownik.

Wiązanie z obiektem danych

Poniższy kod XAML demonstruje użycie Employee klasy jako obiektu danych. Właściwość elementu DataContext głównego jest powiązana z zasobem statycznym zadeklarowanym w języku XAML. Poszczególne kontrolki są powiązane z właściwościami elementu Employee.

1. Dodaj nowe okno do projektu i nadaj mu nazwę EmployeeView

2. Zastąp kod XAML następującym fragmentem kodu:

   Ważne

   Poniższy fragment kodu jest pobierany z projektu języka C#. Jeśli używasz języka Visual Basic, x:Class element powinien zostać zadeklarowany bez ArticleSample przestrzeni nazw. Możesz zobaczyć, jak wygląda wersja języka Visual Basic w tym miejscu.

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

Przestrzeń nazw kodu nie będzie zgodna z przestrzenią nazw projektu, chyba że utworzono projekt o nazwie ArticleSample. Możesz skopiować i wkleić element Window.Resources główny (StackPanel) do elementu MainWindow , jeśli został utworzony nowy projekt.

Aby lepiej zrozumieć, jak poprzedni kod XAML korzysta z powiązania danych, należy wziąć pod uwagę następujące kwestie:

• Zasób XAML służy do tworzenia wystąpienia Employee klasy.

  Zazwyczaj obiekt danych jest przekazywany do okna lub skojarzony z nim. W tym przykładzie na stałe koduje pracownika w celach demonstracyjnych.

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

• Element główny (StackPanel) ma swój kontekst danych ustawiony na wystąpienie zakodowane Employee na stałe.

  Elementy podrzędne dziedziczą ich DataContext z elementu nadrzędnego, chyba że jawnie ustawiono.

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

• Właściwości Employee wystąpienia są powiązane z kontrolkami TextBlock .

  Parametr Binding nie określa elementu BindingSource, więc DataContext parametr jest używany jako źródło.

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

• Kontrolka TextBox jest powiązana z trybem TwoWay , co umożliwia TextBox zmianę Employee.Salary właściwości.

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

Powiązana zawartość

• Powiązanie danych — omówienie