If you ever wanted to create transition animations like the native hubs in Windows Phone 7, then there are 2 really simple ways to do so:

Using the Sliverlight for Windows Phone 7 Toolkit

First, of course you need to download the toolkit.

Add the reference Microsoft.Phone.Controls.Toolkit to your project.

to your project. Then you need to modify your App.xaml.cs file. Find the line where it sets the RootVisual to: RootFrame = new Microsoft.Phone.Controls.TransitionFrame();

file. Find the line where it sets the to: Now you can add the transition in the page you want by adding the following code in your page XAML: Add the XML name space for toolkit in your page first if it is not already presented: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" Add the following XAML right under your page element <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> Note that in the above example, the transition we are adding is the most common “Turnstile Transition”. There are also other transition available from the toolkit, they are: turnstile, slide, rotate, swivel, and roll.



Using the Telerik RAD Control for Windows Phone

Telerick’s solution is quite similar to the above but providing more transition options and less code required.

Note that by the time of writing, the control is still at beta stage. Therefore, it is unknown that if the behaviors would change in future releases.

First, get the control here and install it.

You need to add the reference Telerik.Windows.Controls.Primitives and Telerik.Windows.Core to your project, which is usually located at C:\Program Files\Telerik\RadControls for Windows Phone 7 [release time]\Binaries\WindowsPhone .

and Telerik.Windows.Core to your project, which is usually located at . Similar to the toolkit example, modify your App.xaml.cs file: RootFrame = new Telerik.Windows.Controls.RadPhoneApplicationFrame(); This is it! If you only need the turnstile transition like the native windows phone 7 hubs. The RadPhoneApplicationFrame has the turnstile transition by default. Alternatively, you can also set your desire transition in code: RadPhoneApplicationFrame frame = new RadPhoneApplicationFrame(); frame.Transition = new RadTurnstileAndSlideTransition(); RootFrame = frame;

Of course you can also manually specify different transition for each page. In the page you want to specify the transition, you simply put the following XAML code:

Add the XML name space for telerik controls in your page first if it is not already presented: xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives" Add the following XAML right under your page element: <telerikPrimitives:RadTransitionControl.Transition> <telerikPrimitives:RadTurnstileTransition/> </telerikPrimitives:RadTransitionControl.Transition>

Similar to the toolkit, Telerik has transitions other than turnstile. Look in the Object Browser of Visual Studio or play around with the installed demo to see more of them.

Style the transition for every page

An alternative way to apply transition to every page in your project, instead of copy-pasting some redundant code block, why not make them into a style in your application resource directory so that all pages can use them. Take the Toolkit solution as an example, in your App.xaml, simply add:

<Application.Resources> <Style x:Key="PageStyle" TargetType="phone:PhoneApplicationPage"> <Setter Property="toolkit:TransitionService.NavigationInTransition"> <Setter.Value> <toolkit:NavigationInTransition> <toolkit:NavigationInTransition.Backward> <toolkit:TurnstileTransition Mode="BackwardIn"/> </toolkit:NavigationInTransition.Backward> <toolkit:NavigationInTransition.Forward> <toolkit:TurnstileTransition Mode="ForwardIn"/> </toolkit:NavigationInTransition.Forward> </toolkit:NavigationInTransition> </Setter.Value> </Setter> <Setter Property="toolkit:TransitionService.NavigationOutTransition"> <Setter.Value> <toolkit:NavigationOutTransition> <toolkit:NavigationOutTransition.Backward> <toolkit:TurnstileTransition Mode="BackwardOut"/> </toolkit:NavigationOutTransition.Backward> <toolkit:NavigationOutTransition.Forward> <toolkit:TurnstileTransition Mode="ForwardOut"/> </toolkit:NavigationOutTransition.Forward> </toolkit:NavigationOutTransition> </Setter.Value> </Setter> </Style> </Application.Resources>

Then in each page, you just need to use this style:

<phone:PhoneApplicationPage Style="{StaticResource PageStyle}" ... >

Update: With the Feb 2011 release of the Toolkit, its page transition animations are using better easing functions. Due to the fact that Telerik’s controls are still in beta stage, and there would probably be licensing costs when you need to use it commercially, I recommend the toolkit option.

-33.867139 151.207114