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