WPF not only stands for new fantastic tools for layout. There are also some very interesting new ways to implement databinding in your applications.
In this article, I’m going to show how you can easily build an RSS reader using the new databinding features in WPF.
How databinding works in WPF
In order not to go too fast, first, let me explain some basic concepts of databinding in WPF.
To keep data used in UI in sync with data in the datasource (for example a database), we can of course use properties. There is nothing wrong if you keep doing this under WPF.
However, WPF provides very handy binding features, that will make your life a lot easier!
We could bind the value of a textbox with the following code:
<TextBox Text="{Binding Path=Age}">
</TextBox>
Databinding under WPF uses a Binding object. The above code declares a textbox in XAML, and assigns the text-property the value of a property named Age of an object that it is bound to. This is done using the Path property. The Path property refers to the property of the object we are binding too.
To know to which object we are binding, we have the DataContext property. In WPF, every FrameworkElement and also every FrameworkContentElement has a DataContext property. It is of type object, so we can bind to whatever we like.
The binding does however have some interesting behaviour: if no DataContext is specified on the object itself (like with our textbox), it goes up the tree in which the controls are nested. So if we add our textbox in a Grid, it will look if this Grid has a DataContext. If not, it goes up higher…
This is of course very useful if we have more than one object (say 5 textboxes) binding to the same object.
Let me show you how to declare an object to which we’ll bind in XAML code (this uses the new syntax, so to run this, you have to upgrade to beta 2 or higher!)
<Window x:Class="Snowball.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Snowball"
Title="Snowball" Height="300" Width="300"
>
<Window.Resources>
<local:Person x:Key="Gill" Name="Gill Cleeren" Age="27"/>
</Window.Resources>
<Grid DataContext="{StaticResource Gill}">
<TextBox Text="{Binding Path=Name}">
</TextBox>
</Grid>
</Window>
And in the code-behind:
namespace Snowball
{
public class Person
{
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private string age;
public string Age
{
get { return age; }
set { age = value; }
}
public Person()
{ }
}
}
What I have done here, is creating a Person object in XAML. For this to work, you have to provide a default constructor.
First, we have to wire the CLR namespace to be known in XAML: xmlns:local="clr-namespace:Snowball".
Now, we can use the tag “local” to refer to the namespace in which the Person class resides.
Using the following line, we instantiate a Person using XAML:
<local:Person x:Key="Gill" Name="Gill Cleeren" Age="27"/>
The result is a textbox showing my name:
Note that if you try this in Visual Studio at the time of writing, you get an error viewing the design view. Don’t worry, when running, it all works fine.
Binding XML data to a list
Most of the time, we bind data to a list: a dropdown, a grid… In this part, I’m going to bind an RSS feed from my website www.snowball.be to a list.
To do this, we’ll need an XmlDataProvider.
Data can be accessed by using a Provider. Currently, 2 providers exist: the XmlDataProvider and the ObjectDataProvider.
An XmlDataProvider object must be declared within the resources, for example the resources of the grid:
<Grid.Resources>
<XmlDataProvider x:Key="SnowballRSS" Source="http://www.snowball.be/SyndicationService.asmx/GetRss" />
</Grid.Resources>
The x:Key assigns a name, which we can use in our code-behind.
We can now use this object as a datasource for a listbox, like this:
<ListBox ItemsSource="{Binding Source={StaticResource SnowballRSS}, XPath=//rss//channel//item }">
</ListBox.ItemTemplate>
We provide a value for the ItemSource, being an instance of Binding. For this Binding instance, we provide the Source property. Since we’re dealing with a resource that is defined in the XAML itself, we again use StaticResource and as value, the name of the dataprovider. A second attribute is the XPath expression, to locate the value we want to show in the listbox.
This is the result:
What happens, is that the entire XML tag is being read into a listitem. This is not desired, so we have to provide some kind of formatting, to tell WPF exactly what we want to show in the items.
This can be accomplished using a datatemplate.
We provide an instance of DataTemplate to be used as value for the ItemTemplate property of the listbox. In this datatemplate, we can specify what to show as listitem.
In the following code, I’m telling to make each listitem consist of a TextBlock. The text to be shown is taken from the surrounding Listbox (remember searching for the data up in the controltree?). In the data it finds, which is an XML tag with subnodes, we can to take the title as the value for the item.
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding XPath=title}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
When we now run this, we get the following:
Much better, isn’t it?!
In the next part, we’re going to make the application a little bit more complete, providing a click event for the listbox, and making sure that some fields are filled in, again using databinding.
Adding the detailsform
We’ll now change the program somewhat to make it display the details of the item selected in the listbox.
We’ll add a Grid to make it easy to display 3 rows and 2 columns with textblocks, labels and textboxes.
This can be done with the following code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition Width="0.8*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0">Title</TextBlock>
<Label Grid.Row="0" Grid.Column="1"></Label>
<TextBlock Grid.Row="1" Grid.Column="0">Link:</TextBlock>
<Label Grid.Row="1" Grid.Column="1" ></Label>
<TextBlock Grid.Row="2" Grid.Column="0">Article</TextBlock>
<TextBox Grid.Row="2" Grid.Column="1"></TextBox>
</Grid>
After adding the Grid, we’ll also have to change the rest of the markup a little. Take a look at the sample code provided with this article to see the rest of the layout.
We now want the detail-fields display more info on the selected item in the Listbox. Therefore, the Grid containing these fields should have its DataContext set to the item selected in the list. We do this with the following code:
<Grid DataContext="{Binding ElementName=RSSList, Path=SelectedItem}" >
The element is the name of the listbox, the path is once again the property within the source to which we’ll be binding the grid (and thus the detail fields).
Now, every time we select an item in the listbox, the grid has its datacontext set to this selected item. The fields can now get details as follows:
…
<Label Grid.Row="0" Grid.Column="1" Content="{Binding XPath=title}"></Label>
…
<Label Grid.Row="1" Grid.Column="1" Content="{Binding XPath=link}">
</Label>
…
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding XPath=description}"></TextBox>
The result should resemble the following:
Congratulations, you built your first databound application, using WPF databinding and a simple datatemplate!
In my next (large) article, we’ll be looking at the styling tools provided by WPF to make this application look TONS better!
RSS Reader.zip (45.32 KB) 