Types of Data Binding in SilverLight

Data binding

The data binding is the concept of creating  link between source and silverlight control, the data binding we can classify in to three types

1. One time binding
2. One way binding
3. Two way binding

1. One time binding: This binding is used to bind the data in the silverlight control while executing the application, after executing the application we can’t get new values from the source, we cant give modified data t the source.
2. One way binding: This binding is used to Bind the data in the silver light control while executing the application, after executing the application we can get modified data from the source. But we cant give modification data to the source
3. Two way binding:- using this binding we can bind the data while executing the application, after executing the application we can get modified data from the source, we can give modified data to the source

Example on Data Binding

Open new silverlight application

Add list box, data grid and button control

Go to mainpage XAML code behind window

Public partial class main page: user control

{

Public class emp

{

Public string ename {get; set; }

Public int eno {get; set;}

Public int esal {get; set;}

}

List <emp> obj;

Public void get data()

{

Obj = new list <emp> ();

Obj. add (new emp() {ename = “aaa”, eno =123, esal = 5000}0;

Obj.add (new emp() {ename=”666”, eno = 321, esal = 2000}0;

}

Private void button :- click (object sender, routed E vent arges e )

{

Getdata ();

/: st Box1. Items source = obj;

Datagrid1. Itemssource = Obj;

}

}

Go to SAML mode in the list box control tag

<list box height = “221”>

<listbox. Item template>

<data Template>

<list box item>

<stack painel orientation = “horizontal”>

<text block text = “{binding ename, mode=onetime}”>

</textblock>

<text block text = “{binding eno, mode = onetime}”>

</text block>

<Text Block Text = “{Binding esal, mode = onetime}”>

</textblock>

</stack panel>

</list box item>

</datatemplate>

</listbox. Item template>

</list box>

In the data grid control set auto generate columns = “True”

Silver light will support 3 types of data  binding

One – way  binding

Two-Way   binding

One-Time

One Time Binding  In one time binding we bind the data first time from source to target

If any modification made righter in source or target that will not be objet affected in source or target.

 One way binding

In this method we bind the data from source to target and whenever data is modified in source that will get affected/ updated at target automatically

This is the default mode

 Two way data binding

In this method we bind the data from source to target, then whenever date is updated in source or in tougher it will be updated automatically into other.

Binding the data from one silver light control to other

• To bind the data from one silver light control to other we write the code with target control property
• In general binding is implemented using binding element with in the delimiters like

• {Binding element name = some control ID, path = property name mode = “value”}

    ↓

  One time One way (default) Two way

• Example to bind the data from one silver light control to other silver light control in one way mode.
• Create a new silver light app
• Change the list box name to list sample
• Goto common properties in properties window
• Go to Items collection property
• Clicks on ellipses button

• Click on add button 4 times,

Then 4 list box items will be added

Select first list box item

• Go to content property
• Type the content or red
• Similarly change the contents of list box in list box items to green, blue, orange respectively
• Create a two text boxes with name text box 1 and text box2
• Go to source and write the following code to

• <text box name =”text box1 ---- text = bending
• Element name = “list sample path= selected item. Content, mode= one way}”/>
• <Text Box name = “Text box 2” --- Back ground =” {binding element name =”list sample” path= selected item content mode = one way}”/>
• Run the app in & check
• When ever user selects any element text box1 data will be change and text box 2 background is changed but if user change us the data in text box1 that is in target it will not be updated to the source i.e selected item of list box list sample

• To implement two way mode with text box1 and list sample
• Go to text box1, XAML source and change the mode to two way like
• <text box .name = “text box 1” --------
• Text – “Binding element name = list sample,

• Run the app in & check
• Whenever user selects any element of the text party of the text box1 & back ground property of text box2 will change automatically
• Similarly modify the data in text box that is type a different color name & use tab key. This will modify the selected item content with in the list sample, which indicates two way binding

Implementing data binding with silver light controls and class properties

In target control property we write our binding element like

{Binding path = data field name/properties

Mode = value,                                                          update source Trigger = value}

One time                                                                                                   default

One way                                                                                                    explicit

Two way                                                                                                    (used with two way)

Methods with binding expression class

Up date source:-  This method is use to update the source data when the data is updated with in the target.

To create object for expression class we use another method known as binding expression of the target control i.e. get binding expression (depending property)

Syntax:-

Class name object name = target control ID.

Get- binding expression (Dependency property);

Ex:- Binding expression BE= Text Box1. Getbinding expression (text box. Text)

Note:- This binding expression class and get binding expression methods if we want to implement 2 way mode binding

Data context property of the controls

This property is used to set the object name of the class with which the data field we want to bind the data

Example with binding of the data with class

Add a silver light page to the app only in vs 2010

• Select solution
• Right click
• Add new item
• Select the silver light from installed templates
• Select the silver light page template
• Type the page name
• Click on add
• Design the page
• Go to page1. Xaml.cs file c# code file
• Create a class cls example with public accessibility
• U write this code in same names pase (or) u want to write separately up to y

Public class cls employee

{ string designation;

Public string p designation

{

Set { Designation = vaule:}

Get {return designation}

}

}

Write the following code in page class

Partial class page 1 : page

{

Cls employee obj = new cls employee ():

Public page 1 ()            constructor

{

Initialize component ();

Obj1. P designation = “programmer”;

Text box1. Data contentment = Obj1;

}

Go to XAML source code and write the following code and write the following code to implement binding

<Text box name = “text box1”………..

Text = “{binding path = P designation mode = one way }”/>

Implementing two way mode data binding in the above example.

Using system. Windows. Data;

CLSEM ployeec obj1= new close ployeec2.

Public page 1 ()

{

Obj1. P designation = “ programmer”;

Text box 1 = datacontex1= obj 1;

}

Private void btn submit-click(---)

{

Binding ex press ion BE= text box 1. Get binding expression (text box1. Text);

Text block 4. Text = objt. P designation;

1. Update sources

Text block 5. Text = ob1. P designation;

}

Go to design of page1. Xaml.

Go to xaml source

Change the code of text box1. Binding like

Binding path= designaing – mode= two way, update source trigger = exploit “/>

Run the application & check.