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 :
- Element Properties : In this way we can add
the value of property of one object to the value of property of another object.
- 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.