Click here to Skip to main content
Click here to Skip to main content

Windows Phone 7 Navigation Transitions

, 12 Mar 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
This article decribes how to animate page transitions in Windows Phone 7

Introduction

In this article I am describing how to create page transition animations in a Windows Phone 7 Application. I have created a Windows Phone 7 project to demonstrate this which uses XAML code to animate the transitions. At the end we will see how to animate the transitions using code-behind code.

A reference to the Microsoft.Phone.Controls.Toolkit.dll file must be added to any project before using page transition animations. This file is found in the following location:

C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Feb11\Bin

Background

Page transition animations let you specify how pages appear or disappear in a Windows Phone 7 application during navigation from one page to another. Page transition animations are a simple alternative to using StoryBoard.

There are 5 type of transitions as follows:

  • RollTransition
  • RotateTransition
  • SlideTransition
  • SwivelTransition
  • TurnstileTransition
All transitions except RollTransition have a Mode property which specifies the type of transition you want.

You can specify backward and forward transitions for in and out page navigations. Following is the representation of the four types of page navigation transitions:

Using the Code

First I have created a new Windows Phone 7 project in Microsoft Visual Studio 2010 Express for Windows Phone. Visual Studio adds a default page called MainPage to the project. I added a button and customized the page to give it the following appearance.

Then I added two pages, Page1 and Page2 as follows:

Following is the code-behind code for the button on the MainPage to navigate to the FirstPage:

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
}

Following is the code-behind code for the button on the FirstPage to navigate to the SecondPage:

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
}

I am providing In and Out transition for the FirstPage. The toolkit namespace is added as an attribute of the <phone:PhoneApplicationPage> root element on FirstPage as follows:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Following is the XAML code of the FirstPage to animate transition to and from the FirstPage:
<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>

The above code provides the TurnstileTransition for the In and Out transitions on the FirstPage. The Mode attribute of the <toolkit:TurnstileTransition> element specifies the transition type to be applied.

The complete XAML code of the FirstPage is as follows:

<phone:PhoneApplicationPage 
    x:Class="WindowsPhoneNavigationTransitions.Page1"
    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"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    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">

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

    <!--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="Navigation Transitions" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="First Page" 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" Background="Lime">
            <Button Content="Go to Second Page" Height="72" HorizontalAlignment="Left" Margin="93,237,0,0" Name="button1" VerticalAlignment="Top" Width="270" Click="button1_Click" />
        </Grid>
    </Grid>
 
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

In the InitializePhoneApplication() method in the App.xaml.cs file, initialize the RootFrame with a new instance of the TransitionFrame class as follows:

RootFrame = new TransitionFrame();

Following is the code of the InitializePhoneApplication() method in the App.xaml.cs file:

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 = new TransitionFrame();
        RootFrame.Navigated += CompleteInitializePhoneApplication;

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

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

Running the project now will show transition animation while navigating from the MainPage to the FirstPage. Backward navigation will automatically occur when you click the Back button of the phone on the SecondPage.

If we want to animate the transitions using code-behind code, we must override the OnNavigatedTo method on the target page as follows:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    SlideTransition transition = new SlideTransition();
    transition.Mode = SlideTransitionMode.SlideRightFadeIn;
    PhoneApplicationPage page = (PhoneApplicationPage)((PhoneApplicationFrame)Application.Current.RootVisual).Content;
    ITransition trans = transition.GetTransition(page);
    trans.Completed += delegate
    {
        trans.Stop();
    };
    trans.Begin();
}
The above code gets executed every time the page is navigated to. In this code, the SlideTransition class is used to create and apply the SlideRightFadeIn effect.

Points of Interest

I have created this project using Microsoft Visual Studio 2010 Express for Windows Phone.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Azim Zahir
Instructor / Trainer NIIT, India
India India
I am a trainer by profession. Currently I am working with NIIT (Mumbai, India) as a Senior Faculty. I enjoy programming as a hobby. My favorite technologies are Flash, Flex and Silverlight.
 
Of late I have developed keen interest in WPF and Windows Mobile programming.
 
Apart from computers, my favorite pastime is bicycling.

Comments and Discussions

 
GeneralThanks for the post Pinmemberwindowsphonewinit12346-Jan-14 0:09 
GeneralRe: Thanks for the post PinmemberAzim Zahir6-Jan-14 22:30 
GeneralMy vote of 4 PinmemberBala Geetha25-Sep-13 17:18 
GeneralRe: My vote of 4 PinmemberAzim Zahir25-Sep-13 18:17 
GeneralMy vote of 5 PinmvpKanasz Robert21-Sep-12 2:49 
GeneralRe: My vote of 5 PinmemberAzim Zahir22-Sep-12 6:35 
QuestionThanks for sharing PinmemberPatrick Kalkman15-Apr-12 23:25 
AnswerRe: Thanks for sharing PinmemberAzim Zahir17-Apr-12 1:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141216.1 | Last Updated 12 Mar 2012
Article Copyright 2012 by Azim Zahir
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid