我們在設計應用程式界面的時候，為了充分利用界面空間，住住需要靈活的界面布局方式，比如可以在界面正面空間上定義一個Chart,背面空間上定義一個GridView,通過在Chart上滑鼠輕按兩下，控件180度旋轉後向使用者顯示出界面背面的GridView，通過在GridView上輕按兩下滑鼠，控件再一次平滑的180度旋轉向使用者顯示正面的Chart
在這個示例中主要采用了GeometryModel3D和VisualBrush這兩個元素，GeometryModel3D用來在3D場景中建立幾何模型，在Wpf中，任何複雜的3D模型最終都是由多個基本基元組成的,最小的基本基元被定義為由三個頂點連線組成的三角形，幾何模型的每一面就是由多個這樣的三角形的三維基元組合而成的。
在Wpf中通過
GeomertyModel3D的定義
1 <GeometryModel3D>
2 <GeometryModel3D.Geometry>
3 <MeshGeometry3D TriangleIndices="0,1,2 2,3,0" TextureCoordinates="0,1 1,1 1,0 0,0"
4 Positions="-0.5,-0.5,0 0.5,-0.5,0 0.5,0.5,0 -0.5,0.5,0" />
5 </GeometryModel3D.Geometry>
6 <GeometryModel3D.Material>
7 <DiffuseMaterial>
8 <DiffuseMaterial.Brush>
9 <VisualBrush Visual="{Binding ElementName=frontHost}" />
10 </DiffuseMaterial.Brush>
11 </DiffuseMaterial>
12 </GeometryModel3D.Material>
13 <GeometryModel3D.BackMaterial>
14 <DiffuseMaterial>
15 <DiffuseMaterial.Brush>
16 <VisualBrush Visual="{Binding ElementName=backHost}">
17 <VisualBrush.RelativeTransform>
18 <ScaleTransform ScaleX="-1" CenterX="0.5" />
19 </VisualBrush.RelativeTransform>
20 </VisualBrush>
21 </DiffuseMaterial.Brush>
22 </DiffuseMaterial>
23 </GeometryModel3D.BackMaterial>
24 <GeometryModel3D.Transform>
25 <RotateTransform3D>
26 <RotateTransform3D.Rotation>
27 <AxisAngleRotation3D x:Name="rotate" Axis="0,1,0" Angle="0" />
28 </RotateTransform3D.Rotation>
29 </RotateTransform3D>
30 </GeometryModel3D.Transform>
31 </GeometryModel3D>
對GometryModel3D的前後反轉定義動畫，在Wpf中，Viewport2DVisual3D用來在3D場景中宿主2D控件,是以隻要把Image宿主在Viewport2DVisual3D中，就可以在直接在3D場景中反轉Image,但這不是一個好的方法，因為如果宿主一個比較複雜，比較"重"的2D控件到Viewport2DVisual3D，并在3D場景中對它應用動畫，将使動畫的畫面出現停頓，是以一個好的解決方法是用VisualBrush将2D控件的實時圖像重新整理到GometryModel3D的表面Material上，這樣可使2D控件不用直接參于到3D場景中去，通過顯示隐藏相關元素一樣可以實作反轉界面的動畫效果
Storyboard的定義
1 <Storyboard x:Key="FrontClick">
2 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Viewport3D"
3 Storyboard.TargetProperty="Visibility">
4 <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}" />
5 <DiscreteObjectKeyFrame KeyTime="0:0:1.1" Value="{x:Static Visibility.Hidden}" />
6 </ObjectAnimationUsingKeyFrames>
7 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backWrapper"
8 Storyboard.TargetProperty="Visibility">
9 <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
10 </ObjectAnimationUsingKeyFrames>
11 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="frontWrapper"
12 Storyboard.TargetProperty="Visibility">
13 <DiscreteObjectKeyFrame KeyTime="0:0:0.05" Value="{x:Static Visibility.Hidden}" />
14 </ObjectAnimationUsingKeyFrames>
15 <DoubleAnimation To="0" Duration="0:0:0.05" Storyboard.TargetName="frontWrapper"
16 Storyboard.TargetProperty="Opacity" />
17 <DoubleAnimation BeginTime="0:0:1.05" Duration="0:0:0.05" To="1"
18 Storyboard.TargetName="backWrapper" Storyboard.TargetProperty="Opacity" />
19 <Point3DAnimation To="0,0,1.1" From="0,0,0.5" BeginTime="0:0:0.05" Duration="0:0:0.5"
20 AutoReverse="True" DecelerationRatio="0.3" Storyboard.TargetName="camera"
21 Storyboard.TargetProperty="(PerspectiveCamera.Position)" />
22 <DoubleAnimation From="0" To="180" AccelerationRatio="0.3" DecelerationRatio="0.3"
23 BeginTime="0:0:0.05" Duration="0:0:1" Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" />
24 </Storyboard>
25 <Storyboard x:Key="BackClick" >
26 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Viewport3D"
27 Storyboard.TargetProperty="Visibility">
28 <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}" />
29 <DiscreteObjectKeyFrame KeyTime="0:0:1.1" Value="{x:Static Visibility.Hidden}" />
30 </ObjectAnimationUsingKeyFrames>
31 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="frontWrapper"
32 Storyboard.TargetProperty="Visibility">
33 <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
34 </ObjectAnimationUsingKeyFrames>
35 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backWrapper"
36 Storyboard.TargetProperty="Visibility">
37 <DiscreteObjectKeyFrame KeyTime="0:0:0.05" Value="{x:Static Visibility.Hidden}" />
38 </ObjectAnimationUsingKeyFrames>
39 <DoubleAnimation To="0" Duration="0:0:0.05" Storyboard.TargetName="backWrapper"
40 Storyboard.TargetProperty="Opacity" />
41 <DoubleAnimation BeginTime="0:0:1.05" Duration="0:0:0.05"
42 Storyboard.TargetName="frontWrapper" Storyboard.TargetProperty="Opacity" />
43 <Point3DAnimation To="0,0,1.1" From="0,0,0.5" BeginTime="0:0:0.05"
44 Duration="0:0:0.5" AutoReverse="True" DecelerationRatio="0.3" Storyboard.TargetName="camera"
oryboard.TargetProperty="(PerspectiveCamera.Position)" />
45 <DoubleAnimation From="180" To="360" AccelerationRatio="0.3"
46 DecelerationRatio="0.3" BeginTime="0:0:0.05" Duration="0:0:1"
47 Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" />
48 </Storyboard>