Windows Phone 页面导航动画

概述

在构建Windows Phone应用程序的时候，为了让用户不至于在应用程序中迷路，需要考虑用户在应用程序中的导航顺序。为了构建高质量的Windows Phone应用程序，不仅要考虑页面显示的顺序，还需要创建平滑的过渡效果，即，页面导航动画。

步骤

l  截获所有用户正在离开当前页面的操作

l  启动一个动画故事版来隐藏当前页面

l  导航到下一个页面

l  截获新页面的导航

l  启动一个故事版来显示新页面

 

定义隐藏页面和显示页面的动画

和定义普通控件的动画方式相同，这里不再赘述。

隐藏当前页面

截获用户离开页面的操作的方法有两种。一种是将对Navigate方法的调用替换为对动画的调用。但是该方法有一个明显的缺点，如果在一个页面有多种导航到多个页面的时候，需要在一个页面的多个位置执行该操作。另一种比较有效的方法是重写OnNavigatingFrom方法：在该方法中取消页面的导航，并且启动页面隐藏动画，同时缓存用户将要导航到的Uri，当动画结束之后再次调用Navigate方法。这次导航将取得成功。如下：

        ///<summary>

        ///保存将要导航到的Uri地址

        ///</summary>

        public Uri UriToNavigateTo { get;set; }

 

        privatevoid btnToSP_Click(objectsender,RoutedEventArgs e)

        {

            // 导航按钮按下之后，开始导航

            NavigationService.Navigate(newUri("/SecondPage.xaml",UriKind.Relative));

        }

 

        protectedoverridevoidOnNavigatingFrom(NavigatingCancelEventArgse)

        {

            base.OnNavigatingFrom(e);

 

            if(UriToNavigateTo ==null)

            {

                // 当UriToNavigatingTo为空时，表示第一次导航，需要截获

                e.Cancel = true;

                UriToNavigateTo = e.Uri;

                this.HidePage.Begin();

            }

            else

            {

                // 第二次导航，不截获

                UriToNavigateTo = null;

            }

        }

 

        privatevoid HidePage_Completed(object sender,EventArgs e)

        {

            // 动画完成后，再次导航到目标页面

           NavigationService.Navigate(UriToNavigateTo);

        }

显示新页面

隐藏上一个页面之后，开始加载新页面，可以通过类似隐藏页面的方式来显示页面。重写OnNavigateTo方法：在其中启动一个用于显示页面内容的故事版：

        protectedoverridevoidOnNavigatedTo(NavigationEventArgs e)

        {

            base.OnNavigatedTo(e);

            this.Display.Begin();

        }

 

以上方式便完成了页面过渡动画。