Over a million developers have joined DZone.

Windows Phone Silverlight Animation for Beginners

· Mobile Zone

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 located the TextBlock element in the XAML view and replaced it with the following:

<StackPanel>
    <TextBlock FontSize="50"
               Text="Hello, World!" />
    <Ellipse Fill="Red"
             Height="150"
             Width="300"
             Name="FirstEllipse" />
</StackPanel>

When I run the application it looks like this:

snip1

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:

<Button Height="150"
        Width="300"
        Name="FirstButton"
        Content="Click" />

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:

    if (FirstButton.Content as string == "Click")
    {
        FirstButton.Content = "Click Again";
    }
    else
    {
        FirstButton.Content = "Click";
    }

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:

Click="FirstButton_Click" />

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:

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="FirstStoryBoard">
            <DoubleAnimation Storyboard.TargetName="FirstEllipse"
                             Storyboard.TargetProperty="Width"
                             To="1"
                             AutoReverse="True"
                             Duration="00:00:01" />
        </Storyboard>
    </StackPanel.Resources>
    <TextBlock FontSize="50"
               Text="Hello, World!" />
    <Ellipse Fill="Red"
             Height="150"
             Width="300"
             Name="FirstEllipse" />
    <Button Height="150"
            Width="300"
            Name="FirstButton"
            Content="Click"
            Click="FirstButton_Click" />
</StackPanel>

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:

FirstStoryBoard.Begin();

When I run the application now, I have a nice little animation.

Relatively easy, even for a beginner like me.

 

To be continued…


Source: http://andreahaubner.blog.com/2011/02/11/my-first-animation-in-silverlight/



Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}