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

How to integrate a Toolkit or Third party SDK with windows phone app using NuGet Package Manager

Toolkit provides the developer community with new components, functionality, and an efficient way to help shape product development. Certain controls and features are not provided by Microsoft for which we basically use Third party SDK.

We can integrate them with our project in a easy way with the help of NuGet Package Manager. Here are certain steps which needs to be followed for adding a toolkit or Third Party SDK.

1. There are two ways by which you can open the NuGet Package Manager window in your app.

Method 1

First one is to go to the menu bar and click on Project->Manage NuGet Packages

Method 2

Second way is to go to the Solution Explorer Window and right click on the project name and Choose Manage NuGet Packages.

2. Then the following screen appears before you.

3. Here you can search online for the toolkit or the SDK you wish to add and install it easily. For example I wish to add Windows Phone toolkit I can easily do it through this method.

4. Another method to install a SDK or toolkit is by directly adding their .dll file in the project. We can do this by going to Solution explorer window.

Then go to the References option given under the project . Right click on it and then choose the option add reference.


Then the following windows will appear before you.

Here you can add the extension dll files or you can choose it from your computer with the help of Browse option.

5. If you face any error while installation of the toolkit or SDK. The possible error might be that your NuGet Package is not up to date. You need to update the NuGet Package Manager before you add any toolkit or SDK. You can easily update it by going on the header menu and Choosing Tools->Extensions and Updates.

6. Then choose the update option in the Window that appears before you and see whether your NuGet package Manager is up to date or not.


In the above Windows there is no update for NuGet Package Manger.

How to change the App name and Tile name of your Windows phone app

1. After opening your project you can go to the Solution explorer window given on the right hand side as shown below.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.  Choose the properties option in the list given in the solution explorer.


 

 

 

 

 

 

 

 

 

 

 

 

3. Then under the properties menu click on WMAppManifest.xml.

4. The following window will appear before you.

Note: The window displayed will be different for different versions of Visual Studio. The one displayed below is for Visual Studio 2012


 

5. Now you can see the Display Name option. It is the name of your windows phone app by which it will be known in the windows phone market. You can change it accordingly. By default the name of the project is the name of the app.


6. By using Tile Title option you can change the title of your application tile that will be pinned to start screen.


 

7.  I hope this post will be helpful to you.

How to create your first Windows Phone app

Getting started with app development is the toughest part. There are chances that you may not find the right resources or end up getting struck on the most basic things. Sometimes tutorials don’t cover what they feel is obvious. We will be assuming in each of our articles that this topic is completely new for you. That way experienced developers could skip some steps while beginners won’t miss out the basics.

1. First of all create a new blank project and name it myfirstapp.

 

 

2. Then the following screen appears before you.

 


 

3. Then change the name of the application from my application to myfirstapp and page name to first page in Xaml code as shown below.

 


 

4. Then drag a Button control and Textblock control from the toolbox given on left hand side.

 


 

5. After that the following screen appears before you.

 


 

6. Now give a name to the Textblock that is myblock in xaml window.

 


 

Code:

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>

<TextBlock x:Name=”myblock” HorizontalAlignment=”Left” Margin=”111,56,0,0″ TextWrapping=”Wrap” Text=”TextBlock” VerticalAlignment=”Top” Height=”48″ Width=”230″/>

<Button Content=”Button” HorizontalAlignment=”Left” Margin=”127,367,0,0″ VerticalAlignment=”Top” Width=”201″/>

</Grid>

 

7. Now double click on the button you created. The following screen will appear before you.

 


 

8. Add the following code in the Button_Click_1 event handler function.

 

Code:

myblock.Text = “Hello world”;

 

9. Now the page will have the following view.

 


 

10. Now click on the Emulator option given in the header menu.

 


 

11. If the emulator is not starting you can choose any other option from the list.

 


 

12. After the emulator has started and you can click on the button in your app.

 

11

 

13. You will see that the text of textblock has changed to Hello world.

 

12

 

14. You have successfully created your first application. You can get the project zip from the link below.

 

Download full project