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

In the previous page, you received a brief introduction to element to element data binding and got started creating a small example. In this page, let's continue working on our example and learn some extra details about data binding.

7. After you have selected Data Binding, the Create Data Binding dialog will appear. From this dialog, click on the Element Property tab:

[ select the Elementy Property tab to specify data binding with elements ]

8. The Element Property tab lists all of the elements that are currently available in your scene on the left with the selected element's properties displayed on the right.  What we want to do, as summarized by the heading in this window, is Bind [TextBlock].FontSize to something. This something is our slider control's Value property.
   
   From the Scene elements list, click on the entry that says [Slider]. Once you have clicked it, the Properties area on the right area on the right will display all of the properties your slider control exposes:

[ select the Slider element from the scene list ]

9. In the list of Properties you see on the right, scroll all the way down and select the Value property. Once you have selected the Value property, click OK to bind your TextBlock's FontSize to your slider control's Value property.
   
   Your Create Data Binding dialog will disappear, and your textblock's FontSize property will be displayed in a yellow border indicating that its value is now bound to something:

[ the yellow border indicates your value is bound to something ]

10. Go ahead and test your application by pressing F5 and playing with the slider once your application displays either in your browser or in a window. Notice that adjusting your slider has the effect of making your text's font size larger:

[ look, just like the original example! ]

You'll probably notice that your textblock's initial font size is 0 and that, when the slider is maxed out, the font size isn't really that large. You can change all of that by adjusting your slider control's Maximum, Minimum, and Value properties found in the Common Properties category:

[ setting properties on your slider impacts the font sizes you will hit ]

What Just Happened?
You now have a working example where changing your slider's value causes the size of your textblock's font to vary as well. Let's take a few steps back and look at what exactly went on. At the very beginning, I mentioned that data binding is all about creating relationships between various entities:

In this tutorial, the two entities were your slider control and your textblock:

More specifically, it was your slider control's Value property and your textblock's FontSize property. As your slider's Value property changed due to you fiddling with the slider thumb, your textblock's FontSize changed accordingly. There are several details I want you to pay attention to.

Notice that the change in your FontSize was triggered by the slider changing. This brings us to two terms you need to be aware of when working with data binding: source and target.

The source of the binding is what initiates the relationship changing. In our case, that would be our slider. The target of the binding is the recipient of the change, and that would be our textblock. This is a very simple example of data binding where the relationship is just one-way. Only by the slider changing will something actually happen. If you happen to change your font size, your slider's value will not reciprocate and change accordingly. I am not going to delve on one-way, two-way, etc. in this tutorial, but just be aware that not everything will be as clear cut as the example you saw here.

Finally, let's wrap up by looking at the XAML that gets generated for your textblock you've done so far:

<TextBlock FontSize="{Binding Value, ElementName=slider, Mode=OneWay}" Width="100" Height="20"/>

Notice that the XAML markup, much like a SportsCenter summary of a sporting event, elegantly captures in one line what took several pages to walk through and explain. This should be very self-explanatory, so I am not going to be describing the XAML any further.

Conclusion
Phew - that was quite the trip. In a few pages, you learned about one of the most useful techniques available to you in WPF and Silverlight, element data binding. I think I've said all there is to say about this topic, so I will leave you with the source code for my example you saw on the first page of this tutorial:

Download Source Files

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

1 | 2