《Windows Fun 7》 二：Windows Phone怎样实现一个水平切换Page的Transition

kaywang

　　前言
　　重置过Windows Phone 7手机的朋友，一定记得，重置之后第一件要做的事是设置语言，时区，时间，Live ID等信息。我们也一定记得那是一种水平切换的动画。当我们点击下一步时，页面从右向左滑动。有点类似iphone主页菜单的左右滑动效果。
　　前段时间QQ群有人在问这种效果。这样的效果有时候会用到，比如街旁WP7客户端开始的引导用户使用的几个页面，类似教程，就可以做成这种效果。还有，如果需要在客户端注册，也可以把几个注册过程做成这样的效果，还有比如翻书的效果，也可以这样平移……
　　我们可以看下一下效果，它是从右向左连贯的水平滑动，本篇就分析这样的思路以及实现原理，并给出源代码下载：

　　
　　1.你的思路
　　如果我猜的没错，你已经有了大概的思路：设置一个Canvas，按每个页面实际的位置布局，然后每次修改每个元素的Canvas.Left……
　　确实，以前我也这么干过！
　　这样虽然可行，但是有点显得我们不够专业，而且所有页面需要一次实例化，如果页面过多，那会影响第一次加载时间。
　　那怎么办呢？不急，我们一步一步来慢慢分析。
　　
　　2.Silverlight中的简单导航
　　切换，切换，切换，该怎么切换呢？
　　想想，在Silverlight中，我们要由一个UI页面切换到另一个UI页面，在不借助Frame的时候，会怎么办呢。
　　最简单的，就是将容器的Content给替换成另一个对象，没错就是这样。
　　所以，页面切换的最简单模型就是，最外层放置一个ContentControl，第一次显示的时候给他的Content赋值一个页面实例，在用户点击导航按钮之后，用另一个页面实例替换。如下的模型：

　　
　　3.Frame+Page
　　其实，没错啦，页面切换的基本模型就是这么简单。
　　Silverlight提供了一个Frame+Page的导航模型，它其实仍然是这样的原理。我们首先看下Frame的定义：



   1:  public class Frame : ContentControl, INavigate
   2:  {
   3:     public bool CanGoBack { get; internal set; }
   4:     public bool CanGoForward { get; internal set; }
   5:     public Uri CurrentSource { get; internal set; }
   6:     public Uri Source { get; set; }
   7:     public UriMapperBase UriMapper { get; set; }
   8:     public event FragmentNavigationEventHandler FragmentNavigation;
   9:     public event NavigatedEventHandler Navigated;
  10:     public event NavigatingCancelEventHandler Navigating;
  11:     public event NavigationFailedEventHandler NavigationFailed;
  12:     public event NavigationStoppedEventHandler NavigationStopped;
  13:     public void GoBack();
  14:     public void GoForward();
  15:     public bool Navigate(Uri source);
  16:     public void StopLoading();
  17:  }
　　Frame首先是一个ContentControl，那么每个Page就是一个页面了。不同的是不需要我们去替换Content，我们只需要指定一个XAML文件的地址，Frame会根据路径找到这个页面，然后实例化，然后自己替换它的Content。
　　相比我们前面得出的最简单的模型，它仅仅是提供了一些导航事件，使得我们可以做出一些处理。
　　我们看到，Frame模型简化了我们开发中的页面导航。还是很有用的。
　　
　　4.Windows Phone 7中的Transitions
　　Nice！但是页面切换太突兀了，一下子就换过来，一点都不符合Silverlight的风格，Silverlight可是做动画的啊，Silverlight可是替换Flash的啊，为什么要像HTML一样导航呢。
　　Windows Phone 7操作系统出来后，Metro横空出世，Metro强调流畅，强调平滑，强调每户的每个操作和响应都能通过一些视觉变换反馈给用户。因此，给Page之间的过度加入了Transition。
　　不过默认的PhoneApplicationFrame并没有加入Transition的功能，我们需要去分析Toolkit里面的TransitionFrame代码。
　　对TransitionFrame的分析以及将本实例转化为Frame的方式将会在下一篇分析。
　　
　　5.本示例代码分析
　　本实例实际上来源于PDC大会上介绍Expression Blend 4时官方演示的源代码示例。其中我把导航的部分抽取出来。
　　和Frame+Page的模型类似，本实例也由两部分组成：TransitionContentControl和SlideShow。其中TransitionContentControl类似于Frame的功能，而SlideShow类似于Page，不同的是SlideShow是继承于ItemsControl，它首先就会取得所有页面并实例化，这在页面多得时候不是很可取，后面我会将它进行改造。



   1:  public class TransitionContentControl : Control
   2:  {
   3:     private ContentControl currentWrappedContent = null;
   4:     private Grid grid = null;
   5:   
   6:     public Style TransitionStyle { get; set;}
   7:     public object Content{ get; set;}
   8:   
   9:     static void ContentPropertyChanged(object o, DependencyPropertyChangedEventArgs args);
  10:     static void TransitionStylePropertyChanged(object o, DependencyPropertyChangedEventArgs args); }

　　和前面的Frame没有太大区别,神奇之处在于多了一个TransitionStyle依赖属性,这个Style也没什么区别,神奇之处在于多了一个LayoutStates



   1:  
   2:      
   3:         
   4:            
   5:               
   6:                  
   7:                     
   8:                        
   9:                        
  10:                        
  11:                     
  12:                     
  13:                        
  14:                     
  15: