Random geekery since 2005.

Husband, father, programmer, speaker, writer, blogger, podcaster, collector, traveler, golfer.

This post is Day #29 in a series called the 31 Days of Windows Phone.

Yesterday, I wrote about how to monetize your applications through advertising.  Today I’m going to show you how to add some movement and flair to your application by using animations.

That Awesome Door Open Animation

If you’ve ever opened an application in the emulator, you get this really nice “door open” animation that happens before your application loads.  I’m going to show you how to add that type of animation to your pages.  (It’s actually surprisingly simple.)

Get yourself a new project (use the Windows Phone Application template if you want to follow along), and add a rectangle to the Grid named ContentPanel.  Here’s what mine looks like:


For creating the animation, we’re going to do the rest of this work in Expression Blend 4.  To open your project in Blend, right click on it in Visual Studio 2010, and choose the “Open in Expression Blend” option.


Once you’ve gotten your project open in Expression Blend, find the “Objects and Timeline” tab.  There is a little “+” symbol on this tab, and it’s for creating new animations, or “storyboards”.


When you click that “+” symbol, you’ll get a dialog that looks like this.  Give your animation a name:


You’ll get returned to your Objects and Timeline tab, but now there’s an actual timeline to the right of your page objects.  To see the timeline better, press the F6 key on your keyboard.  It will re-arrange the tabs in Expression, moving the Objects and Timeline tab to the entire bottom of the application.

For our “DoorOpen” animation, we’re going to be manipulating ALL of the content on our page.  Thankfully, due to the hierarchical nature of Silverlight, we just need to target the LayoutRoot element.  Click on LayoutRoot in the Objects and Timeline tab, and look for an egg-shaped icon above the Zero seconds line.


That icon indicates a Keyframe.  Keyframes are those pivotal times in your animation when something changes.  Silverlight is smart enough to be able to figure out the rest of the animation for you.  So, in our example, we’re going to define the beginning and ending of our animation, and Silverlight will take care of the rest.  Click the Keyframe button if you haven’t already.

The reason we create a Keyframe at Zero seconds is because we want a baseline.  We’re basically saying that our element is currently in the “starting” position, and we want you to record that data.  We have one other thing we need to change in our “starting” position, and that’s what the rotational center of our object should be.  By default, the center of rotation is the center of the object, but we want our animation to basically rotate from the left edge of the screen.

Making sure that LayoutRoot is selected, and that there is a little “egg” icon on Zero seconds, take a look at the Properties tab.  Inside the “Transform” category, there is another tab labeled Center of Rotation (it’s under the Projection section).  You should see that the X and Y values are both set to 0.5 (the middle of the element.)  We want to change our X value to 0, or the left edge of the element.


Next, head back to Object and Timeline.  Move the yellow line that indicates time about halfway between the 0 and 1.  As you move it, you’ll see the time change next to the Keyframe button.

This time, we’re going to modify the Projection.Rotation property.  Open that part of the Properties tab up (it was just to the left of the Center of Rotation), and change the Y value to 90.  This will have our content rotate 90 degrees to the left in a 3D rotation.


If you hit the “Play” button above the timeline, you should be able to see this animation happening now.  But we still have one more step to take before this animation will happen in our app.  We need to call it from code.  If you’d like to see the XAML that we have created by taking all of the above steps, here it is (I’ve included my entire MainPage.xaml so that you can see all of the modifications):

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
		<Storyboard x:Name="DoorOpen">
			<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="LayoutRoot">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="LayoutRoot">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="BLANKENSOFT" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="animations" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<Rectangle Height="326" HorizontalAlignment="Left" Margin="83,100,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="289" Fill="Red" />

Calling Animations From Code

Once we’ve created our animation, we can save everything, and close Expression Blend.  Go back to Visual Studio 2010, and open the code-behind file: MainPage.xaml.cs.  We’re going to launch our animation when someone clicks on our rectangle (the one we added at the beginning, remember?)

Our first step is to create an event handler for the click of the rectangle, and the second is to execute the Begin() method on our storyboard.  Here’s what my MainPage.xaml.cs file looks like now:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Day29_Animations
	public partial class MainPage : PhoneApplicationPage
		// Constructor
		public MainPage()
			rectangle1.MouseLeftButtonDown +=new MouseButtonEventHandler(rectangle1_MouseLeftButtonDown);

		private void rectangle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

So that’s it!  Feel free to use this animation in your applications, so that you can have that same “open door” animation that you see all over the operating system.

Download the Code

This sample code includes all the code shown above in a full working project.  Please download it and take it apart, so that you can start using animations in your application.



18 responses to “31 Days of Windows Phone | Day #29: Animations”

  1. air jordans Avatar

    Not someone to make me worry, but I take someone's words and deeds to trouble himself.

  2. Wanderer Avatar

    Have you noticed the back button wont work once you use the animation? Any ideas why is this happening and how to solve it?

  3. Maxims Avatar

    This post is Day #29 in a series called the 31 Days of Windows Phone. Yesterday, I wrote about how to monetize your applications through advertising.   Today I’m going to show you how to add some movement and flair to your application by using animations.

  4. Maxims Avatar

    This post is Day #29 in a series called the 31 Days of Windows Phone. Yesterday, I wrote about how to monetize your applications through advertising.   Today I’m going to show you how to add some movement and flair to your application by using animations.

  5. Missouri payday loans Avatar

    Will Where's Elizabeth Jack She's safe, just like I promised. She's all set to marry Norrington, just like she promised. And you get to die for her, just like you promised. So we're all men of our word really… except for Elizabeth, who is in fact, a woman.

  6. cash til payday loan Avatar

    Believe those who are seeking the truth doubt those who find it.

  7. pay advance Avatar

    Remember that there is nothing stable in human affairs therefore avoid undue elation in prosperity, or undue depression in adversity.

  8. quick cash advance loan Avatar

    Blessed is the influence of one true, loving human soul on another.

  9. cash advance in one hour Avatar

    I never believed in trying to do anything. Whatever I set out to do I found I had already accomplished.

  10. national payday loan Avatar

    Value your words. Each one may be the last.

  11. advance cash fast Avatar

    There are times when one would like to hang the whole human race and finish the farce.

  12. cash loans for bad credit Avatar

    The right word may be effective, but no word was ever as effective as a rightly timed pause.

  13. installment payday loan Avatar

    This life is worth living, we can say, since it is what we make it.

  14. low fee loan online payday Avatar

    You always admire what you really don't understand.

  15. no faxing payday loans Avatar

    When unhappy, one doubts everything when happy, one doubts nothing.

  16. Hair Transplant Pakistan Avatar

    A great post with on the topic of Windows Phone, cant wait for these….

  17. Water Coolers Leeds Avatar

    Wow, an awesome review shared regarding the topic of Window Phone…. Seems to be some thing real handy to go for and buy….

  18. Ana Figueira Avatar


    First of all, thanks for the great tutorial. But there seems to be an issue with the images in the post. If you could fix that, it would be great!

    Best regards.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

%d bloggers like this: