Home > Uncategorized > Application-wide page transitions using App.Xaml #Wp8

Application-wide page transitions using App.Xaml #Wp8

By default., if you call  NavigationService.Navigate within a windows phone app, you get an instant transition, which is fine in most applications, but it adds a bit of pizzazz if you can have the page flip over like the transition you see when you open an app from the home screen.

Most tutorials online detail a method to do this by modifying each xaml page of your application, that’s fine in a small project, but what happens if you have lots of pages?, lots of code copy-paste?

Here’s a method of implementing the page transitions app-wide, by modifying App.Xaml.cs

First, in InitializePhoneApplication . define RootFrame as follows

RootFrame = new TransitionFrame();

Then in CompleteInitializePhoneApplication, comment out the line

// RootFrame.Navigated -= CompleteInitializePhoneApplication;

  • Which will cause this event to fire every time a page loads.

Then add the code

PhoneApplicationPage page = RootFrame.Content as PhoneApplicationPage;
NavigationInTransition navigationInTransition = new NavigationInTransition
{
Backward = new TurnstileTransition { Mode = TurnstileTransitionMode.BackwardIn },
Forward = new TurnstileTransition { Mode = TurnstileTransitionMode.ForwardIn }
};
NavigationOutTransition navigationOutTransition = new NavigationOutTransition()
{
Backward = new TurnstileTransition { Mode = TurnstileTransitionMode.BackwardOut },
Forward = new TurnstileTransition { Mode = TurnstileTransitionMode.ForwardOut }
};
TransitionService.SetNavigationInTransition(page, navigationInTransition);
TransitionService.SetNavigationOutTransition(page, navigationOutTransition);

Other transitions you can play with are;

RotateTransition
SlideTransition
SwivelTransition
TurnstileTransition

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: