WPF案例（－）模拟Windows7 Win+Tab切换

2021-07-19 10:05:19

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

码农公寓

相关文章