Mobile Zone is brought to you in partnership with:

I’m a passionate software developer. I was born in Québec, Canada. I work at Mirego; a company specializing in mobile applications. I am the Windows Phone and Windows 8 specialist. My friends describe me as a Microsoft Evangelist. I love C# programming with Visual Studio, the .NET Framework, the Windows Phone and the Windows 8. When I’m not in front of a computer, my hobbies include playing bridge, poker and other card games, biking, reading technology news. Sébastien is a DZone MVB and is not an employee of DZone and has posted 9 posts at DZone. You can read more from them at their website. View Full User Profile

Create a Simple Animation in Your Windows Phone App

08.27.2012
| 4261 views |
  • submit to reddit

Creating animations in your Windows Phone application is easier than you think.

I created a simple application that shows how to create a static animation and a dynamic animation. Both animations fill the following red rectangle from the bottom to the top.

image

Static animation

An animation uses a Storyboard object. It is usually created in the XAML file, because it is easier this way. Here is the XAML code:

<phone:PhoneApplicationPage x:Class="SimpleAnimationApp.StaticAnimationPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone">

    <phone:PhoneApplicationPage.Resources>

        <Storyboard x:Name="staticAnimation">

            <DoubleAnimation Duration="0:0:5"
                             To="700"
                             Storyboard.TargetProperty="Height"
                             Storyboard.TargetName="rectangleRed" />

        </Storyboard>

    </phone:PhoneApplicationPage.Resources>

    <Grid>

    <Rectangle Fill="Blue"
               Height="700"
               Width="100"
               VerticalAlignment="Bottom"/>

    <Rectangle Fill="Red"
               Height="0"
               Width="100"
               VerticalAlignment="Bottom"
               x:Name="rectangleRed"/>

    </Grid>

</phone:PhoneApplicationPage>

The DoubleAnimation is the simplest animation available, it animates a property that uses a double value. The above double animation is defined like this: Animate the Height property of the rectangleRed object from the current Height value to 700 in 5 seconds.

To start the animation, you need to call the Begin method on the animation:

using System.Windows.Navigation;

namespace SimpleAnimationApp
{
    public partial class StaticAnimationPage
    {
        public StaticAnimationPage()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            staticAnimation.Begin();
        }
    }
}

It is not used in the sample app, but if you want to stop an animation at any time, you just have to call the Stop method on the animation.


Dynamic animation

For the dynamic animation, let’s pretend that the properties Duration and To are specified in the code behind. We have the similar XAML code:

 

<phone:PhoneApplicationPage x:Class="SimpleAnimationApp.DynamicAnimationPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone">

    <phone:PhoneApplicationPage.Resources>

        <Storyboard x:Name="dynamicAnimation">

            <DoubleAnimation Storyboard.TargetProperty="Height"
                             Storyboard.TargetName="rectangleRed"
                             x:Name="doubleAnimation" />

        </Storyboard>

    </phone:PhoneApplicationPage.Resources>

    <Grid>

    <Rectangle Fill="Blue"
               Height="700"
               Width="100"
               VerticalAlignment="Bottom"/>

    <Rectangle Fill="Red"
               Height="0"
               Width="100"
               VerticalAlignment="Bottom"
               x:Name="rectangleRed"/>

    </Grid>

</phone:PhoneApplicationPage>

 There is one addition of the x:Name=”doubleAnimation” which will help to control the animation in the code behind:

using System;
using System.Windows.Navigation;

namespace SimpleAnimationApp
{
    public partial class DynamicAnimationPage
    {
        public DynamicAnimationPage()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            doubleAnimation.Duration = new TimeSpan(0, 0, 0, 10);
            doubleAnimation.To = 350;

            dynamicAnimation.Begin();
        }
    }
}

Before starting the animation, I set the Duration to 5 seconds and the To to 350 which is half the size of the blue rectangle.

It is not complicated to create an animation. Those were simple animations, but if you want to create more complex animations and even combine animations, you can find more information on the web.

Put some life in your control!

Download Sample project

Published at DZone with permission of Sébastien Lachance, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)