xaml - 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 } };