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:

 

Shows Loader While Fetching Image from Server          Loader will disappear once the image downloaded          On Succesful load it shows the Images

 

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

  1. The code shows errors. Viewmodels not found or something. Need help!

    ReplyDelete
  2. 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.

    ReplyDelete
  3. 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.

    Thanks

    George
    giorgos23@gmail.com

    ReplyDelete
  4. Hi George, I just downloaded the code once again and it is running properly. Can you share me the error description, so that I can help you?

    ReplyDelete
  5. When I compile the source code, it seems to just hand on the splash screen. Any idea what could be wrong? I'm using sdk 7.1. thanks!

    ReplyDelete
  6. Kyle, run the app in debug mode and try to figure out the issue. In my case, it is working absolutely fine.

    ReplyDelete
  7. In debugging mode it stops right at FeedItems= new ObservableCollection(); on the MainviewModel.cs, and at the bottom left, all it says is ready. Like it's waiting for something...

    ReplyDelete
  8. Hi Kyle,

    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.

    ReplyDelete
  9. Just want to ask, what should I change if I want to fetch rss with normally text but not image? THX!

    ReplyDelete
  10. Great example.
    But how to adapt it so it only draws images from certain predefined category?

    ReplyDelete
  11. How to make it to draw images from certain (predefined) category from the feed ?

    ReplyDelete
  12. Unfortunately that is not available in Picasa as the RSS url points to featured photos.

    ReplyDelete
  13. but I meant for any other RSS feed
    like the one I am asking currently : http://www.zimo.co/feed/

    feed has many categories. some are permanent, some change
    Is it possible to make a filter, to draw pictures from a predefined category? (1 category at a time)

    ReplyDelete
  14. 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:

    ReplyDelete
  15. 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:

    ReplyDelete
  16. Hi Umar,

    The error is due to the XAML tags that this platform doesn't understand. Hence to put a XAML tag like this: "<TextBox/>, you have to enter this: "&lt;TextBox/&gt;".

    ReplyDelete
  17. 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:

    <ListBox Name="lstRSS" ItemsSource="{Binding FeedItems, Mode=TwoWay}" DataContext="{StaticResource MainViewModel}" FontSize="30" Grid.Row="1">
    <ListBox.ItemTemplate>
    <DataTemplate>
    <Grid Height="700">
    <TextBlock Text="{Binding Path=Title}"></TextBlock>
    <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>

    ReplyDelete
  18. Hi Umar,

    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.

    ReplyDelete
  19. Here is the download link to my code file please check it out...
    http://dl.dropbox.com/u/45032220/RssReader.zip

    ReplyDelete
  20. Hello Umar,

    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.

    Regards,
    Kunal

    ReplyDelete
  21. 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)

    ReplyDelete
  22. Hello Umar,

    As I mentioned, that's not at all the issue. The main reason behind this issue is: "The image itself is not browseable due to server restriction."

    I also tried by removing the Title text as mentioned by you but that didn't work there too due to Security Restriction.

    ReplyDelete
  23. Could you help me in getting both image and title of RSSFeed I am Stuck :(

    ReplyDelete
  24. Hi Umar,

    No one can help you on this unless you resolve the "Access Issue" of that server. If you don't have direct access to the server, switch to a different RSS feed.

    ReplyDelete
  25. NO issue in Access Images, e are visible to me when i don't call title of the image........

    ReplyDelete
  26. I can't test it out here as I am getting "Access Denied" message from the server. In such case, you have to check it out from your side only my dear friend.

    ReplyDelete


 
© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top