Simple Animation in Silverlight 4

Here is the output of the animation I am going to demonstrate here:



On every left button click a new shape in the form of star with different color is displayed.

Open Expression blend 4 and create a new project.

Set the height and width property to auto.

Now add a new usercontrol and name it star.xaml.

In this new control add a shape in the form of star from the Assets->Shapes tab. Drag the shape to upper left corner of the control like this:



Now set the visible property to Collapsed. Now we will build a new storyboard. In this storyboard, set the key frame to 1 second and set visible property to visible for the shape.

We are done with the storyboard. Now, we will add a trigger to this user control. From the behavior tab, select "ControlStoryboardAction" and drag it into the layout. In the properties panel of this trigger set the event name to "Loaded" and Storyboard to the just created one.
Now we move to code behind of this control. Write the following code for random color of the star.

Random rnd=new Random((int)DateTime.Now.Millisecond);
SolidColorBrush sb=new SolidColorBrush(Color.FromArgb((byte)rnd.Next(0,255),(byte)rnd.Next(0,255),(byte)rnd.Next(0,255),(byte)rnd.Next(0,255)));
regularPolygon.Fill=sb;

Here regularPolygon is the name of the shape.

That's the work needed in this control and we now move to the other control "MainPage.xaml".

In the MouseLeftButtonDown event of the LayoutRoot we have this code:

private void l1_mouseenter(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    // TODO: Add event handler implementation here.                 
    star s = new star();
    Canvas.SetLeft(s, e.GetPosition(this).X);
    Canvas.SetTop(s, e.GetPosition(this).Y);
    LayoutRoot.Children.Add(s);
}

We are initiating the other usercontrol and setting its position to the mouse click.

That's it.