Windows Phone 7 Navigation Transitions

• Download source - 401 KB

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