How to control an animation in XML and in the code in your Windows Phone app
This article explains how to create simple animations in Windows Phone.
See Also
- Animations Overview (MSDN)
- Silverlight Animations Walkthrough (MSDN Blogs)
- Animations and Easing (silverlight.net)
Article Metadata
Code Example
Tested with
Compatibility
Article
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.
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();
}
}
}
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.
Contents
Hamishwillee - Not sure this says enough
Hi ArchieCoder
Firstly, one minor technical point - you haven't defined what you mean by static or dynamic. As all animations are necessarily dynamic in terms of "they show movement" this is something you need to define in the section. Perhaps "Animation defined purely in XAML" instead of "static" and "Animation with parameters set in code" rather than dynamic for the heading names?
Also, one thing that no one seems to cover is how you link to XAML from the code. It appears to be that any property named in XAML using x:Name="doubleAnimation" can just be called in C# - is that correct? How does the CSharp file know which XAML file you're talking about, or must the names all be unique across all XAML in a project?
In terms of improvement, it would be good if you minimally provided a written explanation of the relationship between StoryBoard, Timeline and the target object - ie "how the bits of the definition fit together". I worked this out, but it is not immediately obvious.
Lastly, this seems a bit of a wasted opportunity. There are plenty of articles around that cover basic animation like this one, and I'm not sure that this "adds value" over them. For example, I learned "something" from http://www.windowsphonegeek.com/articles/WP7-Animations-in-depthndash-Overview-and-Getting-Started , http://www.jeffblankenburg.com/2010/10/29/31-days-of-windows-phone-day-29-animations/ and http://www.codeproject.com/Articles/153455/Windows-Phone-7-Animations-Alternatives-Performanc . These cover a bit more of the theory, although they are by means perfect.
What appears to be missing from the literature (and why I call this a lost opportunity) is a really good guide showing the theory of animations. This would start (as I suggested for this one) by covering the relationship between StoryBoard, Timeline, and how this links to the target object. However it would go on to cover creating animation in code, the importance of and using behaviours - e.g. animation, conditional, data, motion, triggers. Lastly, someting on working with expression blend and animations. Perhaps I'm just greedy.
Regards
Hamishhamishwillee 09:48, 17 September 2012 (EEST)
ArchieCoder - New article name
Hello!
You're totally right about the article name, I changed it to a more appropriate name. I agree this is a wasted opportunity here, but the animation topic is big enough to write a book :)
Concerning the "doubleAnimation", it was written: "There is one addition of the x:Name=”doubleAnimation” which will help to control the animation in the code behind." so to make it more easy to understand, I added: "The "doubleAnimation" object will be available within the code behind of the page:"
Thank you
ArchieCoderArchieCoder 12:05, 17 September 2012 (EEST)
Hamishwillee - Subedited
Hi ArchieCoder
You're welcome. Thanks for your updates. I've subedited and extended them a bit to meet my "recommended minimum"
Please check that this is still correct.
regards H
PS In the devices section of the ArticleMetaData, in future please list specific devices you actually tested against - e.g. Lumia 800, rather than "All devices". In theory they should be the same thing, but this helps people if they run into issues that do appear to be device specific.hamishwillee 05:31, 18 September 2012 (EEST)
ArchieCoder - "See also" section
Hello Hamish,
Thank you for the update, I didn't know that we can add links in the "See also" section. I'll take note about the "All devices".
ArchieCoderArchieCoder 15:22, 18 September 2012 (EEST)