【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}"