WP学习笔记（1）页面跳转动画

在移动互联时代到来的浪潮下，作为一个.net码农，我也买了一个lumia 820。（话说现在诺基亚是真的没落了，在村里的体验店都消失了，原来满大街的nokia专卖，现在只能在角落里找到几个不大的柜台了。买的过程也是不太愉快，在这规劝买电子产品的仁兄都不要去村里了）

言归正传，撸妹到手之后就开始查怎么搭开发环境，最后得出结论要在win8下用vs2012开发。so

第一步，下载win8，下载VS2012，下载Windows phone8 sdk，然后安装。

第二步，去淘宝买个开发者账号，在教程的指引下给手机解锁，这样就可以用真机调试了。

这些都准备好了之后，就开始真正的wp8开发体验了。在网上搜搜教程，再买本书看看，幸亏刚毕业那会干了一段时间的Silverlight，对wpf也不陌生，要不还真不适应。

刚开始搞无非是拖拖控件，看看控件都是什么样子的，建几个page跳转一下。到这终于到了今天要说的主题了，不管代码多丑陋多简单，能跳转了。但是跳转非常生硬，一闪就算完活了，一点也不炫，要给跳转加点动画才够炫，要不怎么跟水果牌的比。废话少说，在wp8中加动画和Silverlight一样，也是在xaml中添加storyboard标签，使用关键帧动画，这样就能实现像飞入飞出，翻页这样的效果了。但是写动画是个非常头疼的事，不光要些标签还要在code-behind里重写nevigatefrom和nevigateto等等等等方法，非常麻烦。

然后开始各种寻找，买书看。最后发现了windows phone toolkit（在wp7时代应该叫silverlight toolkit），在codeplex下载源码，编译，源码里还有很贴心的有各种例子。

编译好wptoolkit后在bin下会有两个文件夹 wp7和wp8，打开wp8里面出现了一个Microsoft.Phone.Controls.Toolkit.dll，在项目里添加这个dll的引用。

要在一个页面添加跳转动画效果，只要在页面头部引入

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

然后添加一段代码就可以

 1 <toolkit:TransitionService.NavigationInTransition>
 2         <toolkit:NavigationInTransition>
 3             <toolkit:NavigationInTransition.Backward>
 4                 <toolkit:TurnstileTransition Mode="BackwardIn"/>
 5             </toolkit:NavigationInTransition.Backward>
 6             <toolkit:NavigationInTransition.Forward>
 7                 <toolkit:TurnstileTransition Mode="ForwardIn"/>
 8             </toolkit:NavigationInTransition.Forward>
 9         </toolkit:NavigationInTransition>
10     </toolkit:TransitionService.NavigationInTransition>
11 
12     <toolkit:TransitionService.NavigationOutTransition>
13         <toolkit:NavigationOutTransition>
14             <toolkit:NavigationOutTransition.Backward>
15                 <toolkit:TurnstileTransition Mode="BackwardOut"/>
16             </toolkit:NavigationOutTransition.Backward>
17             <toolkit:NavigationOutTransition.Forward>
18                 <toolkit:TurnstileTransition Mode="ForwardOut"/>
19             </toolkit:NavigationOutTransition.Forward>
20         </toolkit:NavigationOutTransition>
21     </toolkit:TransitionService.NavigationOutTransition>

 打开app.xaml.cs，找到这句

RootFrame = new PhoneApplicationFrame();

注释掉替换成

RootFrame = new TransitionFrame();

写一个简单的跳转来试试，应该可以出效果了。现在有动画了，看似大功告成了，但是在一个app里往往所有页面跳转的风格都是一致的，那岂不是要在每个页面都粘贴一遍，显然这不科学。所以接着往下看，把上面在MainPage里做的都删掉，打开app.xaml文件在<Application.Resources>下添加下面代码

 1 <Style x:Key="PageTranstionStyle" TargetType="phone:PhoneApplicationPage">
 2             <Setter Property="toolkit:TransitionService.NavigationInTransition">
 3                 <Setter.Value>
 4                     <toolkit:NavigationInTransition>
 5                         <toolkit:NavigationInTransition.Backward>
 6                             <toolkit:TurnstileTransition Mode="BackwardIn"/>
 7                         </toolkit:NavigationInTransition.Backward>
 8                         <toolkit:NavigationInTransition.Forward>
 9                             <toolkit:TurnstileTransition Mode="ForwardIn"/>
10                         </toolkit:NavigationInTransition.Forward>
11                     </toolkit:NavigationInTransition>
12                 </Setter.Value>
13             </Setter>
14             <Setter Property="toolkit:TransitionService.NavigationOutTransition">
15                 <Setter.Value>
16                     <toolkit:NavigationOutTransition>
17                         <toolkit:NavigationOutTransition.Backward>
18                             <toolkit:TurnstileTransition Mode="BackwardOut"/>
19                         </toolkit:NavigationOutTransition.Backward>
20                         <toolkit:NavigationOutTransition.Forward>
21                             <toolkit:TurnstileTransition Mode="ForwardOut"/>
22                         </toolkit:NavigationOutTransition.Forward>
23                     </toolkit:NavigationOutTransition>
24                 </Setter.Value>
25             </Setter>
26         </Style>

最后在MainPage里面<phone:phoneApplication>里添加Style="{StaticResource PageTranstionStyle}"对app资源的引用。 ok，大功告成了。这样就不用在每个页面里都复制那么长的一段代码，只要加上一句就可以。

wptoolkit里为我们提供了一些比较常用的页面切换效果

• SlideTransition ： 上下或者左右滑动效果，具体有Mode值决定：
  • SlideUpFadeIn 向上飞入
  • SlideUpFadeOut 向上飞出
  • SlideDownFadeIn 向下飞入
  • SlideDownFadeOut 向下飞出
  • SlideLeftFadeIn 向左飞入
  • SlideLeftFadeIn 向左飞出
  • SlideRightFadeIn 向右飞入
  • SlideRightFadeIn 向右飞出
• RollTransition：360度旋转动画效果
• RotateTransition ：旋转效果，Mode枚举值如下：
  • In180Clockwise 180顺时针转入
  • Out180Clockwise 180顺时针转出
  • In180Counterclockwise 180逆时针转入
  • Out180Counterclockwise 180逆时针转出
  • In90Clockwise 90顺时针转入
  • Out90Clockwise 90顺时针转出
  • In90Counterclockwise 90逆时针转入
  • Out90Counterclockwise 90逆时针转出
• SwivelTransition : 垂直翻转动画效果，Mode值枚举如下：
  • BackwardIn 向后翻转入
  • BackwardOut 向后翻转出
  • ForwardIn 向前翻转入
  • ForwardOut 向前翻转出
  • FullScreenIn 全屏翻转入
  • FullScreenOut 全屏翻转出
• TurnstileTransition：左右翻页动画效果，Mode枚举值如下：
  • BackwardIn 向后翻入
  • BackwardOut 向后翻出
  • ForwardIn 向前翻入
  • ForwardOut 向前翻出

如果还是对效果不满意怎么办，没关系，既然有了wptoolkit的源码，那就看看源码里的transitions是怎么写的。在Microsoft.Phone.Controls.Toolkit.WP8项目里找到Transitions文件夹，我们看到里面有一个StoryBoard文件夹。就是这了，原来wptoolkit也是通过写storyboard的方法实现的动画，只不过是把这些封装起来而已。随便打开一个xaml文件，里面的代码已经很精简很清楚了，修改它的值然后重新编译吧。