How to add page Jump animation in Windows Phone

Do you envy the gorgeous animation effects on the iOS platform? Do not worry that Microsoft's toolkit team provides us with such a set of components called transitionservices.

Simply put, it has the following effects: turnstile (axis rotation effect); turnstile feather (feather axis rotation effect); continuum (inherited animation effect); slide (slide effect ); rotate ). Here we implement the turnstile effect:

Next I will introduce how to use IT (here we will implement a global jump animation. You can simply add the style attribute when an animation is required for a page ):

First of all there is no doubt we want to download Silverlight for Windows Phone Toolkit (without Windows Phone Toolkit can go to the http://silverlight.codeplex.com/releases/view/55034/ to download ):

Because we want to implement animations that can be called globally, we can implement our ideas in APP. XAML.

1. Reference toolkit first: Add xmlns: Toolkit = "CLR-namespace: Microsoft. Phone. controls; Assembly = Microsoft. Phone. Controls. toolkit" to the application:

2. Add an animation style in the <application. Resources> tab ):

<! -- Application resources --> <application. resources> <local: localizedstrings xmlns: Local = "CLR-namespace: meetu" X: Key = "localizedstrings"/> <urimapper: urimapper X: name = "mapper"> <urimapper: urimapping uri = "/mainpage. XAML "/> </urimapper: urimapper> <style X: Key =" pagetranstionstyle "targettype =" Phone: phoneapplicationpage "> <setter property =" toolkit: transitionservice. navigationintransition "> <setter. value> <Toolkit: navigationintransition. backward> <Toolkit: turnstiletransition mode = "backwardin"/> </Toolkit: navigationintransition. backward> <Toolkit: navigationintransition. forward> <Toolkit: turnstiletransition mode = "forwardin"/> </Toolkit: navigationintransition. forward> </Toolkit: navigationintransition> </setter. value> </setter> <setter property = "toolkit: transitionservice. navigationouttransition "> <setter. value> <Toolkit: navigationouttransition. backward> <Toolkit: turnstiletransition mode = "backwardout"/> </Toolkit: navigationouttransition. backward> <Toolkit: navigationouttransition. forward> <Toolkit: turnstiletransition mode = "forwardout"/> </Toolkit: navigationouttransition. forward> </Toolkit: navigationouttransition> </setter. value> </setter> <setter property = "background"> <setter. value> <imagebrush imagesource = "/images/bg2.png"/> </setter. value> </setter> </style> </application. resources>

3. This is very important. We need to modify things in the app. XAML. CS file so that our animation can be called.

Find "rootframe = new phoneapplicationframe ();" in the CS file, that is, the instantiation method of phoneapplicationframe,

We changed it to "rootframe = new transitionframe ();", so that our framework becomes a frame with jump animation.

4. The next step is to call it. You can simply add the style to the page where you want to use the animation: Style = "{staticresource pagetranstionstyle }":

<Phone: phoneapplicationpage X: class = "meetu. message. sendmessagepage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Phone =" CLR-namespace: Microsoft. phone. controls; Assembly = Microsoft. phone "xmlns: shell =" CLR-namespace: Microsoft. phone. shell; Assembly = Microsoft. phone "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" fontfamily = "{staticresource quota}" fontsize = "{staticresource quota}" foreground = "{staticresource quota}" supportedorientations = "portrait" orientation = "portrait" MC: ignorable = "D" style = "{staticresource pagetranstionstyle}" shell: systemtray. isvisible = "false"> <! -- Layoutroot is the root mesh that contains all page content --> <grid X: Name = "layoutroot"> <grid. background> <imagebrush imagesource = "/images/bg2.png"/> </grid. background> </GRID> <Phone: phoneapplicationpage. applicationBar> <shell: ApplicationBar isvisible = "true" ismenuenabled = "true" mode = "default" backgroundcolor = "black" foregroundcolor = "white"> <shell: applicationbariconbutton text = "send" iconuri = "/icons/check.png" Click = "applicationbariconbutton_click_send"/> <shell: ApplicationBar. menuitems> <shell: applicationbarmenuitem text = "Settings"/> <shell: applicationbarmenuitem text = "Profile"/> <shell: applicationbarmenuitem text = "sign out"/> </shell: applicationBar. menuitems> </shell: ApplicationBar> </Phone: phoneapplicationpage. applicationBar> </Phone: phoneapplicationpage>

Finally, in addition to the built-in animation effects, we can also customize the animation, which I will share with you later.