skeevs

I downloaded the development toolkit for Windows Phone 7 as soon as I read about it’s release.First few thoughts was that I should’ve invested way more time into Silverlight development prior to this. The fact is : every Silverlight developer is now a Windows Phone developer!

My first step was to attempt converting photogger into Silverlight. Concept of photogger is simple : it pulls a users photo’s from flickr, and then renders it in polaroid style.

The concept is similar for this : Pull the data via flickr’s API, and then render the photo’s in a list box (polaroid style). The short demo code posted by ScottGu was really helpful in which I based it on.

To implement the ‘polarized’ photo:

• define the listbox’s item template with a StackPanel that contains an Image and a TextBlock control
• bind the control’s properties to the class’ properties, eg. {Binding Title}

<ListBox Grid.Column="0" Height="521" HorizontalAlignment="Left" Name="listBox1" VerticalAlignment="Top" Width="476">
	<ListBox.ItemTemplate>
	<DataTemplate>
		<StackPanel Orientation="Vertical" Height="200" Width="240" Background="White">
			<Image Source="{Binding ImageSource}" HorizontalAlignment="Center" Height="160"  VerticalAlignment="Top"  Margin="5,3,5,0"/>                        
			<TextBlock Text="{Binding Title}" HorizontalAlignment="Center" TextWrapping="Wrap" Margin="40,0,40,0"  Foreground="Black" FontFamily="Courier New" FontSize="18" FontWeight="Bold"/>                        
		</StackPanel>                    
	</DataTemplate>
	</ListBox.ItemTemplate>
</ListBox>

Next, we define a class that will contain the data returned from the flickr API, based on the attributes and URL documentation. The ImageSource property will format the property values and construct the URL to the photo.

public class Photo
{
	public string Id { get; set; }
	public string Secret { get; set; }
	public string Server { get; set; }
	public string Farm { get; set; }
	public string Title { get; set; }

	public string ImageSource
	{
		get
		{
			return String.Format("http://farm{0}.static.flickr.com/{1}/{2}_{3}_m.jpg",Farm,Server,Id,Secret);

		}            

	}
}

We’ll use the WebClient class to make the actual call to the flickr API.Note that the WebClient call in Silverlight is asynchronous. So to keep the code simple, we’ll just chain 2 requests via the WebClient class(2 requests is necessary at the moment):

1. Retrieve the user’s actual flickr user id, which is a long string of alphanumerics.
2. Retrieve the user’s stream of photo’s by passing in the search parameters and user id.
3. Parse the XML data returned from flickr, and populate a resultset using LINQ for XML.
4. Bind the ListBox’s ItemSource property to the resultset.

(I’m sure there’s a better way of doing this, but it’s for the sake of simplicity)

private void ClickMeButton_Click(object sender, RoutedEventArgs e)
{
	WebClient flickr = new WebClient();
	// get flickr id first
	flickr.DownloadStringCompleted += new DownloadStringCompletedEventHandler(flickr_getUserName);
	flickr.DownloadStringAsync(new Uri("http://api.flickr.com/services/rest/?method=flickr.urls.lookupUser&api_key=ca082c27ada9e92cda462404588f1c39&url=www.flickr.com/photos/" + UserName.Text));
}

void flickr_getUserName(object sender, DownloadStringCompletedEventArgs e)
{
	if (e.Error != null)
		return;

	XElement xmlUser = XElement.Parse(e.Result);
	string userid = xmlUser.Element("user").Attribute("id").Value;
	WebClient flickr = new WebClient();

	flickr.DownloadStringCompleted += new DownloadStringCompletedEventHandler(flickr_getData);
	flickr.DownloadStringAsync(new Uri("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=<YourFlickrAPIKey>&user_id=" + userid + "&per_page=15&sort=date-taken-desc"));
}

void flickr_getData(object sender, DownloadStringCompletedEventArgs e)
{

	if (e.Error != null)
		return;

	XElement xmlPhotos = XElement.Parse(e.Result);
	listBox1.ItemsSource = from p in xmlPhotos.Descendants("photo")
			select new Photo
			   {
				   Id = p.Attribute("id").Value,
				   Secret = p.Attribute("secret").Value,
				   Server = p.Attribute("server").Value,
				   Farm = p.Attribute("farm").Value,
				   Title = p.Attribute("title").Value
			   };
}

This is the end result:

Source code for this sample project can be downloaded here : WP7FlickrPolarized.zip