Okay, suppose you have created a class called UrlManagerViewModel that contains the text that you want to display. You want to let WPF do the heavy lifting by data binding to this class and field. Okay, how do you do this?
Well, the first thing you need to know is that WPF binding uses an interface called
INotifyPropertyChanged
to identify what individual items have changed. It does this by identifying if the item it is binding to is of this type, if it is, the interface contains a special event called
PropertyChanged
that identifies when a property changes. So, we have the first part of the puzzle here - our data bound class must implement
INotifyPropertyChanged
and it must raise the
PropertyChanged
event when the underlying property changes. Okay, let's pull that together:
public class UrlManagerViewModel : INotifyPropertyChanged
{
private string url;
public event PropertyChangedEventHandler PropertyChanged;
public string Url
{
get { return url; }
set
{
if (url != value)
{
url = value;
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs("Url");
}
}
}
}
}
So, in our underlying data class whenever Url changes, the property changed event is raised, using the name of the property to tell WPF which one to look up. Okay, that seems easy enough, but surely that's not all. How does our actual XAML view know where this class is? How does the label know what to hook up to?
The first part of the XAML puzzle lies in the fact that our view needs to hook up to this class through something called a
DataContext
. There are many ways to achieve this, but the simplest way to do it is through the code behind. All you need to do there is create an instance of the class you want to bind to, and after the call to
InitializeComponent
, associate it with the
DataContext
. So, in the code behind file for your XAML, do this (in this example, you've created a user control called UrlManagerView):
public class UrlManagerView : UserControl
{
private UrlManagerViewModel vm;
public UserManagerView()
{
InitializeComponent();
vm = new UrlManagerViewModel();
this.Datacontext = vm;
}
}
Okay, that's hooked the two classes together, but how does the XAML know which property to look at? The answer is that it uses something called a
MarkupExtension
- don't worry, you don't need to know what one of these is at this stage - specifically, it uses the Binding extension. This is a piece of text that the XAML compiler knows needs to be treated in a special way. Whenever you see XAML that contains
="{...}"
, the compiler knows that it will use a
MarkupExtension
. In this case, we are going to use the
Binding
one, so let's assume that you have a
TextBlock
that you want to associate the Url with - the XAML in this case looks like this:
<TextBlock Text="{Binding Url}" />
And that's it - we have databound the Url to the
TextBlock
. Now, whenever the underlying Url changes, the change notification is caught by WPF and the text is changed in the view.
What I have just talked through is part of something called MVVM. If you're getting into WPF, it's worth learning how this works.