Windows-8.1

Parsing and displaying simple XML feeds in Windows Phone 8 app

This post will explain how you could parse remotely located XML feeds and display content in Windows Phone 8 app. Here’s an sample XML file which we plan to fetch and display as a list in our app. If you are not familiar with XMLs then you could refer to some basic tutorials on w3schools.com. Here are few things worth remembering..

  • With XML, your data can be available to all kinds of reading machines
  • You can define any tag in XML, taking care of the fact that each tag opened should be closed
  • You can have any level of nesting of tags in XML
  • XML tags are case sensitive
  • In XML, all elements must be properly nested within each other
  • XML documents must contain one element that is the parent of all other elements.
  • In XML, the attribute values must always be quoted.

If you have a database on some server, you can easily create a web service for it and use the web service to get content for your app. This is useful when you already have things setup for your website and want to take it to mobile with native apps. Also if you have an app on one platform its easier to develop it for another using the same web services. It keeps your data synced and frees you from worrying about data inconsistency.

Here’s the PHP code which I used to generate the sample XML file. I fetch the rows from MySQL database and echo it within properly nested tags. You could pass GET/POST requests to filter the data which you want to return. For example, you may choose to display only authors with count greater than 20.

Now lets jump into building the app.

Step 1. Add a class Author to store the data for an author

In this tutorial we are fetching all the authors from a XML file. So we name our class Author which will store an author’s data.
Step 2. Add a list `authors` which will have items of type Author

Below the class Author add a list authors to store all the authors details



1

Step 3. Call a webclient on LayoutRoot_Loaded event to fetch the XML file

2

Add a loaded event handler for MainPage.xaml‘s LayoutRoot and add the code below to make a call to a WebClient and fetch the XML file.

  • We create a new instance of WebClient class
  • Invoke its OpenReadAsync function and specify the URL for your XML file
  • OpenReadCompleted calls client_OpenReadCompleted when the XML file at the specified URL has been downloaded
  • client_OpenReadCompleted has the code to parse the XML

 

 

Step 4. Parse the XML and store the data in the list `authors`

We earlier created a list `authors` to store the details of all the authors. We will use it now while parsing the XML.

  • The downloaded stream e.Result is stored in a Stream variable str
  • Next we create an instance of XDocument class and load the stream str in it and name it loadedData
  • We then iterate through all the descendants of the node author using a foreach loop
  • For each author we create a new instance of our class Author and add the values to it
  • We then add this Author object to our list `authors`
  • Finally we set the ItemSource of our ListBox to the list `authors`

authorlistbox.ItemsSource = authors;

Step 5. Create a Listbox to display all the authors using XAML

This ListBox will display the names of all the authors fetched from the XML file

  • We define the data template of the ListBox and a TextBlock to it
  • We bind the TextBlock with name. It is the same name which we used in our class Author
  • Give the ListBox some name, here we use authorlistbox

 

That’s all you need to do. Try deploying the app in the emulator and see how it works.

3

 

Suppose you have the XML stored locally in your app. Then you could use the following code to parse and display it.

Now that you have successfully displayed the content in a list box, lets try showing the count on ListBox_Selection_Changed. Most of the tutorials skipped this and I used to get struck here 😛
Get the full project source code here
Download full project source code XML-Parsing.zip

Vivek Maskara

I am pursuing BTech in Software Engineering from Delhi Technological University. I develop apps, create websites and blog about my app experiences.

  • Pingback: Parsing and displaying simple XML feeds in Windows Phone 8 app()

  • Hello, I’m using the above code to parse xml data with html content. A brief code given below

    Article c = new Article();

    c.title = item.Element(“title”).Value;

    c.author = item.Element(“author”).Value;

    c.content = item.Element(“content”).Value ;

    c.image = item.Element(“imagelink”).Value;

    articles.Add(c);

    In the xml there is a tag that contains HTML tags within. Doing c.content = item.Element(“content”).Value seems to remove all html tags from the content. Is there any workaround for this?

  • Adil Muhammad

    The URL is no longer working 🙁

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding
Close