Geek Answers Handbook

WP7 how to use TransitionFrame toolkit?

I downloaded the latest Windows.Phone.Controls.Toolkit file and changed app.xaml.cs in

RootFrame = new PhoneApplicationFrame();

to

 RootFrame = new TransitionFrame();

I was expecting some change in the transition between pages, but nothing happened.

Do I need to do something to achieve more interesting transitions?

+4
source share
4 answers

You need to add the link xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

and try the Turnstile effect by adding:

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

on every page that you want to get a transition effect.

Or you can try other effects, such as: slide, rotate, rotate and roll.

+8
source

For posterity:

If you do not want to write all of these XAMLs for each page, create a helper class and apply the transitions in your page builder.

Transitions.cs

 public class Transitions { /// <summary> /// Set the Turnstile transition for this UIElement /// </summary> /// <param name="element"></param> public static void UseTurnstileTransition(UIElement element) { TransitionService.SetNavigationInTransition(element, new NavigationInTransition() { Backward = new TurnstileTransition() { Mode = TurnstileTransitionMode.BackwardIn }, Forward = new TurnstileTransition() { Mode = TurnstileTransitionMode.ForwardIn } } ); TransitionService.SetNavigationOutTransition(element, new NavigationOutTransition() { Backward = new TurnstileTransition() { Mode = TurnstileTransitionMode.BackwardOut }, Forward = new TurnstileTransition() { Mode = TurnstileTransitionMode.ForwardOut } } ); } }

ExamplePage.xaml.cs

 public partial class ExamplePage : PhoneApplicationPage { public ExamplePage() { InitializeComponent(); Transitions.UseTurnstileTransition(this); } }
+5
source

Just notice to deploy @subkamran answer. Instead of a helper class, you can also use the style:

 <Style x:Key="TransitionPageStyle" 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:SlideTransition Mode="BackwardOut"/> </toolkit:NavigationOutTransition.Backward> <toolkit:NavigationOutTransition.Forward> <toolkit:TurnstileTransition Mode="ForwardOut"/> </toolkit:NavigationOutTransition.Forward> </toolkit:NavigationOutTransition> </Setter.Value> </Setter> </Style>
+3
source

After you have indicated that you want to use the TransitionFrame, you need to tell the application which transitions you want to enter and exit the page, here is some typical XAML that I use:

first register the namespace in the page header:

 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

then set transitions

  <toolkit:TransitionService.NavigationInTransition> <toolkit:NavigationInTransition> <toolkit:NavigationInTransition.Backward> <toolkit:TurnstileTransition Mode="BackwardIn"/> </toolkit:NavigationInTransition.Backward> <toolkit:NavigationInTransition.Forward> <toolkit:SlideTransition Mode="SlideRightFadeIn" /> </toolkit:NavigationInTransition.Forward> </toolkit:NavigationInTransition> </toolkit:TransitionService.NavigationInTransition>

You can try different types of transitions to find the one that best suits your application.

NTN, Rupert.

+1
source

More articles:


All Articles