Erstellen einer Datenbindung

In diesem Artikel wird beschrieben, wie Sie eine Bindungs-XAML erstellen. Im Beispiel wird ein Datenobjekt verwendet, das einen Mitarbeiter in einem Unternehmen darstellt. Dieses Datenobjekt ist an ein XAML-Fenster gebunden, in dem TextBlock Steuerelemente zum Auflisten der Mitarbeiterdetails verwendet werden. Sie erstellen eine Benutzeroberfläche, die wie die folgende Abbildung aussieht:

Weitere Informationen zur Datenbindung finden Sie in der Übersicht über die Datenbindung in WPF.

Erstellen eines Datenobjekts

In diesem Beispiel wird ein Mitarbeiter als Datenobjekt verwendet, an das die Benutzeroberfläche gebunden ist.

1. Fügen Sie ihrem Projekt eine neue Klasse hinzu, und nennen Sie sie Employee.

2. Ersetzen Sie den Code durch den folgenden Ausschnitt:

   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
   

Das Mitarbeiterdatenobjekt ist eine einfache Klasse, die einen Mitarbeiter beschreibt:

• Der Vor- und Nachname des Mitarbeiters.
• Das Datum, an dem der Mitarbeiter eingestellt wurde.
• Der Firmentitel des Mitarbeiters.
• Wie viel Einkommen der Mitarbeiter verdient.

Binden an ein Datenobjekt

Der folgende XAML-Code veranschaulicht die Verwendung der Employee Klasse als Datenobjekt. Die Eigenschaft des Stammelements DataContext ist an eine statische Ressource gebunden, die im XAML-Code deklariert ist. Die Bedienelemente sind den Eigenschaften der Employee zugeordnet.

1. Hinzufügen eines neuen Fensters zum Projekt und Benennen des Fensters EmployeeView

2. Ersetzen Sie den XAML-Code durch den folgenden Codeausschnitt:

   Von Bedeutung

   Der folgende Codeausschnitt stammt aus einem C#-Projekt. Wenn Sie Visual Basic verwenden, sollte x:Class ohne den ArticleSample-Namespace deklariert werden. Sie können sehen, wie die Visual Basic-Version bei EmployeeView.xaml aussieht.

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

Der Namespace des Codes stimmt nicht mit dem Namespace Ihres Projekts überein, es sei denn, Sie haben ein Projekt mit dem Namen "ArticleSample" erstellt. Sie können Window.Resources das Element und das Stammelement (StackPanel) in Ihre MainWindow kopieren und einfügen, wenn Sie ein neues Projekt erstellt haben.

Um besser zu verstehen, wie der vorherige XAML-Code Datenbindung verwendet, sollten Sie die folgenden Punkte berücksichtigen:

• Eine XAML-Ressource wird verwendet, um eine Instanz der Employee Klasse zu erstellen.

  In der Regel wird das Datenobjekt an das Window übergeben oder dem Fenster zugeordnet. In diesem Beispiel wird der Mitarbeiter zu Demonstrationszwecken hartcodiert.

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

• Das Stammelement (StackPanel) hat seinen Datenkontext auf die hartcodierte Employee Instanz festgelegt.

  Die untergeordneten Elemente erben ihre DataContext von dem übergeordneten Element, es sei denn, es wird explizit festgelegt.

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

• Die Eigenschaften der Employee Instanz sind an die TextBlock Steuerelemente gebunden.

  Das Binding gibt keinen BindingSource an, sodass der DataContext als Quelle verwendet wird.

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

• Ein TextBox Steuerelement ist im TwoWay Modus gebunden, wodurch die TextBox Eigenschaft Employee.Salary geändert werden kann.

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

Verwandte Inhalte

• Übersicht zur Datenbindung