【WP7】页面过渡效果

最新推荐文章于 2021-08-06 08:25:01 发布

weixin_30729609

最新推荐文章于 2021-08-06 08:25:01 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bomo/archive/2012/11/10/2764478.html

本文介绍如何使用WindowsPhoneToolkit库为Windows Phone应用添加页面过渡动画，包括安装库、配置RootFrame及设置动画效果的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

给页面添加动画的方法有很多，下面演示使用 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}"

转载于:https://www.cnblogs.com/bomo/archive/2012/11/10/2764478.html