原文:WPF案例（－）模拟Windows7 Win+Tab切换
一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序，使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之间滑动导航，在本例中，使用Viewport2DVisual3D宿主二维控件，在这里为方便示例，二维控件仅简单的使用了一个Image，以下是界面缩略图，有兴趣的朋友可以下载源码
在建立本示例中的三维场景时，使用了Viewport3D，PerspectiveCamera，AmbientLight，Viewport2DVisual3D，RotateTransform3D，TranslateTransform3D，ScaleTransform3D等元素，下面分别简单说明一下这些元素在三维场景中分别充当了什么角色
1.Viewport3D ：Viewport3D是一个2D可视化元素，它是在2D场景中封装3D元素的容器控件，具有两个重要的属性
public Camera Camera { get; set; }
public Visual3DCollection Children { get; }
Camera 为3D场景指定观察者所处的位置
Children 表示Viewport3D的所有3D子控件的集合类
2.PerspectiveCamera 表示透视投影摄像机，在本示例中使用它对3D场景进行透视投影
3.AmbientLight 灯光用来照亮3D场景
4.Viewport2DVisual3D 在3D场景中呈现可交互的2D控件，在本示例中就使用了6个Viewport2DVisual3D元素分别呈现了六幅Image
5.RotateTransform3D 对3D元素应用旋转，本示例中使用它对Viewport2DVisual3D进行Y轴45度旋转的模型变换
6.TranslateTransform3D 对3D元素应用平移，本示例中使用它对Viewport2DVisual3D分别进行X,Y,Z平移的模型变换
7.ScaleTransform3D 对3D元素应用拉伸缩放，本示例中使用它对Viewport2DVisual3D进行了X,Y的拉伸模型变换
以下为定义3D场景的XAML代码
3D场景
1 <Viewport3D x:Name="Viewport3D" RenderOptions.EdgeMode="Aliased" ClipToBounds="False"
IsHitTestVisible="False">
2 <Viewport3D.Camera>
3 <PerspectiveCamera Position="0,0,8" />
4 </Viewport3D.Camera>
5 <Viewport2DVisual3D x:Name="viewport2DVisual3D0" Geometry="{StaticResource geometry}"
Material="{StaticResource material}" >
6 <Viewport2DVisual3D.Transform>
7 <Transform3DGroup>
8 <RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
9 <RotateTransform3D.Rotation>
10 <AxisAngleRotation3D Axis="0,1,0" Angle="35"/>
11 </RotateTransform3D.Rotation>
12 </RotateTransform3D>
13 <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0"/>
14 <ScaleTransform3D CenterX="0" CenterY="0"
CenterZ="0" ScaleX="1.5" ScaleY="1" />
15 </Transform3DGroup>
16 </Viewport2DVisual3D.Transform>
17 <Viewport2DVisual3D.Visual>
18 <Image Source="Images\051027nature01.jpg" Stretch="Fill"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
19 </Viewport2DVisual3D.Visual>
20 </Viewport2DVisual3D>
21 <Viewport2DVisual3D x:Name="viewport2DVisual3D1" Geometry="{StaticResource geometry}"
Material="{StaticResource material}">
22 <Viewport2DVisual3D.Transform>
23 <Transform3DGroup>
24 <RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
25 <RotateTransform3D.Rotation>
26 <AxisAngleRotation3D Axis="0,1,0" Angle="35"/>
27 </RotateTransform3D.Rotation>
28 </RotateTransform3D>
29 <TranslateTransform3D OffsetX="-1" OffsetY="1" OffsetZ="-4"/>
30 <ScaleTransform3D CenterX="0" CenterY="0" CenterZ="0"
ScaleX="1.5" ScaleY="1" />
31 </Transform3DGroup>
32 </Viewport2DVisual3D.Transform>
33 <Viewport2DVisual3D.Visual>
34 <Image Source="Images\051027nature02.jpg" Stretch="Fill"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
35 </Viewport2DVisual3D.Visual>
36 </Viewport2DVisual3D>
37 <Viewport2DVisual3D x:Name="viewport2DVisual3D2" Geometry="{StaticResource geometry}"
Material="{StaticResource material}">
38 <Viewport2DVisual3D.Transform>
39 <Transform3DGroup>
40 <RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
41 <RotateTransform3D.Rotation>
42 <AxisAngleRotation3D Axis="0,1,0" Angle="35"/>
43 </RotateTransform3D.Rotation>
44 </RotateTransform3D>
45 <TranslateTransform3D OffsetX="-2" OffsetY="1.5" OffsetZ="-8"/>
46 <ScaleTransform3D CenterX="0" CenterY="0" CenterZ="0"
ScaleX="1.5" ScaleY="1" />
47 </Transform3DGroup>
48 </Viewport2DVisual3D.Transform>
49 <Viewport2DVisual3D.Visual>
50 <Image Source="Images\11550549.jpg" Stretch="Fill"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
51 </Viewport2DVisual3D.Visual>
52 </Viewport2DVisual3D>
53 <Viewport2DVisual3D x:Name="viewport2DVisual3D3" Geometry="{StaticResource geometry}"
Material="{StaticResource material}">
54 <Viewport2DVisual3D.Transform>
55 <Transform3DGroup>
56 <RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
57 <RotateTransform3D.Rotation>
58 <AxisAngleRotation3D Axis="0,1,0" Angle="35"/>
59 </RotateTransform3D.Rotation>
60 </RotateTransform3D>
61 <TranslateTransform3D OffsetX="-3" OffsetY="1.5" OffsetZ="-12"/>
62 <ScaleTransform3D CenterX="0" CenterY="0" CenterZ="0"
ScaleX="1.5" ScaleY="1" />
63 </Transform3DGroup>
64 </Viewport2DVisual3D.Transform>
65 <Viewport2DVisual3D.Visual>
66 <Image Source="Images\11550556.jpg" Stretch="Fill"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
67 </Viewport2DVisual3D.Visual>
68 </Viewport2DVisual3D>
69 <Viewport2DVisual3D x:Name="viewport2DVisual3D4" Geometry="{StaticResource geometry}"
Material="{StaticResource material}">
70 <Viewport2DVisual3D.Transform>
71 <Transform3DGroup>
72 <RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
73 <RotateTransform3D.Rotation>
74 <AxisAngleRotation3D Axis="0,1,0" Angle="35"/>
75 </RotateTransform3D.Rotation>
76 </RotateTransform3D>
77 <TranslateTransform3D OffsetX="-4" OffsetY="1.5" OffsetZ="-16"/>
78 <ScaleTransform3D CenterX="0" CenterY="0" CenterZ="0"
ScaleX="1.5" ScaleY="1" />
79 </Transform3DGroup>
80 </Viewport2DVisual3D.Transform>
81 <Viewport2DVisual3D.Visual>
82 <Image Source="Images\11550560.jpg" Stretch="Fill"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
83 </Viewport2DVisual3D.Visual>
84 </Viewport2DVisual3D>
85 <Viewport2DVisual3D x:Name="viewport2DVisual3D5" Geometry="{StaticResource geometry}"
Material="{StaticResource material}">
86 <Viewport2DVisual3D.Transform>
87 <Transform3DGroup>
88 <RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
89 <RotateTransform3D.Rotation>
90 <AxisAngleRotation3D Axis="0,1,0" Angle="35"/>
91 </RotateTransform3D.Rotation>
92 </RotateTransform3D>
93 <TranslateTransform3D OffsetX="-5" OffsetY="1.5" OffsetZ="-20"/>
94 <ScaleTransform3D CenterX="0" CenterY="0" CenterZ="0"
ScaleX="1.5" ScaleY="1" />
95 </Transform3DGroup>
96 </Viewport2DVisual3D.Transform>
97 <Viewport2DVisual3D.Visual>
98 <Image Source="Images\051123Webshots05.jpg" Stretch="Fill"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
99 </Viewport2DVisual3D.Visual>
100 </Viewport2DVisual3D>
101 <ModelVisual3D>
102 <ModelVisual3D.Content>
103 <AmbientLight Color="White" />
104 </ModelVisual3D.Content>
105 </ModelVisual3D>
106 </Viewport3D>
通过以上的XAML语言定义了一个静态的3D场景，以下的代码实现将此3D场景支持动画效果，即模仿Windows7的Win+Tab切换特效
C#动画
1 public void MoveCurrentToNext()
2 {
3 //向前移动，取Viewport3D的第一个Viewport2DVisual3为当前Viewport2DVisual3D
4 var current = this.Viewport3D.Children[0];
5 var child1 = this.Viewport3D.Children[1];
6 var child2 = this.Viewport3D.Children[2];
7 var child3 = this.Viewport3D.Children[3];
8 var child4 = this.Viewport3D.Children[4];
9 var child5 = this.Viewport3D.Children[5];
10
11
12 this.Viewport3D.Children.RemoveAt(0);
13 this.Viewport3D.Children.Insert(5, current);
14
15 var translate = (current.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
16
17 //对每个Viewport2DVisual3D元素应用平移动画
18 AnimationVisualElement((current as Viewport2DVisual3D).Visual
as FrameworkElement, .3);
19 AnimationVisualElement(translate, true, -5.0, 1.5, -20.0);
20
21 translate = (child1.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
22 AnimationVisualElement(translate, true, .0, .0, .0);
23
24 translate = (child2.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
25 AnimationVisualElement(translate, true, -1.0, 1.0, -4.0);
26
27 translate = (child3.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
28 AnimationVisualElement(translate, true, -2.0, 1.5, -8.0);
29
30 translate = (child4.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
31 AnimationVisualElement(translate, true, -3.0, 1.5, -12.0);
32
33 translate = (child5.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
34 AnimationVisualElement(translate, true, -4.0, 1.5, -16.0);
35
36 }
37
38 public void MoveCurrentToPrevious()
39 {
40 //向后移动，取Viewport3D的最后一个Viewport2DVisual3D当前Viewport2DVisual3D
41 var current = this.Viewport3D.Children[5];
42 var child1 = this.Viewport3D.Children[0];
43 var child2 = this.Viewport3D.Children[1];
44 var child3 = this.Viewport3D.Children[2];
45 var child4 = this.Viewport3D.Children[3];
46 var child5 = this.Viewport3D.Children[4];
47
48 this.Viewport3D.Children.RemoveAt(5);
49 this.Viewport3D.Children.Insert(0, current);
50
51 var translate = (current.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
52
53 AnimationVisualElement(translate, false, 0.0, 0.0, 0.0);
55
56 translate = (child1.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
57 AnimationVisualElement(translate, false, -1.0, 1.0, -4.0);
58
59 translate = (child2.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
60 AnimationVisualElement(translate, false, -2.0, 1.5, -8.0);
61
62 translate = (child3.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
63 AnimationVisualElement(translate, false, -3.0, 1.5, -12.0);
64
65 translate = (child4.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
66 AnimationVisualElement(translate, false, -4.0, 1.5, -16.0);
67
68 translate = (child5.Transform as Transform3DGroup).Children[1]
as TranslateTransform3D;
69 AnimationVisualElement(translate, false, -5.0, 1.5, -20.0);
70 }
71 private void AnimationVisualElement(FrameworkElement element, double duration)
72 {
73 if (element == null)
74 return;
75 //对Visual元素的Visibility应用动画
76 ObjectAnimationUsingKeyFrames objectAnimation = new ObjectAnimationUsingKeyFrames();
77 objectAnimation.KeyFrames.Add(
new DiscreteObjectKeyFrame(Visibility.Collapsed, KeyTime.FromPercent(.0)));
78 objectAnimation.KeyFrames.Add(
new DiscreteObjectKeyFrame(Visibility.Visible, KeyTime.FromPercent(1)));
79 objectAnimation.Duration = TimeSpan.FromSeconds(duration);
80 objectAnimation.FillBehavior = FillBehavior.Stop;
81 element.BeginAnimation(FrameworkElement.VisibilityProperty, objectAnimation);
82
83 }
84 private void AnimationVisualElement(TranslateTransform3D translate, bool forward,
double targetX, double targetY, double targetZ)
85 {
86 Duration duration = new Duration(TimeSpan.FromSeconds(.4));
87 //对TranslateTransform3D的X偏移量应用动画
88 DoubleAnimation animationX = new DoubleAnimation();
89 animationX.To = targetX;
90 animationX.Duration = duration;
91 animationX.AccelerationRatio = forward ? 0 : 1;
92 animationX.DecelerationRatio = forward ? 1 : 0;
93 translate.BeginAnimation(TranslateTransform3D.OffsetXProperty, animationX);
94 //对TranslateTransform3D的Y偏移量应用动画
95 DoubleAnimation animationY = new DoubleAnimation();
96 animationX.To = targetY;
97 animationX.AccelerationRatio = forward ? 0.7 : 0.3;
98 animationX.DecelerationRatio = forward ? 0.3 : 0.7;
99 animationX.Duration = duration;
100 translate.BeginAnimation(TranslateTransform3D.OffsetYProperty, animationX);
101 //对TranslateTransform3D的Z偏移量应用动画
102 DoubleAnimation animationZ = new DoubleAnimation();
103 animationZ.To = targetZ;
104 animationZ.AccelerationRatio = forward ? 0.3 : 0.7;
105 animationZ.DecelerationRatio = forward ? 0.7 : 0.3;
106 animationZ.Duration = duration;
107 translate.BeginAnimation(TranslateTransform3D.OffsetZProperty, animationZ);
108 }
在以上代码中主要实现了对ViewPort3D的6个子Viewport2DVisual3D分别应用TranslateTransform3D的平移动画，TranslateTransform3D具有三个跟位置有关的属性，分别表示X轴偏移量OffsetX,Y轴偏移量OffsetY，以及Z轴偏移量OffsetZ
由于OffsetX，OffsetY，OffsetY在TranslateTransform3D中被定义为Double类型的依赖项属性，因此可以使用DoubleAnimation对属性的目标值定义动画效果，最后通过TranslateTransform3D的BeginAnimation方法分别对OffsetX，OffsetY，OffsetY属性应用动画
最后定义快捷键事件，按下Ctrl+Down组合键，图片向前滑动，按下Ctrl+Up组合键，图片向后滑动
定义快捷键
1 private void Window_KeyDown(object sender, KeyEventArgs e)
2 {
3 if (e.KeyStates == Keyboard.GetKeyStates(Key.Down) &&
4 Keyboard.Modifiers == ModifierKeys.Control)
5 {
6 //向前移动Visual元素
7 this.MoveCurrentToNext();
8 }
9 else if (e.KeyStates == Keyboard.GetKeyStates(Key.Up) &&
10 Keyboard.Modifiers == ModifierKeys.Control)
11 {
12 //向后移动Visual元素
13 this.MoveCurrentToPrevious();
14 }
15 else if (e.KeyStates == Keyboard.GetKeyStates(Key.Escape))
16 {
17 //注销
18 Application.Current.Shutdown();
19 }
20 }
注：在本示例中连续使用了6个Viewport2DVisual3D三维元素，并且在每个Viewport2DVisual3D元素的Visual上宿主一个二维的Image控件，对于本示例，为优化性能，应尽可能的减少Viewport2DVisual3D的数目，在这里一个好的方法是使用三维元素ModelVisual3D来代替Viewport2DVisual3D，将六幅图片分别定义成Material，再将Material应用到六个对应的GeometryModel3D三维模型中，最后使用Model3DGroup将六个GeometryModel3D三维模型打包作为ModelVisual3D的Content属性值，因此只需要一个ModelVisual3D就可实现相同的功能并能优化了性能