Path Animation in Silverlight

I’ve been spending some time working on prototyping some things I want to get working for a game I’m developing, and one thing I wanted was to get a couple of fly’s flying (buzzing?) around a lightbulb.

Ideally I wanted to draw a path and say – Fly – use this path and follow it until the end of time! Turns out in WPF I could do this, but not so in Silverlight. Everything I saw explaining how to do it, involved working out complex (to me) equations to get the motion correct, or using a set of key frames in a storyboard. Neither of which sounded great to me.

I am doing this game in Silverlight 4, and that’s when it struck me – what about the PathListBox? I can put the Fly onto the PathListBox, animate the StartPoint to 100, set the repeat behaviour to ‘Forever’ and get a (moderately) decent path motion…

First things first, take my Fly


and convert it to a user control.


Cunningly named:


After that, time to draw my path:


aaaand, convert that bad boy to a Layout Path:


This automatically creates a PathListBox (sweet):


To which I then drag my Fly!


I then create a new storyboard (called ‘FlyAnimation’):


Animate the ‘StartPoint’ property at ‘6 seconds’ to be 100%:


And then set the repeat behaviour to be Forever:


F5 and hmmm nothing…

Oops, forgot to start the storyboard! So, hunt for the ‘ControlStoryboardAction’:


Drag it onto the Fly control:


And set the properties to begin the storyboard on Load:


Press F5 and bask in path animation glory!

Caveat – I’m not 100% sure this is the best way to do this, but it worked alright for me!

PS. You might want to set the Stroke and Fill properties of your Path to be transparent, otherwise it looks a bit monorail like :)

Print | posted @ Tuesday, September 21, 2010 3:17 AM

Comments on this entry:

Gravatar # re: Path Animation in Silverlight
by joaquin at 5/15/2012 8:35 AM

Thank you for the tutorial =)
Gravatar # re: Path Animation in Silverlight
by Greg Gum at 6/4/2012 9:52 AM

Thanks for this toutorial on Path animation. There is very little on this out there, even on

This is another helpful link to a Silverlight TV episode where they cover this topic in detail:
Post A Comment