Basic Databinding in XAML with Silverlight

There are a lot of really great detailed posts about databinding in your XAML application, in both Silverlight and Avalon (WPF). This isn't one of them :). This post will focus on the mechanics for a couple of ways you can make databinding work. There are many other, and arguably better, ways of doing these same simple things. I'm constantly suprised by how flexible WPF and XAML are in how they can be programmed; which is great when your wild and creative ideas work, and horrible when you can't accomplish the simpliest thing.

Binding Syntax

The basic syntax is pretty simple. This little snippet of XAML sets the Text property of the TextBlock to whatever the value of the LocalTime property is.
The curlies inside the attribute tell the XAML parser there's some magic code inside. Binding is one of the keywords. Where did the LocalTime property come from? Enter the DataContext.

Setting and Changing the DataContext

The DataContext is the name of the control's (page's) property for the source of the data. This little application:

consists of an un-named TextBlock and a button called the announceTimeButton. The DataContext is set in two places; the constructor and in the button's event handler.

The LocalInformation class is a little class which serves as this application's "ViewModel" (i.e., the thing you bind your XAML controls to). For reference, here's the source for that class:

What if you didn't want to new up a different instance for some reason? What if the LocalInformation class was expensive to construct, or if, gosh darn it, you were just tickled
to be programming in a statefull environment again. Enter INotifyPropertyChanged

Implement INotifyPropertyChanged

I'll change the page's code to use a statefull instance of the LocalInformation class. I'll set the DataContext initially in the constructor, but leave it alone after that. Don't worry the binding
defined in the XAML will stick.

When the announceTimeButton is clicked the LocalInformation object will be tickled, and the magic that comes from having your "ViewModel" implement the INotifyPropertyChanged interface will kick into action. All elements bound to the affected properties will be, ummmm...re-bound? Notice the special new UpdateLocalTime method:

For the purpose of this example, I put the firing of the PropertyChanged event inside this method. Most of the time you'll see this refactored into it's own method so that all the properties of the class can take advantage it. The name of the property that is being updated is passed through the PropertyChangedEventArgs. The only other important change to our LocalInformation class is the addition of the interface itself, which forces the edition of the PropertyChanged event.

Automatic Updates

So, what if you wanted some thread or timer to update the local time automatically. After all, pushing that button is awfully tedious. I know what you're thinking, you'll make some sort of "timer", and on it's callback you'll call UpdateLocalTime. Well, you're close. A plain old timer will work, you just have to be carefull that the call to fire the PropertyChanged event makes it back on to the same thread that's running the UI (like good ol' WinForms). This is completely possible with a class called the Dispatcher, so if you wanted to but it in your model, you'd need to pass it in or get it...yadda, yadda, yadda.

Luckily, this common scenario is all encapsulated by another class called the DispatcherTimer (clever name isn't it). I'll make this part of my view model and initialize it in the constructor.

Then I'll add the tick handler and public methods to start and stop the timer.

Notice the smooth databinding in the following application:

The point here is that the property update won't be seen unless it happens on the UI's thread.

Magical Databinding

There's a lot not covered here. It's just the basics as I've learned them. We didn't talk about the binding mode or dependency properties or a thousand other things that come into play when building a Silverlight UI out of XAML. In Silverlight, there are definitely more than one way to do just about anything. Databinding in general is one of the cornerstone concepts around WPF and Silverlight.