Flash to Silverlight
- Home
- |
- Get Started
- |
- API Guide
- |
- Community
You do Flash and now you want to add Silverlight to your skillset?
You've come to the right place.
Remove and Add the Ball Control
This is page 3 of Storyboard Animation tutorial in the Getting Started series. As an introduction to Silverlight, this tutorial walks through animating objects with Storyboards.
Cleaning up After Itself
Since we will be adding controls to the screen based on the MouseMove event, there is a good chance we will end up with a large amount of objects. When the ball control fades away, we can have it remove itself once it has disappeared from view.
Similar to the method used in the Flash example, we will have the parent container remove each instance once it has finished animating.
We’re going to take this opportunity to go under the covers of the artboard and take a peek at the XAML below. With the “ball.xaml “ file open, change to Split view using the button in the upper right corner of the artboard.
Navigate to the Storyboard element, which should be around line 11, and add a "Completed" attribute so the element reads like the following:
Open the “ball.xaml.cs” file and add the following code after the constructor "public ball" method:
{
public ball()
{
InitializeComponent();
}
void fadeAwayCompleted(object sender, EventArgs e)
{
((Panel)Parent).Children.Remove(this);
}
}
Add the Code to the MouseMove Handler
In “MainPage.xaml” select LayoutRoot and in the Properties panel add an event handler for the MouseMove event. Make sure to select the Event button with the lightning bolt icon if you can’t find the MouseMove event.
Place the following code in the new LayoutRoot_MouseMove event handler:
Canvas.SetLeft(b, e.GetPosition(this).X);
Canvas.SetTop(b, e.GetPosition(this).Y);
LayoutRoot.Children.Add(b);
Before running the project to see your work, switch back to “MainPage.xaml” and in the Objects panel, right-click LayoutRoot. From the context menu, select Change Layout Type > Canvas.
Hit F5 to Run the application and you should be greeted with the following:
Pages 1, 2, 3
Now we have a nice predictable way to animate objects. But what about animations with random values or dependencies on other objects?
Let’s look at the Procedural Animation tutorial next.