Een gegevensbinding maken

In dit artikel wordt beschreven hoe u een bindings-XAML maakt. In het voorbeeld wordt een gegevensobject gebruikt dat een werknemer in een bedrijf vertegenwoordigt. Dit gegevensobject is gebonden aan een XAML-venster dat gebruikmaakt van TextBlock besturingselementen om de details van de werknemer weer te geven. U maakt een gebruikersinterface die eruitziet als de volgende afbeelding:

Zie Overzicht van gegevensbinding in WPFvoor meer informatie over gegevensbinding.

Een gegevensobject maken

In dit voorbeeld wordt een werknemer gebruikt als het gegevensobject waaraan de gebruikersinterface is gebonden.

1. Voeg een nieuwe klasse toe aan uw project en noem deze Employee.

2. Vervang de code door het volgende codefragment:

   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
   

Het gegevensobject van de werknemer is een eenvoudige klasse die een werknemer beschrijft:

• De voor- en achternaam van de werknemer.
• De datum waarop de werknemer is ingehuurd.
• De bedrijfstitel van de werknemer.
• Hoeveel inkomsten de werknemer verdient.

Binden aan een gegevensobject

In de volgende XAML ziet u hoe u de klasse Employee als gegevensobject gebruikt. De DataContext eigenschap van het hoofdelement is gebonden aan een statische resource die is gedeclareerd in de XAML. De afzonderlijke besturingselementen zijn gebonden aan de eigenschappen van de Employee.

1. Voeg een nieuw venster toe aan het project en noem het EmployeeView

2. Vervang de XAML door het volgende codefragment:

   Belangrijk

   Het volgende codefragment is afkomstig uit een C#-project. Als u Visual Basic gebruikt, moet de x:Class worden gedeclareerd zonder de ArticleSample naamruimte. U kunt zien hoe de Visual Basic-versie eruitziet op 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>
   

De naamruimte van de code komt niet overeen met de naamruimte van uw project, tenzij u een project met de naam ArticleSample-hebt gemaakt. U kunt Window.Resources en het hoofdelement (StackPanel) kopiëren en plakken in uw MainWindow- wanneer u een nieuw project heeft gemaakt.

Als u beter wilt weten hoe de vorige XAML gegevensbinding gebruikt, moet u rekening houden met de volgende punten:

• Er wordt een XAML-resource gebruikt om een exemplaar van de Employee-klasse te maken.

  Doorgaans wordt het gegevensobject doorgegeven aan of gekoppeld aan het venster. In dit voorbeeld wordt de werknemer hardcoded voor demonstratie.

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

• Het hoofdelement (StackPanel) heeft de gegevenscontext ingesteld op het vastgelegde Employee-exemplaar.

  De kind elementen erven hun DataContext van de ouder, tenzij ze expliciet worden ingesteld.

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

• De eigenschappen van het Employee exemplaar zijn gebonden aan de TextBlock besturingselementen.

  De Binding geeft geen BindingSourceop, dus de DataContext wordt gebruikt als de bron.

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

• Een TextBox besturingselement is gebonden aan TwoWay modus, zodat de TextBox de eigenschap Employee.Salary kan wijzigen.

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

Verwante inhoud

• Overzicht van gegevensbindingen