Create a Simple Animation in Your Windows Phone App

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.

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