Element to Element Binding in Silverlight 3 using Blend 3


Introduction

In this article I will how you can achieve Element to Element Binding in Silverlight 3 using Blend 3.

Creating a Simple Silverlight Application

Open up Blend 3 and Create a new Silverlight Application. Name it as ElementBindingBlend.

im1.gif

Here is the idea of our sample application we will increase the Font Size of a Text Block control by using Slider Control's value.

Go ahead and add a TextBlock and a Slider Control to your application.

im2.gif

Now select the Slider Control and change the following properties.

im3.gif

As you see from the above figure I have changed the Maximum, Minimum and Value properties.

Now Select the TextBlock Control and Find the Font Size property.

im4.gif

If you see the above figure; you can see the default Font size is 8.25 and right to that you will find the button to change the property.

Click the Button and you will find the following options.

im5.gif

Choose Data Binding and you will find the following Create Data Binding dialog:

im6.gif

Choose the Element Property tab.

You will find the following controls added to the application and their properties in the right side.

im7.gif

As the above figure says; you need to select the Slider Control and select Value property from the right side list of properties.

Press OK to finish the Data Binding.

As soon as you finish Data Binding the Font value becomes not editable (Turns Yellow Border).

im8.gif

Now go ahead and run your application and slide the Slider to see the TextBlock's Font size is changing accordingly.

im9.gif

That's it you have successfully used Data Binding in Blend 3.

Enjoy Coding.