Silverlight Twitter client

BESUG organized a workshop on Silverlight 3.0 yesterday at the buildings of Boulevart in Schelle.  First of all, I like to thank the people of Boulevart for the nice welcome and all the catering they provided!! You can check out the pictures at

For the workshop, I’ve created a Silverlight Twitter client which shows some new features of Silverlight 3.0.  This application uses a WCF service which communicates with Twitter.  The following Silverlight 3.0 features are used in this application:

  • Resource Dictionary
  • ChildWindow and WrapPanel (from the Silverlight toolkit)
  • Blur effect
  • Behaviors
  • Out of Browser

You can download the source code here.

Working with physics in Silverlight

I’ve created a Silverlight application that makes a ball bouncing against the borders of a canvas using gravity and friction.  This is how it works:

Step1: create the user interface
I’ve created a new Silverlight project with Visual Studio 2010 and changed the root element of Page.xaml to Canvas.  After that I’ve created a usercontrol named Ball that contains an image and a storyboard.  The storyboard will be used as a timer.





Step2:  create a new Ball instance
After the main page is loaded I’ve created a new instance of the Ball class and added it to the surface on a certain position.

Step3: writing code for the bounce
I first created some global properties in the Ball class like xSpeed, ySpeed, gravity and friction.  These properties will be set in the constructor.  I also start the storyboard in this constructor.  The duration of this storyboard is 0.03 seconds.  So, the completed event will be executed about 30 times per second.  In the completed event, the current x and y position of the ball are increased with the xSpeed and ySpeed.  There is also a check if the ball collides with a border.  Finally I multiply the xSpeed and ySpeed with the friction and add the gravity to the ySpeed.  After this, the storyboard is restarted.

Step 4: add drag & drop 
In the last step I added drag & drop functionality.  First listen to the MouseLefButtonDown event and start the capture of the mouse.  In the MouseMove event the ball is moved to the position of the mouse and I calculate a new xSpeed and ySpeed which is depending on how fast you move the mouse.  In the MouseLeftButtonUp event I release the capture of the mouse and restart the storyboard so the ball can start bouncing again.







You can download the sample code from here.  Enjoy!

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

Silverlight tutorial: datagrid, chart, deep zoom and more…

The Belgian Silverlight User Group organises a workshop today. In the workshop we will create a small Silverlight application about the Belgian elections in 2007. The application will show the results from certain committees. This data is shown in a datagrid and in two charts. The application also has a deep zoom sections that dynamically positions images and can make a selection.


You can download the complete source code + the manual ( 21 pages !!! ) here. This rar file also contains the database and the database for the WCF services. The only thing you have to do is change the connectionstring in the web.config file.

Silverlight typewriter

You can create some nice text animations with Silverlight 2.0 and with very simple code.  I’ve created a simple typewriter simulator that displays the text character by character.

First, I’ve created a storyboard width a duration of 0.2 seconds and listen to the completed event.  The only other thing that I got in XAML is a <Textblock> element.

In my C# code, I save the text in a variable, clear the textblock and starts the storyboard.  Every time the storyboard is executed, I add a character from the variable to the textblock and starts the storyboard again.

This is a pretty simple example, but you can do very nice stuff with text when using a storyboard as a timer.  Click here to download the sample code.

The Silverlight lottery

Today is the big day for the Belgian Silverlight User Group.  This evening we are having our launch event!!!

There are some Silverlight books that will be distributed among the attendees with a lottery.  And what could we do better then build a virtual lottery in Silverlight 2.0.

The complete source code of this project is available here.  It especially shows how you can animate particles in a canvas and how to embed fonts.

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. 

 2M08 speaker

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!