Windows Phone 8.1中页面导航切换动画特效

太过爱你忘了你带给我的痛 2022-08-01 11:08 124阅读 0赞

这篇博客要结合之前我的三篇博客看，其实调用重点就是winrt中已经封装好的动画特效而已：

[WP 8.1的ThemeTransition(EntranceThemeTransition和ContentThemeTransition) ][WP 8.1_ThemeTransition_EntranceThemeTransition_ContentThemeTransition]

[WP 8.1的ThemeTransition(RepositionThemeTransition和AddDelteThemeTransition) ][WP 8.1_ThemeTransition_RepositionThemeTransition_AddDelteThemeTransition]

[WP 8.1中ThemeTransition(ReorderThemeTransition和PaneThemeTransition) ][WP 8.1_ThemeTransition_ReorderThemeTransition_PaneThemeTransition]

如果你没有设置任何页面切换特效，页面导航切换默认是旋转门特效。下面给出页面导航效果自带的三个动画：

<Page.Transitions>
        <TransitionCollection>
            <NavigationThemeTransition>
                
                
                
                <SlideNavigationTransitionInfo/>
                
                
            </NavigationThemeTransition>
        </TransitionCollection>
    </Page.Transitions>

上面是在XAML代码中设置的，我们同样可以在.CS中设置：

在Frame.Navigate方法有一个重载，是传入NavigationTransitionInfo，可以设置这个参数即可。

ContinuumNavigationTransitionInfo continuumInfo = new ContinuumNavigationTransitionInfo();
    this.Frame.Navigate(typeof(Page2), "haha", continuumInfo);

下面给出示例代码：

(在Page1页面中放置一个按钮，点击跳转至Page2页面，相应Page2页面中有一个按钮点击回跳到Page1页面)

Page1页面的XAML代码：

Page1页面的.CS代码：

using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Media.Animation;
    using Windows.UI.Xaml.Navigation;
    
    // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍
    
    namespace NavigationEffect
    {
        /// <summary>
        /// 可用于自身或导航至 Frame 内部的空白页。
        /// </summary>
        public sealed partial class Page1 : Page
        {
            public Page1()
            {
                this.InitializeComponent();
            }
    
            /// <summary>
            /// 在此页将要在 Frame 中显示时进行调用。
            /// </summary>
            /// <param name="e">描述如何访问此页的事件数据。
            /// 此参数通常用于配置页。</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
    
            private void goPage2_Click(object sender, RoutedEventArgs e)
            {
                ContinuumNavigationTransitionInfo continuumInfo = new ContinuumNavigationTransitionInfo();
                this.Frame.Navigate(typeof(Page2), "haha", continuumInfo);
            }
        }
    }

Page2页面的XAML代码：

Page2页面的.CS代码：

using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Media.Animation;
    using Windows.UI.Xaml.Navigation;
    
    // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍
    
    namespace NavigationEffect
    {
        /// <summary>
        /// 可用于自身或导航至 Frame 内部的空白页。
        /// </summary>
        public sealed partial class Page2 : Page
        {
            public Page2()
            {
                this.InitializeComponent();
            }
    
            /// <summary>
            /// 在此页将要在 Frame 中显示时进行调用。
            /// </summary>
            /// <param name="e">描述如何访问此页的事件数据。
            /// 此参数通常用于配置页。</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
    
            private void goPage1_Click(object sender, RoutedEventArgs e)
            {
                //SlideNavigationTransitionInfo slideInfo = new SlideNavigationTransitionInfo();
                //this.Frame.Navigate(typeof(Page1),"hehe",slideInfo);
                this.Frame.Navigate(typeof(Page1));
            }
        }
    }

以上代码注意：

我只给Page1页面设置了页面跳转的导航特效。在XAML代码中设置的是SlideNavigationTransitionInfo，在.CS中

设置的是ContinuumNavigationTransitionInfo。那么Page1页面到底遵循哪个特效呢，大家可以自行Code一下看

看效果。

其实设置到XAML中的，是在从其他页面导航到Page1页面时使用的导航特效

而设置到.CS中的，是从Page1页面导航到其他页面使用的导航特效。

推荐链接：[【WP8.1】页面的导航效果][WP8.1]

[WP 8.1_ThemeTransition_EntranceThemeTransition_ContentThemeTransition]: http://blog.csdn.net/u010792238/article/details/42195105
[WP 8.1_ThemeTransition_RepositionThemeTransition_AddDelteThemeTransition]: http://blog.csdn.net/u010792238/article/details/42201915
[WP 8.1_ThemeTransition_ReorderThemeTransition_PaneThemeTransition]: http://blog.csdn.net/u010792238/article/details/42213647
[WP8.1]: http://www.cnblogs.com/h82258652/p/4270966.html