Random geekery since 2005.

Husband, father, programmer, speaker, writer, blogger, podcaster, collector, traveler, golfer.

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"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
<
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"/>
</
Canvas>
</
UserControl>

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()
{
InitializeComponent();
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.

Summary

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.

Tags

9 responses to “Day #13: Binding Elements in Silverlight 3”

  1. cash advance network Avatar

    We are born believing. A man bears beliefs, as a tree bears beauty.

  2. cash loan Avatar

    A sect or party is an elegant incognito devised to save a man from the vexation of thinking.

    1. Cheyanna Avatar

      Good to see real epexriste on display. Your contribution is most welcome.

  3. no faxing loans Avatar

    The greatest obstacle to discovery is not ignorance – it is the illusion of knowledge.

  4. overnight payday loans Avatar

    Envy is the ulcer of the soul.

  5. payday loans no teletrack Avatar

    Winter is on my head, but eternal spring is in my heart.

  6. direct loan Avatar

    If we don't know life, how can we know death

  7. […] statements that we’ll use later.  For more on data binding in XAML, you can check out Day #13 of the 31 Days of Silverlight.  I’ve also added a TextBox that we will use for searching through the […]

  8. […] später verwenden werden. Wenn Sie mehr über Data Binding in XAML erfahren möchten, können Sie Day #13 of the 31 Days of Silverlight lesen. Weiterhin habe ich eine TextBox hinzugefügt, die wir zur Suche in den Kontakten verwenden […]

Leave a Reply

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

WordPress.com Logo

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

Facebook photo

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

Connecting to %s

Create a website or blog at WordPress.com

%d bloggers like this: