Windows Phone 实用开发技巧（9）：自定义Windows Phone 页面切换动画

在silverlight for windows phone toolkit中默认中有自带的页面transitions：rolltransition、rotatetransition、slidetransition、swiveltransition、turnstiletransition。大家如果查看源代码，会发现这些transition都是继承自transitionelement，然后定义一些特定的mode去调用不同的storyboard去实现页面切换效果，于是我们可以定义自己的transition类，继承自transitionelement，调用自己定义的storyboard。

 

 下图可以方便大家理解toolkit中默认的forward、backward、in、out的流程

下面我们就来自定义page transition：

1. 首先，需要将app.xaml.cs中initializephoneapplication rootframe改为rootframe = new transitionframe();//set to transition 2. 添加对toolkit的引用，添加类mytransition，该类继承自 transitionelement，具体代码如下

 

3.  编辑mainpage.xaml，添加toolkit的名称空间 xmlns:toolkit="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone.controls.toolkit"

4.  向mainpage中添加页面资源，即我们定义的storyboard，详细代码见源代码

5.  添加如下代码，以增加页面切换效果

6.  添加第二个命名，做法同mainpage，不同的是修改storyboard 以显示不同的切换效果

7。 运行程序，会发现页面切换效果

ps：如果大家的页面有背景颜色，在切换页面的时候可能会出现黑屏或者白屏的情况，因为在windows phone 中pages都是放在一个容器中的，而容器的背景颜色是绑定当前的主题的颜色，所以大家可以修改为背景颜色相近的颜色，以提供更好的用户体验。


 
修改方法为在app.xaml.cs中rootframe = new transitionframe();//set to transition
 
下一行代码中设置rootframe的背景颜色即可
 
 
 
源代码下载：
 
 参考http://blogs.msdn.com/b/benwilli/archive/2011/02/04/custom-page-transitions-in-wp7.x
 

作者：alexis