Simple Animation in Windows Phone 7

Introduction

In this article we will create a simple animation in a Windows Phone 7 application. In this animation we will click on a door, then the door will be open and show a dream home. To do this we will need to use the namespace System.Windows.Media.Animation and the class DoubleAnimation. An animation updates the value of a property over a period of time. An animation effect can be subtle, such as moving a Shape a few pixels left and right, or dramatic, such as enlarging an object to 200 times its original size while spinning it and changing its color. The DoubleAnimation class creates a transition between two target values. To set its target values, use its From,To, and By properties. The following table summarizes how the From, To, and By properties may be used together or separately to determine an animation's target values.

Step 1: In this step first of all we have to open a Windows Phone application.

Go to Visual Studio 2010
File->New->Project
Select the template named as Silverlight for Windows Phone
Select the Windows Phone application
Give it a name as you want.

Step 2: In MainPage.xaml we will use a storyBoard control to create an animation with sub control double animation within the Application.Resources Control. The customize code is written below:

Code

<phone:PhoneApplicationPage.Resources>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</phone:PhoneApplicationPage.Resources>

Step 3: Complete Source code of Design page.

Code

<phone:PhoneApplicationPage

x:Class="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>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</phone:PhoneApplicationPage.Resources>

<Grid.Projection>

</Grid.Projection>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock x:Name="ApplicationTitle" Text="Animation

" Style="{StaticResource PhoneTextNormalStyle}"/>

</StackPanel>

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

</Grid>

</phone:PhoneApplicationPage>

At design time the application looks like this:

Step 4: We will add one more xaml page to our project and customize it according to our need. we will simply use a grid and fill in its background with an image.

Code

<phone:PhoneApplicationPage

x:Class="Day29_Animations.Page2"

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"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"

shell:SystemTray.IsVisible="True">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

<Grid.Background>

</Grid.Background>

</Grid>

</phone:PhoneApplicationPage>

Step 5: To handle the animation we will add some code on code behind file.

Code

void DoorOpen_Completed(object sender, EventArgs e)

{

NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));

}

private void rectangle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

DoorOpen.Begin();

}

Step 6: Complete code of code behind file:

Code

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

DoorOpen.Completed += new EventHandler(DoorOpen_Completed);

}

void DoorOpen_Completed(object sender, EventArgs e)

{

NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));

}

private void rectangle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

DoorOpen.Begin();

}

Step 7: Press F5 to run the application.

Output

Just click on the door; you will feel the door opening.

Resources