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.