Asynchronous Data Binding Using IsAsync and Delay in WPF

Introduction

Normally data flows between a source and target will be fast enough when done in a synchronous manner on a UI thread by default, but in some cases you might have some resources, like fetching a large amount of data from a database or binding a large image and so on, that will be slow. Here is the purpose of asynchronous binding. In WPF, the source object can raise a PropertyChanged event on a separate thread. The binding can call a get/set block on a background thread by making IsAsync = true on binding.

Demo

Let me demonstrate synchronous binding first.

Here is the cs file.

public partial class AsyncBinding : UserControl, INotifyPropertyChanged
{
public AsyncBinding()
{
InitializeComponent();
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string txt)
{
PropertyChangedEventHandler handle = PropertyChanged;
if (handle != null)
{
handle(this, new PropertyChangedEventArgs(txt));
}
}
#endregion
private string firstname;
public string FirstName
{
get { return firstname; }
set
{
firstname = value;
OnPropertyChanged("FirstName");
}
}
private string address;
public string Address
{
get
{
Thread.Sleep(5000);
return address;
}
set
{
Thread.Sleep(5000);
address = value;
OnPropertyChanged("Address");
}
}
private string phone;
public string Phone
{
get { return phone; }
set
{
phone = value;
OnPropertyChanged("Phone");
}
}
private void ThisWindow_Loaded(object sender, RoutedEventArgs e)
{
FirstName = "Ryan";
Address = "USA";
Phone = "4563525234523";
}
}

Inside the address's set/get block there is a Thread.Sleep(). When running the application, we can see a delay for loading the elements in the UI. Let me change the synchronous binding to asynchronous binding.

Demo:IsAsync

I have added IsAsync= true inside the address property binding. See the result.

initialstate

Intial state

Initially we got data in all fields except address without any delay. After a few seconds the address field has been populated in the different thread.

After 5000 milliseconds.

Delay

It is used to avoid calling downstream logic too soon for rapidly changing values. In some cases you might have several logic inside a set block of a property that is bound to a TextBox.Text property . That logic will be called when the user enters each character if UpdateSourceTrigger=PropertyChanged.

For a delay demonstration, I have commented the Thread.Sleep() in the get/set block of the address property and in the XAML we can see our address property bound with two Text Boxes. I have added one delay inside the address property that is highlighted in the image below.

private string address;
public string Address
{
get
{
// Thread.Sleep(5000);
return address;
}
set
{
// Thread.Sleep(5000);
address = value;
OnPropertyChanged("Address");
}
}

Once we type into the address1 text box, it will wait for 500 milliseconds to reflect the changes. Then the time address2 will be populated.

Initial state

After 500 milliseconds.

7 Comments

Join the conversation! Your thoughts help the community grow.

Bharath Yadav11y ago
Thanks for the article :) Nicely explained.
Akhil Garg11y ago
nice article
- Tom Mohan11y ago
  Thanks Akhil Garg
Tom Mohan11y ago
Thanks Rahul Saxena
Rahul Kumar Saxena11y ago
Good Show Tom Mohan
Tom Mohan11y ago
Thanks Vikram Chaudhary
Vikram Chaudhary11y ago
good one