Click here to Skip to main content
Click here to Skip to main content

One Way, Two Way and One Time Bindings using Silverlight

, 8 Aug 2010
Rate this:
Please Sign up or sign in to vote.
This article will talk about three ways of binding object properties with Silverlight user interfaces.

Update: Silverlight FAQs - Part 3 link & Video added to this article

One Way, Two Way and One Time Bindings using Silverlight

Video demonstration One Way, Two Way and One Time Bindings using Silver light

Introduction

This article will talk about three ways of binding object properties with Silverlight user interfaces. We will first go through the fundamentals of the 3 bindings and then take up a small sample which will demonstrate how the binding works. We have also attached the source for the same.

I have collected around 400 FAQ questions and answers in WCF, WPF, WWF, SharePoint, design patterns, UML, etc. Feel free to download these FAQ PDFs from my site.

One Way Binding

As the name, so the behavior. In one way bindings, data flows only from object to UI and not vice-versa. For instance, you can have a textbox called as TxtYear which is binded with an object having property Year. So when the object value changes, it will be reflected on the Silverlight UI, but the UI cannot update the year property in the object.

It is a three step procedure to implement one way binding. First, create your class which you want to bind with the Silverlight UI.  For instance, below is a simple class called ClsDate with a Year property.

public class clsDate
{
private int _intYear;
public int Year
{
set
{
_intYear = value;
}
get
{
return _intYear;
}
}
}

In the second step, you need to tie up the Year property with a Silverlight UI textbox. To bind the property, you need to specify ‘Binding Path=Year’ in the text property of the textbox UI object. Year is the property which we are binding with the textbox UI object.

<TextBox x:Name="txtCurrentYear" Text="{Binding Path=Year}" 
	Height="30" Width="150" VerticalAlignment="Center" 
	HorizontalAlignment="Center"></TextBox>

The final step is to bind the textbox data context with the date object just created.

public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
clsDate objDate = new clsDate();
objDate.Year = DateTime.Now.Year;
txtCurrentYear.DataContext = objDate;
}
}

Two Way Binding

Two way binding ensures data synchronization of data between UI and objects. So any change in object is reflected to the UI and any change in UI is reflected in the object.

To implement two way binding, there are two extra steps in addition to the steps provided for OneWay. The first change is that we need to specify the mode as TwoWay as shown in the below XAML code snippet.

<TextBox x:Name="txtEnterAge" Text="{Binding Path=Age, Mode=TwoWay}" 
	Height="30" Width="150" VerticalAlignment="Center" 
	HorizontalAlignment="Center"></TextBox>

The second change is that we need to implement INotifyPropertyChanged interface. Below is the class which shows how to implement the INotifyPropertyChanged interface. Please note that you need to import System.ComponentModel namespace.

public class clsDate : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private int _intYear;
public int Year
{
set
{
_intYear = value;
OnPropertyChanged("Year");
}
get
{
return _intYear;
}
}
private void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this,new PropertyChangedEventArgs(property));
}
}
}

The binding of data with data context is a compulsory step which needs to be performed.

One Time Binding

In one time binding, data flows from object to the UI only once. There is no tracking mechanism to update data on either side. One time binding has marked performance improvement as compared to the previous two bindings discussed. This binding is a good choice for reports where the data is loaded only once and viewed.

<TextBox x:Name="txtEnterAge" Text="{Binding Path=Age, Mode=OneTime}" 
	Height="30" Width="150" 
 	VerticalAlignment="Center" HorizontalAlignment="Center"></TextBox>

Simple Demonstration of OneWay and TwoWay

Below is a simple sample code wherein we have two text boxes; one takes in the age and the other text box calculates the approximate birth date.

Below is a simple class which has both the properties. We have implemented INotifyPropertyChanged interface so that we can have two way communication for the year property.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
//
using System.ComponentModel;
namespace SilverLightBinding 
{
public class clsDate : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

private int _intYear;
private int _intAge;
public int Year
{
set
{
_intYear = value;
OnPropertyChanged("Year");

}
get
{
return _intYear;
}

}
public int Age
{
set
{
_intAge = value;
Year = DateTime.Now.Year - _intAge;
}
get
{
return _intAge;
}
}
private void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this,
new PropertyChangedEventArgs(property));
}
}

}
}

Finally we have also binded the Silverlight UI objects with the class properties. Below is the XAML snippet for the same. One point to be noted is that Age is bounded using two way mode as we need to modify the same from the user interface.

<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"> 
	Enter your age in the below text box</TextBlock>

<TextBox x:Name="txtEnterAge" Text="{Binding Path=Age, Mode=TwoWay}" 
	Height="30" Width="150" VerticalAlignment="Center" 
	HorizontalAlignment="Center"></TextBox>

<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
	Your approximate birth date</TextBlock>

<TextBox x:Name="txtCurrentYear" Text="{Binding Path=Year}" 
	Height="30" Width="150" VerticalAlignment="Center" 
	HorizontalAlignment="Center"></TextBox>

You can get the source code from the link at the top of this article.

Other Silverlight FAQs

In case you are a complete fresher to Silverlight, then below are some Silverlight FAQs which can give you a quick start in this topic.

Silverlight FAQ Part 1: This tutorial has 21 basic FAQs which will help you understand WPF, XAML, help you build your first Silverlight application and also explains the overall Silverlight architecture.

Silverlight FAQ Part 2 (Animations and Transformations): This tutorial has 10 FAQ questions which starts with Silverlight animation fundamentals and then shows a simple animated rectangle. The article then moves ahead and talks about 4 different ways of transforming the objects.

Silverlight FAQ Part 3: This article discusses 12 FAQs which revolve around bindings, layouts, consuming WCF services and how to connect to database through Silverlight.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Shivprasad koirala
Architect http://www.questpond.com
India India

I am a Microsoft MVP for ASP/ASP.NET and currently a CEO of a small
E-learning company in India. We are very much active in making training videos ,
writing books and corporate trainings. Do visit my site for 
.NET, C# , design pattern , WCF , Silverlight
, LINQ , ASP.NET , ADO.NET , Sharepoint , UML , SQL Server  training 
and Interview questions and answers


Comments and Discussions

 
GeneralMy vote of 4 PinmemberSilvabolt9-Jul-13 5:24 
GeneralMy vote of 5 Pinmemberrohit1123227-Feb-13 21:48 
Questionvery thank's you for the tutorial. PinmemberAti Farhati9-Feb-13 12:53 
GeneralMy vote of 5 Pinmemberzzfima16-Oct-12 1:01 
QuestionUI object will not update PinmemberMember 804595022-Jul-11 4:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 9 Aug 2010
Article Copyright 2009 by Shivprasad koirala
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid