Element to Element Data Binding - Page 1
       by kirupa  |  29 July 2009

One of the nice features in WPF and Silverlight is data binding. In a nutshell, data binding is, as its name implies, binding various pieces of data together. To be more precise (or more serious), you are creating a relationship between two entities:

These entities, unfortunately, are not people. Instead, they are things that you use in Silverlight and WPF all the time. They could be variables, properties, other UI elements, XML data sources, and more:

In this article, I will explain how you can create a data binding between properties stored in two UI elements. This probably does not make much sense if this if the first time you are being exposed to data binding, so let's start by looking at an example:

[ drag and play with the slider above to see data binding in action ]

The above example shows element to element binding at work. As you slide Font Size slider, notice that the text you are displaying adjusts depending on where in the slider you currently are:

[ drag the slider right to make your text larger ]

The relationship between your slider moving and the text's font size change is a great example of data binding. By the end of this tutorial, you will have created a similar example and learned a little bit about why/how it works the way it does.

Getting Started
Ok, let's get started with creating something that contains a dash of element-to-element binding:

1. First, launch Expression Blend. If you don't have Expression Blend or the necessary tools for getting started with building Silverlight applications, visit the Getting Started guide first.
2. Once you have launched Expression Blend, create a new Silverlight or WPF project:

[ create either a new WPF or Silverlight application ]

I will be creating a Silverlight project, but the instructions are exactly the same if you happen to create a WPF version of your project instead.

3. Once you have created your new project, insert a Slider control as well as a Textblock control from your Assets Library and onto the artboard. Due to sheer laziness, I have arranged them as so in my version, but you can place them anywhere you want:

[ insert two controls from the Asset Library - Slider and TextBlock ]

4. To recap, what we want to do is re-create the example where the size of the text inside your TextBlock changes as the slider's thumb is dragged. What we need to do is create a relationship, a binding, between the size of our text and the value of our slider's thumb. Let's do this!
   
   First, select your textblock and look in the Text category under Properties:

[ find the Text category to see all properties related to...text! ]

5. You will see a lot of text-related properties contained in the Text category. One such property refers to your text's font size (aptly called the FontSize property), and that is the drop-down on the right that contains a number:

[ find the FontSize property to the right of your font list ]

6. Once you have found the font size property, click on the little square that appears to its right:

[ click on the Properties Marker found to the right of the FontSize property ]

This square is known as the Properties Marker, and once you click it, a menu will appear. From the menu that appears, select Data Binding:

[ from the Properties Marker menu, select Data Binding ]

Alright. I am going to leave on a cliffhanger here where you get a small mental pause before seeing what happens next...on the next page.

Onwards to the next page!

1 | 2