在移动互联时代到来的浪潮下，作为一个.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文件，里面的代码已经很精简很清楚了，修改它的值然后重新编译吧。