Fetching Picasa Images through RSS in WP7

Today in this article we will discuss how to fetch feed from Picasa and display images from that RSS feed to your Windows Phone 7. This will not only clear the image feed mechanism in WP7, but will also help you to understand how to read RSS feed in Windows Phone 7 or in a Silverlight application.

After reading this article, you will be able to fetch any feed and display specific content in your application. Hope, this will help you. Don't forget to share it to your followers and if you have any query, drop a line below.

Background

In this article we will demonstrate the use of RSS in Windows Phone 7 application by a small demo application. To do this, we will use a public Picasa feed, which will return some public photos from the server.

This is how the feed "https://picasaweb.google.com/data/feed/base/featured?alt=rss&kind=photo&access=public&slabel=featured&hl=en_US" constructs:

<channel>

  <item>

    <enclosure type='image/jpeg'

               url='https://lh5.googleusercontent.com/-Eo4tmGXk/IRI_DSC7110%25252042.jpg'

               length='0'/>

We will use the loader control from our previous article "How to Create a Circular Loader using XAML?" If you didn't yet read the article, you can read it from the said link where I demonstrated the control development from scratch.

Begin with the Code

Here we will use the MVVM pattern. Create the default MVVM structure for your solution and add the Loader control to the project. Create the Model class "FeedItem" which we will use to construct the feed object from the RSS feed.

Now open the ViewModel and implement the INotifyPropertyChanged interface and the respective OnPropertyChanged event. Create a Property called "FeedItems" as shown below:

private ObservableCollection<FeedItem> m_feedItems;

public ObservableCollection<FeedItem> FeedItems

{

    get { return m_feedItems; }

    set

    {

        m_feedItems = value;

        OnPropertyChanged("FeedItems");

    }

}

In the constructor, create the instance of the feed collection, create an instance of the WebClient. We will use this instance to download the RSS feed asynchronously and populate the feed collection.

Here is the code snippet of that for your reference:

FeedItems = new ObservableCollection<FeedItem>();

var client = new WebClient();

client.DownloadStringCompleted += Feed;

client.DownloadStringAsync(new Uri((FeedUrl)));

In the "DownloadStringCompleted" event, construct the feed object from the RSS and add it to the feed collection. As we are constructing a basic image gallery, we need the image location only. Before constructing this step, read the original feed link and construct your feed item accordingly.

Here is our code for the sample:

private void Feed(object sender, DownloadStringCompletedEventArgs e)

{

    try

    {

        if (!e.Cancelled)

        {

            var xmlElement = XElement.Parse(e.Result);

            FeedItems.Clear();

            foreach (var feedItem in from value 

                                     in xmlElement.Elements("channel").Elements("item") 

                                     select value.Element("enclosure") 

                                     into xEnclosure 

                                     where xEnclosure != null 

                                           select xEnclosure.Attribute("url") 

                                           into xUrl 

                                           where xUrl != null 

                                           select new FeedItem { Link = xUrl.Value, })

            {

                FeedItems.Add(feedItem);

            }

        }

    }

    catch

    {

        // Ignore Errors

    }

}

Wrap it with a try {} catch {} block in case any exception.

Designing the XAML Interface

Our code is ready and now we need the user interface to display the proper image in the UI. Open the "MainPage.xaml" and in the ContentPanel add a ListBox to load the images. Our code will look as below:

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

    <ListBox Margin="0,0,-12,0" ItemsSource="{Binding FeedItems}" 

             DataContext="{StaticResource MainViewModel}" FontSize="30">

        <ListBox.ItemTemplate>

            <DataTemplate>

                <Grid>

                    <UserControls:Loader Width="100" Height="100"/>

                    <Image Source="{Binding Link}" Width="450" Height="350"/>

                </Grid>

            </DataTemplate>

        </ListBox.ItemTemplate>

        <ListBox.ItemsPanel>

            <ItemsPanelTemplate>

                <VirtualizingStackPanel />

            </ItemsPanelTemplate>

        </ListBox.ItemsPanel>

    </ListBox>

</Grid>

In the DataTemplate, we added the image control and on top of it we added the loader control. Loader control will display as long as the image is not loaded in the screen. Bind the image source properly to the proper link of the image.

Demonstration

Once you are done with the above step, our code is ready to run. Lets build the project and run it. This will load the application in the Windows Phone 7 emulator. Once loaded, it will give call to the feed and start animating the loader control. Once it retrieve the feed item from the server, it will load the image in the UI and hide the loader behind the image.

See the below screenshots where you will see it in action:

You can download the source code from the below link and run it in your PC:

• RSS Reader in WP7 (Source Code) - 29 KB

Hope this article was helpful to you to understand how the feed works and how to download a feed in Silverlight/WP7 application and populate the UI. Don't forget to leave your feedback. If you have any query, drop a line below and I will try to answer you as soon as possible.

Don't forget to share it to your friends and followers. If you liked this article, give a +1 to my work. Thank you for your time to read my articles. Keep following my blog for different articles on Silverlight, Windows Phone 7, LightSwitch and other .Net. I am also available on Twitter @kunal2383 and Facebook. Follow my Facebook page for regular updates.