标签：

在这个程序里对5个2D控件界面应用了垂直倒影，边缘模糊化和模型变换，在本例中，这5个2D控件为Border, 各包含了一幅Image,界面如下图所示，源码从这里下载

本例中使用Viewport2DVisual3D来呈现2D的Border,Border中包含了Image，对Viewport2DVisual3D使用了RotateTransform3D模型变换，以使Viewport2DVisual3D向左或者向右倾斜45度角，为使处于左右两端的Image能和背景图融为一体，使用LinearGradientBrush为这两幅Image设置了渐变的透明蒙板OpacityMask，

设置垂直倒影主要使用了VisualBrush和ScaleTransform3D，VisualBrush用来反射Image的图像，并将图像填充到GeometryModel3D的Material属性，通过设置ScaleTransform3D元素的属性ScaleY="-1"，可变换模型以X轴为坐标向下180度倒置，由于对Image使用了RotateTransform3D变换，因此对反射Image图像的GeometryModel3D也需使用相同的RotateTransform3D变换 ，另外对控件的倒影设置了0.8个值的透明度，以便能清晰的显示2D控件界面并模糊控件界面的倒影

在呈现2D控件的时候，多次使用了Viewport2DVisual3D，但在反射控件界面倒影的时候，仅使用了一个ModelVisual3D元素，ModelVisual3D元素的Content属性值被设置为一个Model3DGroup元素，Model3DGroup是一个集合类，用来打包GeometryModel3D ，而2D Image的界面倒影图像最终填充到GeometryModel3D的Material属性上，因此在反射2D控件界面倒影的时候，，使过Model3DGroup来组合GeometryModel3D ,只需要定义一个ModelVisual3D则成.

呈现2D控件

  1 <Viewport3D x:Name="viewPort3D" IsHitTestVisible="False" RenderOptions.EdgeMode="Aliased" 
  2                ClipToBounds="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
  3             <Viewport3D.Camera>
  4                 <PerspectiveCamera Position="-0.3,-0.5,9"   />
  5             </Viewport3D.Camera>
  6             <ModelVisual3D>
  7                 <ModelVisual3D.Content>
  8                     <AmbientLight Color="White"/>
  9                 </ModelVisual3D.Content>
 10             </ModelVisual3D>
 11             <Viewport2DVisual3D x:Name="viewport2DVisual3D0" Geometry="{StaticResource geometry1}" 
 12                                    Material="{StaticResource material}">
 13                 <Viewport2DVisual3D.Transform>
 14                     <Transform3DGroup>
 15                         <Transform3DGroup>
 16                             <RotateTransform3D>
 17                                 <RotateTransform3D.Rotation>
 18                                     <AxisAngleRotation3D Axis="0,1.,0" Angle="-45"/>
 19                                 </RotateTransform3D.Rotation>
 20                             </RotateTransform3D>
 21                             <TranslateTransform3D OffsetX="-2.12" OffsetY="0" OffsetZ="0" />
 22                         </Transform3DGroup>
 23                     </Transform3DGroup>
 24                 </Viewport2DVisual3D.Transform>
 25                 <Viewport2DVisual3D.Visual>
 26                     <Border  Style="{StaticResource border}">
 27                         <Image Source="Images\050817goodfeng14.jpg"  Opacity="1"  />
 28                     </Border>
 29                     </Viewport2DVisual3D.Visual>
 30             </Viewport2DVisual3D>
 31             <Viewport2DVisual3D x:Name="viewport2DVisual3D1" 
 32                  Geometry="{StaticResource geometry1}" Material="{StaticResource material}">
 33                 <Viewport2DVisual3D.Transform>
 34                     <Transform3DGroup>
 35                         <RotateTransform3D>
 36                             <RotateTransform3D.Rotation>
 37                                 <AxisAngleRotation3D Axis="0,1.,0" Angle="45"/>
 38                             </RotateTransform3D.Rotation>
 39                         </RotateTransform3D>
 40                         <TranslateTransform3D OffsetX="0.71" OffsetY="0" OffsetZ="0" />
 41                     </Transform3DGroup>
 42                 </Viewport2DVisual3D.Transform>
 43                 <Viewport2DVisual3D.Visual>
 44                     <Border  Style="{StaticResource border}">
 45                         <Image Source="Images\051027nature10.jpg"  Opacity="1"/>
 46                     </Border>
 47                 </Viewport2DVisual3D.Visual>
 48             </Viewport2DVisual3D>
 49             <Viewport2DVisual3D x:Name="viewport2DVisual3D2" 
 50                      Geometry="{StaticResource geometry1}" Material="{StaticResource material}">
 51                 <Viewport2DVisual3D.Transform>
 52                     <Transform3DGroup>
 53                         <RotateTransform3D>
 54                             <RotateTransform3D.Rotation>
 55                                 <AxisAngleRotation3D Axis="0,1.,0" Angle="-45"/>
 56                             </RotateTransform3D.Rotation>
 57                         </RotateTransform3D>
 58                         <TranslateTransform3D OffsetX="0.71" OffsetY="0" OffsetZ="0" />
 59                     </Transform3DGroup>
 60                 </Viewport2DVisual3D.Transform>
 61                 <Viewport2DVisual3D.Visual>
 62                     <Border  Style="{StaticResource border}" >
 63                         <Image Source="Images\051027nature11.jpg" Opacity="1" />
 64                     </Border>
 65                 </Viewport2DVisual3D.Visual>
 66             </Viewport2DVisual3D>
 67             <Viewport2DVisual3D x:Name="viewport2DVisual3D3" 
 68                     Geometry="{StaticResource geometry1}" Material="{StaticResource material}">
 69                 <Viewport2DVisual3D.Transform>
 70                     <Transform3DGroup>
 71                         <RotateTransform3D>
 72                             <RotateTransform3D.Rotation>
 73                                 <AxisAngleRotation3D Axis="0,1.,0" Angle="45"/>
 74                             </RotateTransform3D.Rotation>
 75                         </RotateTransform3D>
 76                         <TranslateTransform3D OffsetX="3.54" OffsetY="0" OffsetZ="0" />
 77                     </Transform3DGroup>
 78                 </Viewport2DVisual3D.Transform>
 79                 <Viewport2DVisual3D.Visual>
 80                     <Border  Style="{StaticResource border}" >
 81                         <Image Source="Images\051123Webshots16.jpg" Opacity="1">
 82                             <Image.OpacityMask>
 83                                 <LinearGradientBrush EndPoint="0.012,0.5" StartPoint="0.994,0.5">
 84                                     <GradientStop Color="#00000000" Offset="0"/>
 85                                     <GradientStop Color="#FFFFFFFF" Offset="1"/>
 86                                 </LinearGradientBrush>
 87                             </Image.OpacityMask>
 88                         </Image>
 89                     </Border>
 90                 </Viewport2DVisual3D.Visual>
 91             </Viewport2DVisual3D>
 92             <Viewport2DVisual3D x:Name="viewport2DVisual3D4" 
 93                      Geometry="{StaticResource geometry1}" Material="{StaticResource material}">
 94                 <Viewport2DVisual3D.Transform>
 95                     <Transform3DGroup>
 96                         <RotateTransform3D>
 97                             <RotateTransform3D.Rotation>
 98                                 <AxisAngleRotation3D Axis="0,1,0" Angle="45"/>
 99                             </RotateTransform3D.Rotation>
100                         </RotateTransform3D>
101                         <TranslateTransform3D OffsetX="-2.12" OffsetY="0" OffsetZ="-0" />
102                     </Transform3DGroup>
103                 </Viewport2DVisual3D.Transform>
104                 <Viewport2DVisual3D.Visual>
105                     <Border  Style="{StaticResource border}">
106                         <Image Source="Images\050817goodfeng15.jpg" Opacity="1" >
107                             <Image.OpacityMask>
108                                 <LinearGradientBrush EndPoint="0.994,0.5" StartPoint="0.012,0.5">
109                                     <GradientStop Color="#00000000" Offset="0"/>
110                                     <GradientStop Color="#FFFFFFFF" Offset="1"/>
111                                 </LinearGradientBrush>
112                             </Image.OpacityMask>
113                         </Image>
114                     </Border>
115                 </Viewport2DVisual3D.Visual>
116             </Viewport2DVisual3D>
117  </Viewport3D>