Reading XML with Silverlight

XML (Extensible Markup Language) is a great format for saving structured data in. In this Tip I will be showing you how to read and process XML files from Silverlight using the XmlReader object.

Let’s say, for example, you want to store a tree structure of images grouping by them category. Your XML could look like this:

<?xml version="1.0" encoding="utf-8" ?>

<ImageTree>

  <Area name="grass">

    <Image name="Normal Grass">grass1.png</Image>

    <Image name="Dry Grass">grass2.png</Image>

    <Image name="Mixed Grass">grass3.png</Image>

    <Image name="Long Grass">grass4.png</Image>

  </Area>

  <Area name="tile">

    <Image name="Brick">brick.png</Image>

    <Image name="White Stone">stone.png</Image>

    <Image name="Cracked Stone">crackedstone.png</Image>

    <Image name="Black Brick">brick2.png</Image>

  </Area>

</ImageTree>

Few things to note about the XML above:

1. XML can only have one root node which in my case I have called <ImageTree>
2. <Area> and <Image> tags are called Elements
3. “name” is an attribute and its content is the value for the attribute.

Now, on to the code below:

1. To open an XML file I will be using the WebClient object. I have placed a file called MapImages.xml in my ClientBin folder that contains the data I will read. When the file read operation is complete (remember everything is asynchronous) the callback function client_DownloadStringCompleted will be called.
2. When reading the data I check to see what the NodeType is. I only care about nodes that are of type Element or Text and I ignore stuff like comments, whitespace, etc.
3. Once you read an Element you can get the attribute (such as name=”Brick”) for the Element by calling reader.MoveToFirstAttribute().
4. The file name for each image is stored in the Tag property of each tree view item.

public Page()

{

    InitializeComponent();           

    Uri url = new Uri("MapImages.xml", UriKind.Relative);

    WebClient client = new WebClient();

    client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);

    client.DownloadStringAsync(url);

}

void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

{

    if (e.Error == null)

    {

        TreeViewItem areaItem = null;

        TreeView tv = new TreeView();

        TreeViewItem rootItem = new TreeViewItem();

        rootItem.Header = "Images";

        tv.Items.Add(rootItem);

        StringReader stream = new StringReader(e.Result);

        XmlReader reader = XmlReader.Create(stream);

        string imageName = String.Empty;

        string areaName = String.Empty;

        string fileName = String.Empty;

        while (reader.Read())

        {

            if (reader.NodeType == XmlNodeType.Element)

            {

                if (reader.Name == "Area")

                {

                    if (true == reader.MoveToFirstAttribute())

                    {

                        areaName = reader.Value;

                        areaItem = new TreeViewItem();

                        areaItem.Header = areaName;

                        rootItem.Items.Add(areaItem);

                    }

                }

                else if (reader.Name == "Image")

                {

                    if (true == reader.MoveToFirstAttribute())

                    {

                         imageName = reader.Value;

                    }

                }                        

            }

            else if (reader.NodeType == XmlNodeType.Text)

            {

                fileName = reader.Value;

                TreeViewItem imageItem = new TreeViewItem();

                imageItem.Header = imageName;

                imageItem.Tag = fileName;

                if (null != areaItem)

                    areaItem.Items.Add(imageItem);

            }

        }

        MainCanvas.Children.Add(tv); // Add the treeview to our main canvas.

    }

}

To use LINQ you will need to add a reference to System.Xml.Linq. To do this, right click on your References folder in your Silverlight application in the Solution Explorer and choose “Add Reference”. You will find this component on the .NET tab. In your source file add a using statement to reference System.Xml.Linq.

The function below will create a tree view out of the XML file that is shown above. A few important notes on this code:

1. The XML file will need to be marked as Build Action=Content so that it gets placed into your XAP file. If you select this file, you can apply this setting in it’s properties in the property grid.
2. XDocument.Load() is used to load the XML file from your XAP.
3. The XDocument has a enumerable property called Descendants. You can specify what node you want to search for as the parameter of this property and go from there.

private void CreateTree()

{

    TreeViewItem areaItem = null;

    TreeView tv = new TreeView();

    TreeViewItem rootItem = new TreeViewItem();

    rootItem.Header = "Images";

    tv.Items.Add(rootItem);

    XDocument document = XDocument.Load("MapImages.xml");

    foreach (XElement element in document.Descendants("Area"))

    {

        areaItem = new TreeViewItem();

        areaItem.Header = element.FirstAttribute.Value;

        rootItem.Items.Add(areaItem);

        foreach (XElement imageElement in element.Descendants("Image"))

        {

            TreeViewItem imageItem = new TreeViewItem();

            imageItem.Tag = imageElement.Value;

            imageItem.Header = imageElement.FirstAttribute.Value;

            areaItem.Items.Add(imageItem);

        }

    }

    MainCanvas.Children.Add(tv);

}

As you can see from the code above it’s a lot simpler and straight forward than using XmlReader