Page Transitions for Universal XAML Pages

Normally, if you want different page transitions (NavigationThemeTransition) for your Universal XAML Windows Phone 8.1 app, you’d set it on the page’s XAML directly. For example, let’s do a ContinuumTransition:


<Page.Transitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<ContinuumNavigationTransitionInfo />
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Page.Transitions>

However, if you have a XAML page in your Universal app’s shared folder, you can’t use XAML because page transitions are not available for Windows 8.1 apps. Since there isn’t a conditional compilation for XAML, we’ll need to do it from the code behind.

In your OnNavigatedTo event, set up an #ifdef statement to check if the page is being used on PC or phone. Now with the ability to run platform specific code, we can programmatically add the transition to the Page. Here is the result:


#if WINDOWS_PHONE_APP
//phone code

this.Transitions = new TransitionCollection
{
new NavigationThemeTransition
{
DefaultNavigationTransitionInfo = new ContinuumNavigationTransitionInfo()
}
};
#else
//PC code

#endif

Now you can have the same transition effect you use for the rest of the phone app’s pages, enjoy!

Advertisements

One thought on “Page Transitions for Universal XAML Pages

  1. Pingback: Programatically Set Page Transitions for Universal XAML Pages

If you have a comment, leave it below. If you have a question, email me directly.

Please log in using one of these methods to post your comment:

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