John Mendez

This post will show how to go about reusing the same storyboard in Silverlight 3. In this case I will be reusing the same Storyboard animation to make 3 ellipses grow and shrink.  Each Ellipse will start at 50 x50 and grow to 75 x 75 then go back to 50 x 50 depending if the mouse has entered or left the element.  As for most of the time with me, this post is a concept and not part of a full solution.  However, I am using this concept in a solution I am currently working on.  Ok, so let’s go about accomplishing this.

First off we need to have our Storyboard created.  For the interest in time I will not step through how to create it in Expression Blend 3.  Although this storyboard is not too complicated and could be made just by writing the XAML itself.

The most important item to recognize here is that I do not specify the Storyboard.TargetName in the DoubleAnimationUsingKeyFrames.This will be specified in the code behind. This is the main component to resuing our StoryBoard.

Next I put 3 Ellipse elements on the UserControl.  The XAML is as follows:

The important item to recognize here is that all of the Ellipse elements share the same MouseEnter and MouseLeave events (MouseEnter="Item_MouseEnter" MouseLeave="Item_MouseLeave").  Also note that each Ellipse has its own x:Name.

Now for the code behind in our UserControl.  I will only show you the events as this is pretty much just an empty user control.

In the code above, you’ll notice you need to cast the sender object as whatever object is sending in the event. In our case this is an Ellipse.  Second, you’ll see we need to use the SetValue() method and give the StoryBoard it’s StoryBoard.TargetName property and set that value to the Name of the Ellipse sending in the event.

Another important note is to make sure you start and stop the storyboards.

And this is it.  With this you get to reuse a storyboard animation in Silverlight for the same object, with minimal amount of code. Good luck with your solution!

Silverlight silverlight