Viewing Flickr Images on Windows 7.1 Phone or Mango Phone

In this post I will show you how you can create a Photo Viewer from images of the Flickr Service.

Flickr Service

Flickr expose a REST based feed to access images. You can find information about Flickr public feed at below link.

http://www.flickr.com/services/feeds/docs/photos_public/

Public images feed can be find at

http://api.flickr.com/services/feeds/photos_public.gne

Expected Output

imageimage

Approach

  1. Call Flickr Service
  2. Parse XML feed
  3. Bind it to List Box.

Create Windows Phone 7.1 Application

Create Windows 7 Phone Application and select Windows Phone 7.1 as target Windows Phone version.

clip_image002

clip_image003

Create Photo class

To bind images to the ListBox, let us create Photo class. Right click and add a class called Photo in the project. When we parse Flickr Image feeds, we will bind public Image URL here

Photo.cs

clip_image005

Parsing Image Feed of Flickr Service

When you open public feed URL of Flicker in browser; you can view the feeds in browser itself.

clip_image007

We are going to give value of link element from the feed in Image as source value.

We will have to make asynchronous calls as below,

image

Then in DonwnloadStringCompleted event, we will have to perform below tasks,

  1. Create a Observable collection of Photos
  2. Parse the Feed
  3. Iterate through all the public image url in feed and add to collection.

image

Parsing of feeds can be done as below,

  1. We are parsing Link URL.
  2. Fetching the value of href attribute in Link URL.
  3. There are two link elements and we are fetching value of link element having rel attribute value as enclosure

image

Design the Page

We are going to put a ListBox in content grid and inside ItemTemplate of ListBox , we will put Image control.

clip_image001

As source of the Image you need to bind PhotoSource property of Photo class.

For Reference full source codes are given below. Feel free to use for your purpose  Smile

MainPage.xaml


<phone:PhoneApplicationPage
    x:Class="FlickerImageFeed.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Mango Phone" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Flicker Images" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox x:Name="lstImage" Width="450" Margin="3,6">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding PhotoSource}"
                                   Width="425"
                                   Height="auto"
                                   Stretch="Uniform"
                                   HorizontalAlignment="Center" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows.Media;
using Microsoft.Phone.Controls;
using System.Collections.ObjectModel;
using System.Windows.Media.Imaging;
using System.Xml.Linq;

namespace FlickerImageFeed
{
    public partial class MainPage : PhoneApplicationPage
    {

        IEnumerable<List<string>> imageURL;
        List<string> lstImageURl;
        Photo P;
        ObservableCollection<Photo> photos;
        public MainPage()
        {
            InitializeComponent();
            GetAllPhotos();
        }

        private ImageSource GetImageSource(string fileName)
        {
            return new BitmapImage(new Uri(fileName, UriKind.Absolute));
        }
        private void  GetAllPhotos()
        {

            WebClient proxy = new WebClient();
            proxy.DownloadStringAsync(new Uri("http://api.flickr.com/services/feeds/photos_public.gne"));
            proxy.DownloadStringCompleted += new System.Net.DownloadStringCompletedEventHandler(proxy_DownloadStringCompleted);

        }

        void proxy_DownloadStringCompleted(object sender, System.Net.DownloadStringCompletedEventArgs e)
        {
            photos = new ObservableCollection<Photo>();
            lstImageURl = new List<string>();
            imageURL = ParseXML(e.Result);
            foreach (var r in imageURL)
            {
                foreach (var a in r)
                {
                    P = new Photo { PhotoSource = GetImageSource(a.ToString()) };
                    photos.Add(P);
                }
            }

            lstImage.ItemsSource = photos;

        }
        private IEnumerable<List<string>> ParseXML(string xmlData)
        {
            XNamespace ns = "http://www.w3.org/2005/Atom";
            XDocument doc = XDocument.Parse(xmlData);
            var photo = from r in doc.Descendants(ns + "entry")
                        select r.Elements(ns + "link")
                        .Where(f => (string)f.Attribute("rel") == "enclosure")
                        .Select(f => f.Attribute("href").Value).ToList();
            return photo;
        }
    }
}

Run the Application

Press F5 to run Photo viewer from images of Flicker service Smile

imageimage

I hope this post was useful. Thanks for reading  Smile

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

16 responses to “Viewing Flickr Images on Windows 7.1 Phone or Mango Phone”

  1. hi i am novice to WP7 ,thank you very much for your good post,
    sir,i am not able to see any image in my simulater,i just copied ur code only..

  2. […] Read original post by Dhananjay Kumar at Debug Mode […]

  3. […] Read original post by Dhananjay Kumar at Debug Mode […]

  4. […] You can read full article Viewing Flickr Images on Windows 7.1 Phone or Mango Phone […]

  5. […] Viewing Flickr Images on Windows 7.1 Phone or Mango Phone […]

  6. Hello! Someone in my Myspace group shared this site with us so I came to give it a look.

    I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers!
    Superb blog and great design and style.

  7. I am genuinely thankful to the owner of this website who has shared
    this fantastic post at here.

  8. I’m not sure exactly why but this blog is loading extremely slow for me. Is anyone else having this problem or is it a problem on my end? I’ll check back later
    and see if the problem still exists.

  9. It was a very good posting as usual mate

  10. thanks for this. Really helped me. 🙂

    1. Glad it was useful.

      Thanks
      /DJ

  11. The people behind Flickr are crazy about creating new ways of organizing photos and video and making it easy for users to organize and store their precious digital memories. As a user, you can allow all your contacts and friends to comment on your photos and even reorganize them.

  12. Glad it was useful.

    Thanks
    /DJ

  13. I must thank you for the efforts you’ve put in penning this website. I’m hoping to
    see the same high-grade content from you later on as
    well. In truth, your creative writing abilities has inspired
    me to get my own website now 😉

  14. WOW just what I was looking for. Came here by searching for
    the quinn

  15. Your style is very unique compared to other people I have read stuff from.
    Many thanks for posting when you’ve got the opportunity, Guess I will just book mark this site.

  16. Like, spineworld, club penguin, habbo.. ( im
    getting tired of them! ).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s