Page Transitions for Universal XAML Pages

Posted on February 7, 2015  •  1 minutes  • 169 words

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!