Page-turning transitions for Windows Phone 8 apps

Question

How do I get that page turning effect when I swipe left or right inside my app? I've seen it done before, but when reading up on Page Transitions and Storyboard animations, I just don't see how they make it possible. I have not found a single page on MSDN that shows anything other than simply changing background color of an element.

Have you done this before, or do you know of any references, samples or have anything you could share?

Answer 1

There are many navigation transitions effects that you can manipulate if you used Windows Phone Toolkit. It is easy to install it and u can also run the sample and check the transitions to see if one of them satisfy your needs.

http://phone.codeplex.com/

To install it https://www.nuget.org/packages/WPtoolkit

You should check this also http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/20/windows-phone-toolkit-overview.aspx

Answer 2

Step1: Create a Windows Phone 7 application project and add reference to Microsoft.Phone.Controls.Toolkit.dll.

Step2: Go to App.xaml.cs and set your application's RootFrame property to an instance of TransitionFrame (in App.InitializePhoneApplication of the App.xaml.cs) if you want to have automatically animated Page transitions:

private void InitializePhoneApplication()
{
if (phoneApplicationInitialized)
    return;

// Create the frame but don't set it as RootVisual yet; this allows the splash
// screen to remain active until the application is ready to render.
RootFrame = new TransitionFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication;

// Handle navigation failures
RootFrame.NavigationFailed += RootFrame_NavigationFailed;

// Ensure we don't initialize again
phoneApplicationInitialized = true;
}

Step3: Go to your MainPage.xaml and add the "toolkit" prefix declaration

<toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardIn"/>
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardIn"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardOut"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardOut"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>