Mobile applications are rarely totally self-contained - they often need to use data from various online sources. In this blog post we’ll describe how to pull XML content from a RSS feed and show it in a ListBox container. This is nothing new, so we’ll try to spice it up a bit by adding a simple loading screen that is shown to the user while the XML data is being downloaded and parsed.
Look at the three screenshots below to see what I'm trying to achieve. Image 1 is just an ordinary splash screen that is shown when the application is started. Image 2 shows the loading progress screen that is displayed when the main page is initialized. Once the loading process is complete, a user gets a list of blog post titles taken from the Windows Phone Developer Blog’s RSS feed. This is shown in image 3.
To get started, simply create a new Silverlight for Windows Phone project in Visual Studio. Before any code is written, make sure you have NuGet installed. Check this by selecting Tools and then Extension Manager. Our loading screen will be using Silverlight Toolkit control because it’s less resource demanding then the standard control. Add Silverlight Toolkit to your project by right clicking on your project in the Solution Explorer and selecting Manage NuGet Packages. Search online for Silverlight Toolkit.
Once that is done, we can get start writing some code. First open MainPage.xaml and add a line shown in image 4 as a phone:PhoneApplicationPage attribute. This makes controls from Silverlight Toolkit available to your application.
The XAML we need to add is shown in image 5. All the content inside LayoutRoot needs to be wrapped by a new grid, which we named grdMain. In the Content Panel grid we are adding ListBox control named lstBlogPosts. That is our main content grid. Below it we need to add grdLoading, a grid that’s also full screen and contains a loading progress bar. We are using Rectangles transparency to be able to see through our Loading grid. We need to use a StackPanel to center our progress bar and aTextBlock. PerformanceProgressBar contains two attributes I would like to emphasize, IsIndeterminate and Foreground. The first one turns the progress bar on or off. Foreground sets the color of the progress bar, which in this case is the opposite color of the main background color.
Now, let’s take a look at our code behind. We’ll try to keep things simple, so in our constructor, which is shown in image 5, we’ll start by setting application and page titles. The code following that dims the main page and makes the loading screen visible. Since we used a transparent background for our loading screen, this gives a nice effect and notifies the user that our application is preparing data to be shown on the next screen. Finally, we can start downloading our XML content from the online source. We are using WebClient, but I’ll also mention HttpWebRequest as an alternative.
Image 7 shows event handler that triggers on completing our XML download. We are using LINQ statement to parse our XML and populate the ListBox with ListBoxItems. We are also adding a TextBlock as a content inside each ListBoxItem, and setting its text value to our blog post title. Here we can do a bit of styling by wrapping the text and setting the padding around it, so it looks a bit nicer. After everything is done, we can turn off the progress bar, make our main page fully visible, and hide our loading screen.
That’s it! Now we have made a simple application that can easily evolve into a fully functional Windows Phone app. To conclude this article, here are some tips you should consider if your application is accessing data over the network:
- Notify the user that your app is downloading content over the network
- Make sure you are downloading only fresh content, and not the same content every time your app starts
- Check networks availability
- Check if content is available
- And finally, download data only when the app starts, and not every time you navigate to your main page