New tutorial: a Silverlight 3 Flickr gallery

I’ve created a user control that shows images from Flickr in a circle.  You can enter a search string and the user control will return the results for this search.  The results are shown in textblocks that are positioned in a circle using some basic goniometry.  If the mouse enters a textblock the image is shown in the centre of the circle.  All the images are preloaded after you entered your search string.









I started with creating the user interface with Expression Blend.  This is just a user control with a textbox, progressbar and a button.  In the user control I also have a canvas that contains an image control.

In the second step I used the Flickr webservice.  The code I’ve used to call the Flickr service is from Brad Abrams blog.  When the service is called I make a clipping mask with an ellipse and the image element.

The third step was to create a textblock for each image that was returned from the webservice and position the textblocks in a circle.  To do this I calculated the x and y position from the angle and radius.  For example:  x = Math.cos(angle * position * 0.0174532925 ) * radius.  I need to multiply with 0.0174532925 because the Math.cos method works with radians instead of degrees.  When I create the textblocks I also preload the images.

After all the images are preloaded I show the textblocks and you can scroll through the images by entering a textblock with the mouse.

You can download the complete source code from


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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

%d bloggers like this: