【WP7】页面过渡效果

在不同页面进行切换到的时候，可以给页面过渡加一个动画效果以提高用户体验

给页面添加动画的方法有很多，下面演示使用 Windows Phone Toolkit 库内置的一些动画效果

　　首先下载 Windows Phone Toolkit控件库 http://silverlight.codeplex.com/

　　安装（记住安装路径）然后引用到项目中，相信大家应该用过的

　　首先要改掉 RootFrame

　　　　找到App.xaml.cs 文件中的 RootFrame = new PhoneApplicationFrame();

　　　　　　　　　　　改为　 RootFrame = new TransitionFrame();

　　然后在需要添加动画的页面添加对命名控件的引用　

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

　　最后，就是添加动画效果了

<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

　　　　到此，就实现了页面的翻页效果

当页面比较多的时候，可以吧动画作为资源来引用

<Application.Resources>
<ResourceDictionary>
<Style x:Key="TransitionPageStyle" TargetType="phone:PhoneApplicationPage" >
<Setter Property="toolkit:TransitionService.NavigationInTransition">
<Setter.Value>
<toolkit:NavigationInTransition>
<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>
<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>

</Style>
</ResourceDictionary>
</Application.Resources>

在页面引用

Style="{StaticResource TransitionPageStyle}"