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
Approach
- Call Flickr Service
- Parse XML feed
- 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.
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
Parsing Image Feed of Flickr Service
When you open public feed URL of Flicker in browser; you can view the feeds in browser itself.
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,
Then in DonwnloadStringCompleted event, we will have to perform below tasks,
- Create a Observable collection of Photos
- Parse the Feed
- Iterate through all the public image url in feed and add to collection.
Parsing of feeds can be done as below,
- We are parsing Link URL.
- Fetching the value of href attribute in Link URL.
- There are two link elements and we are fetching value of link element having rel attribute value as enclosure
Design the Page
We are going to put a ListBox in content grid and inside ItemTemplate of ListBox , we will put Image control.
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
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
I hope this post was useful. Thanks for reading
16 responses to “Viewing Flickr Images on Windows 7.1 Phone or Mango Phone”
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..
[…] Read original post by Dhananjay Kumar at Debug Mode […]
[…] Read original post by Dhananjay Kumar at Debug Mode […]
[…] You can read full article Viewing Flickr Images on Windows 7.1 Phone or Mango Phone […]
[…] Viewing Flickr Images on Windows 7.1 Phone or Mango Phone […]
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.
I am genuinely thankful to the owner of this website who has shared
this fantastic post at here.
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.
It was a very good posting as usual mate
thanks for this. Really helped me. 🙂
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.
Glad it was useful.
Thanks
/DJ
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 😉
WOW just what I was looking for. Came here by searching for
the quinn
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.
Like, spineworld, club penguin, habbo.. ( im
getting tired of them! ).