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代码

 

  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切换特效

  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就可实现相同的功能并能优化了性能