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
|
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.
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 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.
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>
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.
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.
For Further reading do watch the below interview preparation videos and step by step video series.
