Data Binding in Silverlight

Binding is the way UI element and corresponding property coupled each other. A connection, or binding, between the UI and a data object allows data to flow between the two. When a binding is established and the data changes, the UI elements that are bound to the data can reflect changes automatically. Similarly, changes made by the user in a UI element can be reflected in the data object. For example, if the user edits the value in a TextBox, the underlying data value is automatically updated to reflect that change. I will explain with example,

Create a new Silverlight application.

File->Open new Project-> Silverlight Application. Please click the image below,

Now you will get a window like this,

Click ok.

Now the MainPage.XAML will open. Drag a TextBox to MainPage as below,

Click image to expand

Add new Silverlight class library as below, click image to expand.

Add a class to the Library and name it as BindingProperty. Here I named it as Employee and add the code as below,

namespace BindingProperties

{

public class Employee

{

private string _employeeName;

public string EmployeeName

{

get

{

return _employeeName;

}

set

{

_employeeName = value;

}

}

}

}

Or click image below to see Employee entity. Click image to expand

Add BindingProperty reference to Main project.

Now we need to set data context in MainPage.xaml as below.

Click image to expand,

Now you can see the value of Property EmployeeName, "Hello World!!" binded to TextBox.

Types of Binding

Before explaining different types of binding i will say what is target property and source property.

When i bind a CLR property to a UI element sat TextBox then TextBox is the target property and CLR property is source property.

There are three different types of binding

OneWay:- The target property is updated when the source property changes.

TwoWay:- The target property is updated when the source property changes, and the source property is updated when target property changes.

One Time:- The target property is set initially based on the source property value. However changes are ignored from that point onward.

INotifyPropertyChanged

When ever we change the binded property value Silverlight will not notify the value change if we will not do it explicitly. For that there is a event delegate "PropertyChangedEventHandler" in the interface "INotifyPropertyChanged" of System.ComponentModel dll.

So we can modify the Employee entity we created before as,

using System.ComponentModel;

namespace BindingProperties

{

public class Employee : INotifyPropertyChanged

{

private string _employeeName = "Hello World!!";

public string EmployeeName

{

get

{

return _employeeName;

}

set

{

_employeeName = value;

NotifyPropertyChanged("EmployeeName");

}

}

#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;

public void NotifyPropertyChanged(string propertyName)

{

if (PropertyChanged != null)

{

PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

}

}

#endregion

}

}

or clik image below,

Now i added a button to XAML and change the mode of binding to TextBox to twoway.

Please click the image ,

and on the click event of button i just write ,

private void btnChangePropertyValueClick(object sender, RoutedEventArgs e)
{

textBox1.Text = "Changed Value!!";
}

here i am changing the value of Target property and our binding mode is TwoWay so it will affect source property value too. So the value of TextBox now is "Changed Value!!"