n the first article in this series, I discussed how to create Windows Presentation Foundation (WPF; code named Avalon) applications using XAML. In a follow-up article, I discussed the new navigational model in WPF. In this third installment, I will explore another important concept in WPF programming?data binding.
In WPF you can bind UI elements to a wide variety of data sources, including XML data, Web services, as well as databases. Data binding is a big topic in WPF and it is beyond the scope of this article to discuss every nook and cranny of data binding. To keep things manageable, I will show you how you can data bind a typical WPF application to an XML data source and explain the nuts and bolts behind it. To make the example useful, I will build a simple RSS reader that accepts an RSS XML document and displays the various items in the document using data binding. Figure 1 shows the completed application.
Binding to a Static XML Source
To build the sample application in this article, you need Visual Studio 2005 Beta 2 with the WinFX SDK installed. Using Visual Studio 2005 Beta 2, create a new AvalonNavigation application (see Figure 2). Name the application DataBinding and click OK.
![]() Figure 1. The Avalon RSS Reader Application: In this example, the DevX New Articles RSS feed is used to generate the data for the sample application. |
? | ![]() Figure 2. Creating a New AvalonNavigation Application: Start your project in Visual Studio in the usual way, choosing the AvalonNavigation type. |
What You Need |
|
In the default Page1.xaml, you will first build the UI of the application by populating the page with the relevant XAML elements.
First, add a
Add a
Next, add a
Next, you will display a header (“Titles”) on your page, as well as create a ListBox control to display all the titles (encapsulated within the
You use the ItemTemplate attribute to apply a template to the control ({StaticResource RSSTemplate}). Finally, when a selection in the ListBox control changes, the TitleChanged event is fired (as specified in the SelectionChanged attribute):
Titles
![]() |
|
Figure 3. Binding XML Data to Data Controls: The XML for the RSS feed is bound to data controls in the application code. |
When an item in the ListBox control is selected, the application displays the description of the item on the right-hand side of the page. In the next step you want to display the header (“Description”), followed by a
Description
![]() |
|
Figure 4. Displaying Detailed Description: The description and link for the selected RSS item are bound to the TextBlock controls. They are changed whenever the user selects an item in the ListBox control. |
Finally, you need to service the TitleChanged() event that you specified earlier. In this event, you will change the DataContext property of the dpDescription and dpURL
Partial Public Class Page1 Inherits Page Private Sub TitleChanged(ByVal sender As Object, _ ByVal args As SelectionChangedEventArgs) Dim lstbox As ListBox = sender If lstbox.SelectedItem IsNot Nothing Then dpDescription.DataContext = _ lstbox.SelectedItem dpURL.DataContext = lstbox.SelectedItem End If End SubEnd Class
That’s it! Press F5 to test the application. The items in the RSS XML document are displayed in the ListBox control. You can click on the items in the ListBox control to make the corresponding description and URL show up on the right side of the page (see Figure 1).
Binding to an External XML Source
The previous example shows how you can bind an XML data island to the various controls in your WPF application. One problem with using an XML data island within the application is that any changes to the XML data will require the application to be modified/compiled. A better approach would be to store the XML data in an external file and then reference it within the application. For example, you could save the XML data in a file called RSS.xml and then reference it within the application as:
Dynamically Loading the XML Source
While you can reference an external XML file, a better approach would be to dynamically load the XML document from a URL. In this case, you would modify your
Try using the following URLs and see that the application loads a different set of RSS items each time:
- http://services.devx.com/outgoing/dotnet.xml
- http://services.devx.com/outgoing/wirelessfeed.xml
- http://services.devx.com/outgoing/enterprisefeed.xml
- http://services.devx.com/outgoing/xmlfeed.xml
Going Further
In this article, you have seen how data-binding works in WPF. For those who want to take the sample application further, consider modifying the application to allow users to select from a list of URLs (instead of manually modifying the source of the XML document). Otherwise, I encourage you to download the sample code and see for yourself how data binding works in WPF.