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>

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

 

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>

             

              <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" Height="780" Width="486">

       <Grid.Projection>

              <PlaneProjection/>

       </Grid.Projection>

        <Grid.RowDefinitions>

            <RowDefinition Height="196"/>

            <RowDefinition Height="572*"/>

        </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="Animation

                       " Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="Click The Door" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel>

 

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="11,0,12,0" Background="Black">

            <Rectangle Height="360" HorizontalAlignment="Left" Margin="128,90,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="164">

                <Rectangle.Fill>

                    <ImageBrush ImageSource="/Animations;component/Images/imgdoor1.jpg" />

                </Rectangle.Fill>

            </Rectangle>

        </Grid>

    </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">

 

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <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="Animation" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="Welcome" 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">

            <Grid.Background>

                <ImageBrush ImageSource="/Day29-Animations;component/Images/dreamhome.jpg" />

            </Grid.Background>

        </Grid>

    </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

• Animations in Silverlight for Windows Phone 7

• Digital Clock in Windows Phone 7
• Simple Animation (TargetProperty to Angle) in XAML Silverlight: Part 1
• Display Video in Windows Phone 7