Windows Phone practical development skills (9): Custom Windows Phone page switching Animation

By default, Silverlight for Windows Phone toolkit contains built-in page transitions: rolltransition, rotatetransition, slidetransition, swiveltransition, and turnstiletransition. If you want to viewSource code, You will find that these transition are inherited from the transitionelement, and then define some specific modes to call different storyboard to achieve page switching effect, so we can define our own transition class and inherit from the transitionelement, call your own storyboard.

 

The default forward, backward, In, and out processes in toolkit are easy to understand.

 

Next we will customize Page Transition:

1. First, you needChange initializephoneapplication rootframeRootframe =New Transitionframe();// Set to transition

2. Add a reference to toolkit and add the class mytransition, which inherits from transitionelement.CodeAs follows:

 

3. Edit mainpage. XAML and add the Toolkit namespace xmlns: Toolkit = "CLR-namespace: Microsoft. Phone. controls; Assembly = Microsoft. Phone. Controls. toolkit"

4. Add page resources to mainpage, that is, the storyboard we define. For detailed code, see the source code.

5. Add the following code to increase the page switching effect.

 

6. Add the second name. The method is the same as that of mainpage. The difference is that the storyboard is modified to display different switching effects.

7. RunProgram, You will find the page Switching Effect

PS: If your page has a background color, black or white screen may occur during page switching, because pages are placed in a container in Windows Phone, the background color of the container is the color of the subject bound to the current system. Therefore, you can change the background color to a similar color to provide a better user experience.

The modification method is in APP. XAML. CS.Rootframe =New Transitionframe();// Set to transition

Set the background color of the rootframe in the next line of code.

 

Source code download:

Reference http://blogs.msdn.com/ B /benwilli/archive/2011/02/04/custom-page-transitions-in-wp7.aspx