31 Days of Windows Phone | Day #29: Animations

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:

rectanglescreenshot

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.

openinexpressionblend

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

objectsandtimeline

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

createstoryboard

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.

recordkeyframe

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.

 properties

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.

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

<phone:PhoneApplicationPage 
    x:Class="Day29_Animations.MainPage"
    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"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
	<phone:PhoneApplicationPage.Resources>
		
		<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>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="LayoutRoot">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		
	</phone:PhoneApplicationPage.Resources>

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

        <!--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}"/>
        </StackPanel>

        <!--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" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

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()
		{
			InitializeComponent();
			rectangle1.MouseLeftButtonDown +=new MouseButtonEventHandler(rectangle1_MouseLeftButtonDown);
		}

		private void rectangle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
		{
			DoorOpen.Begin();
		}
	}
}

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.

download

17 thoughts on “31 Days of Windows Phone | Day #29: Animations

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

  2. 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. 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. 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. 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. Believe those who are seeking the truth doubt those who find it.

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

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

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

  10. Value your words. Each one may be the last.

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

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

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

  14. You always admire what you really don't understand.

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

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

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

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s