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
- One time binding
- One way binding
- Two way binding
- 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.
- 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
- 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;
- 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.