How to create a data binding

This article describes how to create a binding XAML. The example uses a data object that represents an employee at a company. This data object is bound to a XAML window that uses TextBlock controls to list the employee's details. You'll create a UI that looks like the following image:

To learn more about data binding, see Data binding overview in WPF.

Create a data object

In this example, an employee is used as the data object that the UI is bound to.

1. Add a new class to your project and name it Employee.

2. Replace the code with the following snippet:

   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
   

The employee data object is a simple class that describes an employee:

• The first and last name of the employee.
• The date the employee was hired.
• The employee's company title.
• How much income the employee earns.

Bind to a data object

The following XAML demonstrates using the Employee class as a data object. The root element's DataContext property is bound to a static resource declared in the XAML. The individual controls are bound to the properties of the Employee.

1. Add a new Window to the project and name it EmployeeView

2. Replace the XAML with the following snippet:

   Important

   The following snippet is taken from a C# project. If you're using Visual Basic, the x:Class should be declared without the ArticleSample namespace. You can see what the Visual Basic version looks like at EmployeeView.xaml.

   
       
           
       
       
           Employee
           
           
               
                   
                   
                   
                   
                   
               
               
                   
                   
               
   
               
               
               
               
               
   
               
               
               
               
               
           
           
           
           
               
               
           
       
   
   

The namespace of the code won't match your project's namespace, unless you created a project named ArticleSample. You can copy and paste the Window.Resources and root element (StackPanel) into your MainWindow if you created a new project.

To better understand how the previous XAML is using data binding, consider the following points:

• A XAML resource is used to create an instance of the Employee class.

  Typically the data object is passed to or associated with the Window. This example hardcodes the employee for demonstration purposes.

• The root element (StackPanel) has its data context set to the hardcoded Employee instance.

  The child elements inherit their DataContext from the parent, unless explicitly set.

• The properties of the Employee instance are bound to the TextBlock controls.

  The Binding doesn't specify a BindingSource, so the DataContext is used as the source.

• A TextBox control is bound with TwoWay mode, allowing the TextBox to change the Employee.Salary property.

Related content

• Data Binding Overview