×
Namespaces

Variants
Actions

How to control an animation in XAML and in the code in your Windows Phone app

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to create simple animations in Windows Phone.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 7.1
Compatibility
Platform(s): Windows Phone
Windows Phone 7.5
Article
Keywords: Silverlight, animation
Created: ArchieCoder (16 Sep 2012)
Last edited: chintandave_er (09 Feb 2014)

Contents

Introduction

Creating animations in your Windows Phone application is easier than you think. I created a simple application that shows how to control an animation in XAML and in the code. Both animations fill the following red rectangle from the bottom to the top.

Animation.png

Defining an animation in XAML

An animation is created using a Storyboard object. This is often (and most easily) defined in the XAML file as shown below:

<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 StoryBoard contains one or more animation definitions. In this case we use just one animation, of type DoubleAnimation. This is the simplest animation type, and simply animates a property that uses a double value over a certain duration.

The properties defined in the above DoubleAnimation are the target object (Storyboard.TargetName) and the property within that object to be animated (Storyboard.TargetProperty), along with the final value of the target object property (To) and how long the animation will take (Duration). In this case we'll be animating the rectangleRed.height property to a value of 700 over 5 seconds.

To start the animation, you need to call the Begin() method on the StoryBoard object in C#:

using System.Windows.Navigation;
 
namespace SimpleAnimationApp
{
public partial class StaticAnimationPage
{
public StaticAnimationPage()
{
InitializeComponent();
}
 
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
 
staticAnimation.Begin();
}
}
}

Tip.pngTip: It is not used in this app, but you can also call the Stop() method to stop the animation.

Control an animation in code

For this example we have similar XAML code but the properties Duration and To are specified in the code behind:

<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>

Again we define the name of the target object and its property to be animated. Note though that in this case we also define a name for the DoubleAnimation using: x:Name="doubleAnimation". This makes the doubleAnimation object available within the code behind of the page so that we can set its properties.

In the code below I set the Duration to 5 seconds and the To to 350 (half the size of the blue rectangle) before starting the animation:

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();
}
}
}

Conclusion

It is not complicated to control an animation in XML or in code. 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

File:SimpleAnimationApp.zip - The sample project including the static animation and the dynamic animation.

This page was last modified on 9 February 2014, at 09:56.
176 page views in the last 30 days.
×