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):
<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.
JEFF BLANKENBURG 
Leave a Reply