Page Switching for Windows Phone 8

Question

How do I get this page to influence the result when I scroll left or right inside my application? I saw how this was done before, but when I read “Page Transitions” and “Chipping,” I just don’t understand how they do it. I have not found a single page on MSDN that shows anything but a simple change in the background color of an element.

Have you done this before, or do you know any links, samples, or anything that you could share?

Answer 1

There are many navigation transition effects that can be manipulated if you used the Windows Phone Toolkit. It is easy to install, and you can also run the sample and check the transitions to make sure that one of them meets your needs.

http://phone.codeplex.com/

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

You should also check this out 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 a link to Microsoft.Phone.Controls.Toolkit.dll .

Step 2: Go to App.xaml.cs and set the RootFrame property for your application to the TransitionFrame instance (in App.InitializePhoneApplication App.xaml.cs ) if you want to automatically animate 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; } 

Step 3: Go to 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>