Binding to XML

One of the amazing aspects of the WPF data binding system is that it can bind to pretty much anything.  As you might expect, it has top-notch support for binding directly to XML (well, directly to an XmlDocument).  In this blog post we will see how to bind a ListBox, elements in a DataTemplate, and an Image to some XML data.  The entire demo is implemented in XAML; there is no code necessary to accomplish this task. 

The screenshot below shows what the UI will look like by the time we are done:

As seen in the image above, this UI has two major pieces: a ListBox containing information about people, and a photo area which shows a person’s picture and their name. 

This demo binds some silly XML data to the UI, but it is just an example of how to bind to XML.  Here’s the basic format of the data we will bind to:

Here is the directory structure of the demo project:

Now let’s look at how to take that XML and turn it into the UI seen above.  Since all of the controls in the Window exist in a Grid panel, we can set its DataContext to an XmlDataProvider which contains the XML data, like this:

Now that all elements in the UI can bind to the XML data, let’s see how the ListBox is configured:

Notice that the ListBox’s IsSynchronizedWithCurrentItem property is set to true.  That will ensure the selected person’s photo is displayed in the Image element beneath the ListBox.  The ItemsSource property is set to {Binding}, which just means that it is bound to the ListBox’s DataContext (which is inherited down from the Grid panel’s DataContext).

Binding the ListBox is not enough.  In order for a <Person> element to be rendered properly we need to explain to WPF what a <Person> element should look like.  That task can easily be accomplished via the magic of data templates, as seen below:

Notice that the Binding statements seen above use the XPath property of the Binding class, not the Path property.  When binding to XML data you need to use the XPath property to specify where in the XML document the data values come from.  As you might expect, the XPath property must be set to a valid XPath expression.

When a person is selected in the ListBox we need to display his photo and name, in the area beneath the ListBox.  Here is the XAML which accomplishes that:

As you can see, all of this was created without writing a single line of code.  If you need to load an XML document from an external source (such as a Web service) then you might need to write some code which retrieves the file and gives it to the XmlDataProvider.  In this demo the XML data and image files are stored as resources in the assembly.

Here is the demo project: Binding to XML – Demo Project  Be sure to change the file extension from .DOC to .ZIP and then unzip it.