【转】Silverlight实现带动画场景跳转
场景跳转也就是页面切换。在Silverlight中为页面跳转加入自定义动画是件非常简单的事。在动画方面可以说没有你做不到的只有你想不到的。XCenter中内置了3中动画行为。下面是点击了登陆按钮后的渐变动画效果。
看效果不如看代码:)
Framework中的WindowHelper类封装了一系列的带动画跳转方法：
1 #region Navigation
2
3 /// <summary>
4 /// 根据指定场景做界面跳转
5 /// </summary>
6 /// <param name="transition"></param>
7 /// <param name="newPage"></param>
8 public static void Navigate(TransitionBase transition, UserControl newPage)
9 {
10 //记录原始页面引用
11 prePage = CurrentPage;
12 NavigationHelper.Navigate(transition, newPage);
13 }
14
15 /// <summary>
16 /// 无场景页面跳转
17 /// </summary>
18 /// <param name="newPage"></param>
19 public static void Navigate(UserControl newPage)
20 {
21 prePage = CurrentPage;
22 NavigationHelper.Navigate(newPage);
23 }
24
25 /// <summary>
26 /// 以指定的场景返回上一页
27 /// </summary>
28 /// <param name="transition"></param>
29 /// <param name="newPage"></param>
30 public static void Back(TransitionBase transition)
31 {
32 if (PrePage != null)
33 {
34 NavigationHelper.Navigate(transition, (UserControl)PrePage);
35 }
36 }
37
38 /// <summary>
39 /// 不带场景返回上一页
40 /// </summary>
41 /// <param name="newPage"></param>
42 public static void Back()
43 {
44 if (PrePage != null)
45 {
46 NavigationHelper.Navigate((UserControl)PrePage);
47 }
48 }
49
50 #endregion
其中传递的参数TransitionBase定义在Framework.Client中的Navigation命名空间。
Transitions命名空间下是现有的动画实现。NavigationHelper是跳转的简单封装。TransitionBase是动画的基类。下面以FadeTransition(淡入淡出)动画为例。
1 /// <summary>
2 /// 渐入渐出场景变换
3 /// </summary>
4 public class FadeTransition : TransitionBase
5 {
6 private UserControl newPage;
7 private UserControl oldPage;
8 private TimeSpan time;
9 public FadeTransition(TimeSpan duration)
10 {
11 time = duration;
12 }
13 public FadeTransition() : this(TimeSpan.FromSeconds(2))
14 { }
15
16 public override void PerformTranstition(UserControl newPage, UserControl oldPage)
17 {
18 this.newPage = newPage;
19 this.oldPage = oldPage;
20
21 Duration duration = new Duration(time);
22
23 DoubleAnimation animation = new DoubleAnimation();
24 animation.Duration = duration;
25 animation.To = 0;
26
27 Storyboard sb = new Storyboard();
28 sb.Duration = duration;
29 sb.Children.Add(animation);
30 sb.Completed += sb_Completed;
31
32 Storyboard.SetTarget(animation, oldPage);
33 Storyboard.SetTargetProperty(animation, new PropertyPath("Opacity"));
34
35 sb.Begin();
36 }
37
38 void sb_Completed(object sender, EventArgs e)
39 {
40 OnTransitionCompleted(newPage, oldPage);
41 }
42 }
可以看出核心逻辑是通过Storyboard指定时间间隔并改变UserControl的Opacity属性实现动画。用户可以在这个框架下编写自己的创意动画，然后应用到页面跳转逻辑中。
//带场景跳转
WindowHelper.Navigate(new FadeTransition(), new Page())
上面的带动画跳转只说到动画而没有说到跳转。这里说的跳转不涉及Silverlight3中的Navigation Project因为在Silverlight2时还没有这玩意。(了解的朋友可以给我讲讲，我还不知道怎么用)。在Silverlight2时代我们最常用的实现跳转的方法就是把RootVisual设置成为Grid，然后动态添加删除UserControl。
Code
private void Application_Startup(object sender, StartupEventArgs e)
{
Grid root = new Grid();
Login loginPage = new Login();
root.Children.Add(loginPage);
this.RootVisual = root;
.
跳转的代码其实很简单。
Code
1 public static void Navigate(TransitionBase transition, UserControl newPage)
2 {
3 UserControl oldPage = root.Children[0] as UserControl;
4 root.Children.Insert(0, newPage);
5
6 transition.TransitionCompleted += transition_TransitionCompleted;
7 transition.PerformTranstition(newPage, oldPage);
8 }
文章来自学IT网：http://www.xueit.com/asp.net/show-4502-2.aspx
