Day #13: Binding Elements in Silverlight 3

This is post #13 in my series of 31 Days of Silverlight. Today we are going to be discussing binding two Silverlight elements together. Now, we have been able to do this in the past, but in Silverlight 3, we have a new syntax that makes this operation MUCH simpler.

Make sure that, at this point in the series, you have updated your tools to the Silverlight 3 tools. You can get the Silverlight 3 tools here. You can also download the Web Platform Installer, which is like Windows Update for web developers. It will let you know when there are new updates to download in the future, including Beta versions.

Creating some XAML elements

In this example, we’re going to go simple. I’m going to add a Slider and a TextBlock to the page. I think this is probably the default demo for Element Binding, but it’s also an effective way to communicate it, so we’ll expand on it later. Also note that if you’ve never used a Slider control before, that we have the ability to specify a minimum and maximum value for it. This can be a huge help when we want a user to pick a specific range of values. You’ll see that my range is from 0 to 1, and I’ll explain why a bit later. For now, your XAML should look like this:

<UserControl x:Class="SilverlightElementBinding.MainPage"
Canvas x:Name="LayoutRoot" Width="400" Height="300" Background="White">
Slider x:Name="Slidy" Width="150" Maximum="1" Minimum="0" Canvas.Left="178" Canvas.Top="34" />
TextBlock x:Name="ValueBox" Width="150" Canvas.Left="178" Canvas.Top="56" FontFamily="Arial Black" FontSize="26" Text="0" TextAlignment="Center"/>

Writing code to bind these elements

In Silverlight 2, we didn’t have much choice. The way to bind two elements together was to write some code. We create an event handler on the one that will change, and in the event method, update the other control with the results of the first. Since you will probably still need to do things like this in the future, here’s what the code would look like:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightElementBinding
public partial class MainPage : UserControl
public MainPage()
Slidy.ValueChanged += new RoutedPropertyChangedEventHandler<double>(Slidy_ValueChanged);

void Slidy_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
ValueBox.Text = Slidy.Value.ToString();

Binding elements in Silverlight 3

To demonstrate binding, I’m going to use a slightly different example than binding to a TextBlock, and this is why we chose a range from 0 to 1. In this example, I am adding an Image element to the page, and we will be binding our slider value directly to the Opacity value of the Image. This is why we chose a range from 0 to 1 on our slider. Opacity can have a value anywhere between those two numbers. Here’s the XAML for the new image (you’ll need to actually add an image to your project using “Add Existing Item…”):

<Image x:Name="Lighthouse" Source="Lighthouse.jpg" Width="400" Height="300" />

You’ll notice that there’s not a reference to the Opacity yet. We can add that (with the data binding) in just a few short characters. I’ll show you the markup, and then I’ll explain it.

<Image x:Name="Lighthouse" Source="Lighthouse.jpg" Width="400" Height="300" Opacity="{Binding Value, Mode=OneWay, ElementName=Slidy}" />

The first segment of the Opacity statement is “Binding Value,” which means that we are going to be taking the value of the element we specify. The second element, “Mode=OneWay,” specifies that we are only moving data from the Slider to the Image, not the other way around, and certainly not both. But those options do exist, and your other options are TwoWay, and OneTime. TwoWay should be obvious, as it means that if either value changes, the other element would be updated. OneTime means that it will only happen, not surprisingly, one time. This is primarily used when you want to initialize a value, but not update it on subsequent changes or updates.

Finally, we have the “ElementName=Slidy,”, which just names the control that we wanted the value from. That’s it. There’s nothing secret going on behind the curtain, just a simple specification of the element to bind to, and which direction the data should travel. Pretty simple, huh? It definitely saves you the time of writing individual event handlers each time, that’s for sure.


In this post, I discussed the fact that there is now inline data binding in Silverlight 3. I also demonstrated how to effectively bind data in code. You should be able to see my example application running below. If it is not displayed, you can view the Silverlight 3 Element Binding demo here. You can download the code for this Silverlight Element Binding example here.

9 thoughts on “Day #13: Binding Elements in Silverlight 3

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s