Cara membuat pengikatan data

Artikel ini menjelaskan cara membuat XAML pengikatan. Contohnya menggunakan objek data yang mewakili karyawan di perusahaan. Objek data ini terikat ke jendela XAML yang menggunakan TextBlock kontrol untuk mencantumkan detail karyawan. Anda akan membuat UI yang terlihat seperti gambar berikut:

Untuk mempelajari selengkapnya tentang pengikatan data, lihat Gambaran umum pengikatan data di WPF.

Buat aset data

Dalam contoh ini, karyawan digunakan sebagai objek data tempat UI terikat.

1. Tambahkan kelas baru ke proyek Anda dan beri nama Employee.

2. Ganti kode dengan cuplikan berikut:

   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
   

Objek data karyawan adalah kelas sederhana yang menjelaskan karyawan:

• Nama depan dan belakang karyawan.
• Tanggal karyawan dipekerjakan.
• Judul perusahaan karyawan.
• Berapa banyak penghasilan yang diperoleh karyawan.

Mengikat ke objek data

XAML berikut menunjukkan penggunaan Employee kelas sebagai objek data. Properti elemen DataContext akar terikat ke sumber daya statis yang dideklarasikan dalam XAML. Kontrol individu terikat pada properti Employee.

1. Tambahkan Jendela baru ke proyek dan beri namaEmployeeView

2. Ganti XAML dengan cuplikan berikut:

   Penting

   Cuplikan berikut diambil dari proyek C#. Jika Anda menggunakan Visual Basic, x:Class harus dideklarasikan tanpa ArticleSample namespace. Anda dapat melihat seperti apa versi Visual Basic di 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>
   

Namespace kode tidak akan cocok dengan namespace proyek Anda, kecuali Anda membuat proyek bernama ArticleSample. Anda dapat menyalin dan menempelkan Window.Resources elemen akar dan (StackPanel) ke dalam Anda MainWindow jika Anda membuat proyek baru.

Untuk lebih memahami bagaimana XAML sebelumnya menggunakan pengikatan data, pertimbangkan poin-poin berikut:

• Sumber daya XAML digunakan untuk membuat instans Employee kelas.

  Biasanya objek data diteruskan ke atau terkait dengan Jendela. Contoh ini mengodekan hardcode karyawan untuk tujuan demonstrasi.

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

• Elemen root (StackPanel) memiliki konteks datanya yang diatur ke instans hardcoded Employee .

  Elemen turunan mewarisinya DataContext dari induk, kecuali ditetapkan secara eksplisit.

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

• Properti Employee instans terikat ke TextBlock kontrol.

  Binding tidak menentukan BindingSource, sehingga DataContext digunakan sebagai sumber.

  <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 Kontrol terikat dengan TwoWay mode, memungkinkan TextBox untuk mengubah Employee.Salary properti.

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

Konten terkait

• Gambaran Umum Pengikatan Data