My first Animation in Silverlight
Today I read something very cool. Even for beginners like me it is relatively easy to use animations in an application.
To see how, I quickly created a new project with just a text block. Then I am locating the TextBlock element in XAML view and replacing it with the following:
When I run the application it looks like this:
It looks nice, but it doesn’t do anything. So the next thing to do is adding a button element in XAML view right after the <Ellipse /> tag:
I now have a button called “FirstButton”, so that I can access that button from code. I also have set some properties, like the size of the button and the content.
In order to make something happen I need to add a click event handler. I do that by double clicking on my button in Design view.
Inside that event handler I add this code:
When my button is clicked, the text that is displayed on my button toggles between “Click” and “Click Again”.
When I look at the XAML now, I can see that the Click attribute was added:
Now I want to add a simple animation that squeezes the Ellipse and then expands it back out.
Now this is just a very simple example of an animation. If you want to know more about animations you can check out this Animation Overview.
To create an animation I need to do three things:
1. Create a StoryBoard (more info here)
2. Create the animation
3. Add code to start the animation.
A StoryBoard in a Silverlight application is a resource that contains a collection of animations, each of which targets a specific property of a control.
What I have to do now is replacing the existing StackPanel in XAML view with the following XAML:
This XAML creates a StackPanel.Resource that contains a StoryBoard Element. It is named FirstStoryBoard so that I can access it in code. Basically the animation changes the Width property of the Ellipse. The Storyboard.TargetName specifies the FirstEllipse object. The Storyboard.TargetProperty specifies the Width property on the Ellipse. The To property is set to 1, that means the Width will shrink from its current value of 200 down to 1. Setting the AutoReverse property to “True” will let the animation go back to the beginning and it can start again when the button is clicked again. The Duration is set to one second.
To start my animation I need to call the Begin method on the StoryBoard. I do that by adding this line of code inside my click event handler:
When I run the application now, I have a nice little animation.
Relatively easy, even for a beginner like me.
To be continued…
Smart about (Smart-) Phones 
No trackbacks yet.