Vytvoření datové vazby (WPF .NET)

Tento článek popisuje, jak vytvořit vazbu XAML. Příklad používá datový objekt, který představuje zaměstnance ve společnosti. Tento datový objekt je vázán na okno XAML, které používá TextBlock ovládací prvky k výpisu podrobností zaměstnance. Vytvoříte uživatelské rozhraní, které bude vypadat jako na následujícím obrázku:

Další informace o datových vazbách najdete v tématu Přehled datových vazeb ve WPF.

Vytvoření datového objektu

V tomto příkladu se zaměstnanec používá jako datový objekt, ke kterému je uživatelské rozhraní vázáno.

1. Přidejte do projektu novou třídu a pojmenujte ji Employee.

2. Nahraďte kód následujícím fragmentem kódu:

   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
   

Datový objekt zaměstnance je jednoduchá třída, která popisuje zaměstnance:

• Jméno a příjmení zaměstnance.
• Datum, kdy byl zaměstnanec přijat.
• Titul společnosti zaměstnance.
• Kolik příjmů zaměstnanec získá.

Vytvoření vazby k datovému objektu

Následující XAML ukazuje použití Employee třídy jako datového objektu. Vlastnost kořenového elementu DataContext je vázána na statický prostředek deklarovaný v xaml. Jednotlivé ovládací prvky jsou svázány s vlastnostmi objektu Employee.

1. Přidání nového okna do projektu a jeho pojmenování EmployeeView

2. Nahraďte XAML následujícím fragmentem kódu:

   Důležité

   Následující fragment kódu je převzat z projektu jazyka C#. Pokud používáte Jazyk Visual Basic, x:Class měl by být deklarován bez ArticleSample oboru názvů. Tady vidíte, jak vypadá verze jazyka Visual Basic.

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

Obor názvů kódu neodpovídá oboru názvů projektu, pokud jste nevytvořili projekt s názvem ArticleSample. Pokud jste vytvořili nový projekt, můžete ho zkopírovat aStackPanel vložit Window.Resources () do mainWindow.

Pokud chcete lépe pochopit, jak předchozí XAML používá datovou vazbu, zvažte následující body:

• Prostředek XAML slouží k vytvoření instance Employee třídy.

  Datový objekt se obvykle předává nebo přidružuje k okně. Tento příklad pevně zakóduje zaměstnance pro demonstrační účely.

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

• Kořenový element (StackPanel) má svůj kontext dat nastavený na pevně zakódovanou Employee instanci.

  Podřízené elementy dědí z DataContext nadřazeného objektu, pokud nejsou explicitně nastaveny.

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

• Vlastnosti Employee instance jsou vázány TextBlock na ovládací prvky.

  Nezadá Binding BindingSourcehodnotu , takže DataContext se použije jako zdroj.

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

• Ovládací TextBox prvek je vázán s režimem TwoWay , který umožňuje TextBox změnit Employee.Salary vlastnost.

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

Související obsah

• Přehled datových vazeb