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 http://gallery.expression.microsoft.com/FlickrGallery