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.

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:

privatevoid 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:

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

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

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

<ListBox.ItemTemplate>

<DataTemplate>

<Grid>

<UserControls:LoaderWidth="100"Height="100"/>

<ImageSource="{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:

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.

If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter, Facebook, Google+ and LinkedIn. I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

27
comments

I tried to rebuild the project once again. It worked fine. Most probably you might not have Expression Blend installed in your PC. As I am using it in XAML, it may be one of the reason. Try installing the trial, if you don't have it already. Please let me know, if I can assist you in any way.

Hi! It looks that the code downloaded is incomplete. Can you please make sure that the current coding is working? I will really appreciate if you come back to me with your feedback because i really have a bad time implementing an rss reader for fetching images. I will appreciate your help.

I think I got your problem statement. Looks like sometime the Picasa API(i.e. the feed URL) taking time to load. When it calls WebClient, it calls the URL asynchronously and downloads the feed. Wait in the screen for few minutes to check when it comes in the completed event. Also try browsing the feed URL and see how much time it takes to load the XML. Let me know.

Please give solution about how to combine both image and text(description) of any rss feed.......Plz reply fast i'm stuck with my code..i would use simple rss text technique and embed it with image binding link here is my code of XMAL part:

I will message you on this link http://www.kunal-chowdhury.com/2011/08/fetching-picasa-images-through-rss-in.htmlbut it shows an error so i catch u on fb..I have a question about this image feeds in wp7 i was working on wp7 and want to get Rss image with its text(Description) of that feed how could i do i use simple rss technique to get text with image but ot wasn't work plz check it out i am stuck reply soon my xaml code is:

I will message you on this link http://www.kunal-chowdhury.com/2011/08/fetching-picasa-images-through-rss-in.html but it shows an error so i catch u on fb..

I have a question about this image feeds in wp7 i was working on wp7 and want to get Rss image with its text(Description) of that feed how could i do i use simple rss technique to get text with image but ot wasn't work plz check it out i am stuck reply soon my xaml code is:

1. Can you check in debug mode whether the "Title" and "Link" properties are populating in "FeedItems" list?

2. Are you able to see the "Title" in the page but not the image? In that case, check out the image URL that you are getting in the "Link" property.

If all of the above are correct, share me the sample project where I can check out the actual issue. This will help me to come out with the solution. Upload the solution in "SkyDrive" and share me the downloadable link, but before that check out the above two points first.

I just checked out the solution. If you debug the code, you will get the image URL link and if you try to access the image url by coping it from the debugger screen, you will notice that, you don't have permission to access the image file from that server.

Issue: Access Denied - You don't have permission to access the image from that server.

Hope this helps. Nothing is wrong in the code but just the permission issue.

But if I remove the text portion part, don't call lstRSS item from RSSClass then image would show from the same uri no problem for getting image from the server.I think there is an error when I tried to bind both text and image in ListBox.(XAML Code)

About Me

Kunal Chowdhury is a Windows Platform Development MVP of Microsoft, a Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.