Creating Data binding controls in Expression Blend

Data binding Controls in Expression Blend

The most appreciable part of Expression Blend is that we can do powerful activities in Blend without the hour long coding. Most of the features can be experienced with Blend although to additional effects and functionality can also be added through coding yet Blend is a very effective technology.

Among the features, Databinding is one of the powerful tools in which we can add sophisticated functionality to our application. There are two ways of binding data to the controls,as follows :

1. Element Properties : In this way we can add the value of property of one object to the value of property of another object.
   
   
2. Data Sources : In this way data, XML or CLR, is bind from database to listbox or other control.

I will be using the first way of binding data control in this article.

First Using the Binding Element Properties :

This is a very interesting part of creating an application and this is because in this you learn how to bind two property elements together such that making changes in one brings changes in other. However one thing need to be kept in mind that two properties can only be bind together only when their instances match i.e. you cannot bind slider property to the visibility property as both are totally different. although slider property can be bind to opacity property as they both are of number type.

hmmm that's all for this lets now begin with our application in which we are binding the slider property to the progress bar property and the rectangle resizing property, just follow the procedure below :

Begin Like this:

Step 1 : Select slider from the toolbox and then Drag the slider from the toolbox onto the artboard. Similarly add Progress bar and Rectangle on the artboard.

Step 2 : Now select the Slider and go to --> Common Properties -->set Maximum = 100.

Step 3 : Select progress bar go to -->Common properties -->go to Value--> select advance properties button and select databinding. After this a Create data binding window opens up, In this select the Elementary properties tab and then on the Left pane select slider and on the right pane select "Value". click OK. and thence slider is bind with progress bar.

Step 4 : Now add rectangle to the artboard and go to --> Layout property in the property panel --> select width and height property and set both to 100 and then select the advance property button of both the properties one by one in order to bind both properties to the slider because we want the size of rectangle to change on dragging the slider. After pressing the advance property window select databinding then --> Elementary property --> on left pane select slider and on the right pane select "Value". click OK. Do same for both height and width properties.

The Output of this Elementary Binding is as :

1. Here rectangle size is almost zero and progress bar fills with the slider movement.

2. On sliding the slider the rectangle begins to appear i.e. size of rectangle is bind with the slider property of the slider and the progress bar starts filling as its filling property is bind with the slider property.

3. Now as the slider moves further ahead both the progress bar as well as the rectangle size increases proportionally.

That's all in this article , hope you enjoyed binding property in Blend and that too without hectic coding.