Veri bağlama oluşturma

Bu makalede bağlama XAML'sini oluşturma işlemi açıklanmaktadır. Örnekte, bir şirket çalışanını temsil eden bir veri nesnesi kullanılır. Bu veri nesnesi, çalışanın ayrıntılarını listelemek için denetimleri kullanan TextBlock bir XAML penceresine bağlıdır. Aşağıdaki görüntüye benzer bir kullanıcı arabirimi oluşturacaksınız:

Veri bağlama hakkında daha fazla bilgi edinmek için bkz . WPF'de veri bağlamaya genel bakış.

Veri nesnesi oluşturma

Bu örnekte, kullanıcı arabiriminin bağlı olduğu veri nesnesi olarak bir çalışan kullanılır.

1. Projenize yeni bir sınıf ekleyin ve adını verin Employee.

2. Kodu aşağıdaki kod parçacığıyla değiştirin:

   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
   

Çalışan veri nesnesi, bir çalışanı tanımlayan basit bir sınıftır:

• Çalışanın adı ve soyadı.
• Çalışanın işe alındığı tarih.
• Çalışanın şirket unvanı.
• Çalışanın ne kadar gelir kazandığı.

Veri nesnesine bağlama

Aşağıdaki XAML, sınıfın Employee veri nesnesi olarak kullanılmasını gösterir. Kök öğenin DataContext özelliği, XAML'de bildirilen statik bir kaynağa bağlıdır. Tek tek denetimler, özelliklerine Employeebağlıdır.

1. Projeye yeni bir Pencere ekleyin ve adlandırın EmployeeView

2. XAML'yi aşağıdaki kod parçacığıyla değiştirin:

   Önemli

   Aşağıdaki kod parçacığı bir C# projesinden alınır. Visual Basic kullanıyorsanız, x:Class ad alanı olmadan ArticleSample bildirilmelidir. Visual Basic sürümünün nasıl göründüğünü EmployeeView.xaml adresinde görebilirsiniz.

   <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 adlı bir proje oluşturmadığınız sürece kodun ad alanı projenizin ad alanıyla eşleşmez. Yeni bir proje oluşturduysanız ve kök öğesini (Window.Resources) StackPanel olarak yapıştırabilirsiniz.

Önceki XAML'nin veri bağlamayı nasıl kullandığını daha iyi anlamak için aşağıdaki noktaları göz önünde bulundurun:

• Sınıfın bir örneğini Employee oluşturmak için bir XAML kaynağı kullanılır.

  Genellikle veri nesnesi Window'a geçirilir veya pencereyle ilişkilendirilir. Bu örnek, tanıtım amacıyla çalışanı sabit kodlar.

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

• Kök öğenin (StackPanel) veri bağlamı sabit kodlanmış Employee örneğe ayarlanmıştır.

  Alt öğeler açıkça ayarlanmadığı sürece üst öğeden devralır DataContext .

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

• Örneğin özellikleri Employee denetimlere TextBlock bağlıdır.

  Binding değeri belirtmiyorBindingSource, bu nedenle DataContext kaynak olarak kullanılır.

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

• Denetim TextBox moduyla TwoWay ilişkilidir ve özelliğini değiştirmesine TextBox izin verirEmployee.Salary.

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

İlgili içerik

• Veri Bağlamaya Genel Bakış