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:

Binding to XML (screenshot)

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:

Binding to XML (data)

Here is the directory structure of the demo project:

Binding to XML (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:

Binding to XML (DataContext)

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

Binding to XML (ListBox)

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:

Binding to XML (DataTemplate)

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:

Binding to XML (photo area)

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.

About these ads

13 Responses to Binding to XML

  1. Karl Shifflett says:

    Josh,

    Love your postings. I don’t have a BLOG yet.

    I just wrote a checkbox control (style actually) that has the text on the left instead of the right.

    Can I send it to you and have you post it for everyone?

    Cheers,

    Karl

  2. Josh Smith says:

    Karl,

    Sure, you can send it to me. It would probably be even better if you wrote an article about it and posted it to CodeProject (www.codeproject.com). The article wouldn’t have to be “authoritive” or anything like that, just “here’s what I made and how I did it .” CodeProject articles get far more views and feedback than my humble blog posts. :)

    Either way, I’m looking forward to see what you’ve been up to.

    Thanks,
    Josh

  3. karlshifflett says:

    Josh,

    My friend Bill suggested I start a blog. Here it is :

    http://karlshifflett.wordpress.com/

    The article is my first post and public article. Let me know what you think about the code.

    BTW : I did work out that question I sent you awhile back about getting the error notification sent to the form. As soon as I have it in production form, I’ll post it and let you know it’s there. I’ve figured out 3-4 ways to do it without having to loop through the control’s on the page or window to see if each control is valid. I just need to get this nailed down and will post.

    Best to you!

    Karl

  4. Patrick says:

    Hey Josh,

    What is the purpose of the ‘@’ symbol in the above bindings? Nearest I can figure, it says that the XPath value is an attribute of the object (e.g., Name=”Blah”), rather than a child node. Is that correct?

    By the way: I typed the following into Google: “wpf bind content to listbox selected item”

    On the first page, I found 3 useful results. Of the 3, only your article is actually comprehensible. Again, I just want to say how much I appreciate your clear, straightforward approach to WPF. It’s hard enough to learn without an ‘example’ that contains 47 disparate concepts.

  5. Josh Smith says:

    Patrick,

    Thanks for the encouraging feedback about my WPF work. Most appreciated!

    You are correct about the purpose of the @ sign. It specifies an attribute value as the source of the bound value.

    Josh

  6. Brian says:

    Hi Josh,

    Thanks for the tutorial – very well done.

    I would really love an example of how to update the UI whenever the XML file is updated.

  7. Tejas says:

    It Shows Difference between Simple and Sample , Very Usefull

  8. Ruchi says:

    Very help ful blog. I am trying to use xmldataprovider for a tree view, where xml is from file and can be nested.

  9. [...] Did you like this brief introduction? Find out about it in full detail here. [...]

  10. div says:

    nice, check out more here!

    http://TheShox.com

  11. gayathri says:

    hey can u say me how to do the other way around of bidning.
    ie.if u edit some data in the text box which is bounded to one of the tag in xml,it should be saved back in xml file.

  12. Shrenik says:

    Hi, You are very impressive in showcase application. I have similer requirement with some twist, are you able to help me on this??? I have XPathNavigator in my page and i wanted to bind as binding normal xml document, is it possible??? I tries and applied all my small amount of knowledge but failed!!! please help me!!!

  13. [...] How to bind XML to WPF controls. [...]

Follow

Get every new post delivered to your Inbox.

Join 285 other followers

%d bloggers like this: