|
by
kirupa | 22 January 2008
One of my favorite features in WPF has to be data
binding. In case you are not familiar with it, data
binding allows you to go from having some bizarre
collection of data into something really cool
looking with little effort. In my earlier
Data Binding to CLR Objects tutorial I described
data binding and explained how to use data binding
with CLR data.
In this tutorial, I will explain how to data bind
to XML data. XML data is interesting because you use
it a lot, for example, if you subscribe to RSS
feeds, those feeds themselves are essentially XML
files. The functionality in WPF for binding to XML
is similar to what you have with CLR data, but there
are some differences that warrant a detailed
tutorial focusing just on the XML side of data
binding.
Before continuing on, by the end of
this tutorial, you will have created something that
looks like the following image:
[ what you will create by the end of this tutorial ]
The above data and images are specified in an
external XML file. You can view that XML file here:
http://www.kirupa.com/blend_wpf/code/kirupaZuneData.xml
In case you are curious, the XML
file I posted above and use in the application you
will be creating is taken from
the Zune Social web service. I wrote about that in
this
blog post.
This tutorial will give you a comprehensive dive
into using XML data binding using Expression Blend.
You will learn how to create a data source out of
your XML file, create and modify a data template,
filter data using XPaths, and how to modify the
formatting and layout of your final results. This
tutorial is aimed at users who have prior experience
with Blend. At the very least, make sure you are
familiar with setting up your project, using
controls, and making simple modifications via the
property grid.
If you are looking for a simpler coverage of this
topic, the Blend help topics include a nice article
titled Create an RSS news reader.
To get the most out of this article, you should follow along with my instructions. To do
that, you will need Expression Blend 2 installed. If you do not already
have it, you can download the fully-functional trial
version from the link shown below:
Normally, you would
also need Visual Studio 2008, but data binding to
XML data requires no extra hand-written code.
Everything is done via XAML using just Blend.
The first thing you will need to do is bring your
XML file into your application in a form that it
understands:
-
Launch Expression
Blend 2 and create a new WPF project. Give your
project the name XMLDataBinding:
[ create a new WPF project titled XMLDataBinding ]
Press
OK to create your new Project and to hide the New
Project window.
-
You should now see
a blank artboard with nothing in it. What we are
going to do first is add our XML data source. On
the right-hand side, make sure the Project tab
is selected and the Data panel is displayed:
[ make sure your Data panel is displayed ]
-
From the Data
panel (shown above), click on the + XML
button. The Add XML Data Source window will
appear.
From the Add XML Data Source window, for
Connection Name,
change what is displayed to ZuneData,
and for the URL with
XML Data field, copy and paste the
following URL:
http://www.kirupa.com/blend_wpf/code/kirupaZuneData.xml
Your Add XML Data Source window should look like
the following image:
[ in your XML Data Source window, specify the
connection name and URL ]
-
Once you have
entered the correct data to your Add XML Data
Source window, press OK to close the window.
After a few moments, you will see your Data
panel display the Music Data connection:
[ your XML data source named MusicData has now been
added ]
So far so good. You
took some data and created a data source called
MusicData. We'll look at how to take this data and
make an attempt at visualizing our data on the
next page.
Onwards to the
next page!
|
Data Binding to XML Data - Page 1
