Windows Phone 8.1 Bing-like slide page animation

Question

I'd like to add a page transition in my Windows Phone 8.1 app in such a way, that the following page will slide-in from the bottom of the screen. Similar effect is used when you launch Bing by hitting the Search button.

Unfortunately, the MSDN isn't much descriptive on that topic. Does anyone know how to implement such an animation?

Answer 1

First you will have to disable current Transitions for the Frame - the best place would be in App.xaml.cs where the rootframe is created but it depends on how your App is initialized. Here for example is in MainPage constructor:

public MainPage()
{
    this.InitializeComponent();
    Frame mainFrame = Window.Current.Content as Frame;
    mainFrame.ContentTransitions = null;
}

After you have disabled default Transitions, in every Page you can define its own Transition:

In Page.xaml:

<Page.Transitions>
    <TransitionCollection>
       <PaneThemeTransition Edge="Bottom"/>          
    </TransitionCollection>
</Page.Transitions>

I'm not sure if that is the exact animation you were looking for. More about animations you will find here at MSDN.

Of course you can also define Frame's new ContentTransitions, so that they would be as default for all Pages - for example:

// instead of null put in MainPage constructor:
mainFrame.ContentTransitions = new TransitionCollection { new PaneThemeTransition { Edge = EdgeTransitionLocation.Bottom } };

Answer 2

The default transitions can be overridden on per navigation basis from code.

NavigationTransitionInfo transitionInfo = new SlideNavigationTransitionInfo();
Frame.Navigate(typeof(SecondPage), false, transitionInfo);

The code above will force the SecondPage to slide in from bottom exatly the way you want. However, this applies only to this particular navigation scenario. If you want SecondPage to slide in when navigated from anywhere, set the NavigationTransitionInfo in XAML.

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

This will force page to slide in whenever it's navigated to. This default can still be overridden via code for particular navigation scenarios.