Page Transition Effects in Windows Phone 7

Its very easy to implement the neat page transition effects to your Windows Phone 7 application. You have to follow some simple steps and you will get the wonderfull page transition effects. Before starting the implementation we will see some concepts.

Transition Element :-

Transition element is an abstract class that have the GetTransition(UIElement element) abstract method.By which it creates new ITransition for the given UIElement.You will find the five built in Transition Elements as follows.

1. RotateTransition
2. SlideTransition
3. SwivelTransition
4. TurnstileTransition
5. Roll Transition is different from the others because it does not provide any Modeproperty.

ITransition :-

ITransition interface is the main part of the transition framework. It provides the api for all types of the custom animations. By which you can create your own animation as you want. Following are the methods which are provided by the ITransition for creating animation effects.

1. Begin() – Initiates the set of animations associated with the ITransition.
2. GetCurrentState() – Gets the ClockState of the ITransition.
3. GetCurrentTime() – Gets the current time of the ITransition.
4. Pause() – Pauses the animation clock associated with the ITransition.
5. Resume() – Resumes the animation clock, or run-time state, associated with the ITransition.
6. Seek() -Moves the ITransition to the specified animation position. The ITransition performs the requested seek when the next clock tick occurs.
7. SeekAlignedToLastTick() – Moves the ITransition to the specified animation position immediately (synchronously).
8. SkipToFill() – Advances the current time of the ITransition’s clock to the end of its active period.
9. Stop() – Stops the ITransition.

Simple steps to implement Transition Effect to the application page.

1. First you should install the Silverlight Toolkit for Windows Phone. You will find the dll at C:Program Files (x86)Microsoft SDKsWindows Phonev7.0ToolkitNov10BinMicrosoft.Phone.Controls.Toolkit.dll
2. Just add the reference Microsoft.Phone.Controls.Toolkit.dll
3. First you should not forget to add RootFrame is of type TransitionFrame in app.xaml.cs file under the method InitializePhoneApplication()

   //RootFrame = new PhoneApplicationFrame();
   RootFrame = newTransitionFrame();
   
   

4. In each XAML page you need to add xmlns to dll,

    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
   assembly=Microsoft.Phone.Controls.Toolkit"

   Under the <phone:PhoneApplicationPage> root and you need to add the following XAML code at end of your code.

5. For Turnstile Transition the XAML code will be look like follows :

   

   <toolkit:TransitionService.NavigationInTransition>
           <toolkit:NavigationInTransition>
               <toolkit:NavigationInTransition.Backward>
                   <toolkit:TurnstileTransition Mode="BackwardIn"/>
               </toolkit:NavigationInTransition.Backward>
               <toolkit:NavigationInTransition.Forward>
                   <toolkit:TurnstileTransition Mode="ForwardIn"/>
               </toolkit:NavigationInTransition.Forward>
           </toolkit:NavigationInTransition>
       </toolkit:TransitionService.NavigationInTransition>
       <toolkit:TransitionService.NavigationOutTransition>
           <toolkit:NavigationOutTransition>
               <toolkit:NavigationOutTransition.Backward>
                   <toolkit:TurnstileTransition Mode="BackwardOut"/>
               </toolkit:NavigationOutTransition.Backward>
               <toolkit:NavigationOutTransition.Forward>
                   <toolkit:TurnstileTransition Mode="ForwardOut"/>
               </toolkit:NavigationOutTransition.Forward>
           </toolkit:NavigationOutTransition>
   </toolkit:TransitionService.NavigationOutTransition>
   
   

6. For Slide Transition the XAML code will be look like follows :

   <toolkit:TransitionService.NavigationInTransition>
       <toolkit:NavigationInTransition>
           <toolkit:NavigationInTransition.Backward>
               <toolkit:SlideTransition Mode="SlideRightFadeIn"/>
           </toolkit:NavigationInTransition.Backward>
           <toolkit:NavigationInTransition.Forward>
               <toolkit:SlideTransition Mode="SlideLeftFadeIn"/>
           </toolkit:NavigationInTransition.Forward>
       </toolkit:NavigationInTransition>
   </toolkit:TransitionService.NavigationInTransition>
   <toolkit:TransitionService.NavigationOutTransition>
       <toolkit:NavigationOutTransition>
           <toolkit:NavigationOutTransition.Backward>
               <toolkit:SlideTransition Mode="SlideRightFadeOut"/>
           </toolkit:NavigationOutTransition.Backward>
           <toolkit:NavigationOutTransition.Forward>
               <toolkit:SlideTransition Mode="SlideLeftFadeOut"/>
           </toolkit:NavigationOutTransition.Forward>
   </toolkit:NavigationOutTransition>
   
   

7. Thats all you are done with your page transition effect. Like this you can use the another transition modes also ie. RotateTransition, SwivelTransition, RollTransition.

Download the Sample Project: Page Transition Effects in Windows Phone 7