Introduction of using Windows Phone Toolkit vol.3 : Transitions

Introduction of using Windows Phone Toolkit vol.1 : Download and prepare to use toolkit
Introduction of using Windows Phone Toolkit vol.2 : Tilt effect
Introduction of using Windows Phone Toolkit vol.3 : Transitions
Introduction of using Windows Phone Toolkit vol.4 : ContextMenu
Introduction of using Windows Phone Toolkit vol.5 : List Picker



This time, I introduce Transitions. Transitions is paging from a xaml page to another xaml page like shuffling through a book. Please check bellow movie.

• How coding

The function is also easier than other functions. You need to do things are only two steps.
First, add bellow code after phone:PhoneApplicationPage tag in your xaml page which you want to add the function. 

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

Second, change bellow code to use transitions.

RootFrame = new TransitionFrame();

• Before

private void InitializePhoneApplication()
{
    if (phoneApplicationInitialized)
        return;

    // Create the frame but don't set it as RootVisual yet; this allows the splash
    // screen to remain active until the application is ready to render.
    RootFrame = new PhoneApplicationFrame();
    RootFrame.Navigated += CompleteInitializePhoneApplication;

    // Handle navigation failures
    RootFrame.NavigationFailed += RootFrame_NavigationFailed;

    // Ensure we don't initialize again
    phoneApplicationInitialized = true;
}

• After

private void InitializePhoneApplication()
{
    if (phoneApplicationInitialized)
        return;

    // Create the frame but don't set it as RootVisual yet; this allows the splash
    // screen to remain active until the application is ready to render.
    RootFrame = new TransitionFrame(); /// Change the code. ///
    RootFrame.Navigated += CompleteInitializePhoneApplication;

    // Handle navigation failures
    RootFrame.NavigationFailed += RootFrame_NavigationFailed;

    // Ensure we don't initialize again
    phoneApplicationInitialized = true;
}

Also the bellow movie is my memo app using Transition.



That's all. The function is very cool. There are also other paging functions. Please check it.