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

2M08: lab available

I finally finished a new tutorial on Silverlight 2.0.  This tutorial will be used in my workshop at Multi-mania [2M08] tomorrow. 

 

In this tutorial, I build a small application that uses a webservice that gets data about our environment and shows the results in a chart.  The application also uses layout controls, animations, styles and templates.

You can download the lab manual, a start and finished project here. I hope you enjoy it!

Weather forecast tutorial: part2

Here is the second part of my weather forecast tutorial.  In this part I focus on creating new styles for controls using Expression Blend and xaml.

• The pdf file ( 379 kb )
• The source code ( 1.14 MB )

Weather forecast tutorial: Part1

In this tutorial, I will create a small weather forecast application that consumes two webservices.  the first service offers an overview of cities in the USA and the second returns the weather forecast for that city.

The first part of this tutorial shows how you can consume serveral services in Silverlight 2.0.  In the second part, I will show how you can use styles and templates to create an attractive user interface.  The second part should be available by the end of this week.

• the pdf file ( 261 kb )
• the source code ( 1,12 MB )

If you want to know more about data and communications with Silverlight, you can download a hands – on lab from http://silverlight.net/learn/labs.aspx