Создание привязки данных

В этой статье описывается создание привязки XAML. В примере используется объект данных, представляющий сотрудника компании. Этот объект данных привязан к окну XAML, использующего TextBlock элементы управления для перечисления сведений о сотрудниках. Вы создадите пользовательский интерфейс, который выглядит следующим образом:

Дополнительные сведения о привязке данных см. в обзоре привязки данных в WPF.

Создание объекта данных

В этом примере сотрудник используется в качестве объекта данных, к которому привязан пользовательский интерфейс.

1. Добавьте новый класс в проект и назовите его Employee.

2. Замените код следующим фрагментом кода:

   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
   

Объект данных сотрудника — это простой класс, описывающий сотрудника:

• Имя и фамилия сотрудника.
• Дата найма сотрудника.
• Название компании сотрудника.
• Сколько доходов работник зарабатывает.

Привязка к объекту данных

Следующий код XAML демонстрирует использование Employee класса в качестве объекта данных. Свойство корневого элемента DataContext привязано к статическому ресурсу, объявленному в XAML. Отдельные элементы управления привязаны к свойствам Employeeэлемента управления .

1. Добавление нового окна в проект и его имя EmployeeView

2. Замените XAML следующим фрагментом кода:

   Это важно

   Следующий фрагмент кода взят из проекта C#. Если вы используете Visual Basic, x:Class его следует объявить без ArticleSample пространства имен. Вы можете увидеть, как выглядит версия Visual Basic в EmployeeView.xaml.

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

Пространство имен кода не будет соответствовать пространству имен проекта, если только вы не создали проект с именем ArticleSample. Вы можете скопировать и вставить корневой Window.Resources элемент (StackPanel) в файл MainWindow , если вы создали новый проект.

Чтобы лучше понять, как предыдущий XAML использует привязку данных, рассмотрим следующие моменты:

• Ресурс XAML используется для создания экземпляра Employee класса.

  Обычно объект данных передается в окно или связан с ним. Этот пример жестко кодирует сотрудника для демонстрационных целей.

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

• Корневой элемент (StackPanel) имеет контекст данных для жестко закодированного экземпляра Employee .

  Дочерние элементы наследуют их DataContext от родительского элемента, если только явно не задано.

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

• Свойства экземпляра Employee привязаны к TextBlock элементам управления.

  Параметр Binding не указывает BindingSource, поэтому DataContext он используется в качестве источника.

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

• Элемент TextBox управления привязан к TwoWay режиму, что позволяет TextBox изменять Employee.Salary свойство.

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

Связанный контент

• Обзор привязки данных