WPF案例 (五) 对控件界面使用倒影

标签：

  在这个程序里对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>

界面倒影

  1 <Viewport3D x:Name="reflectionViewPort3D" Opacity="0.8" IsHitTestVisible="False" 
  2             RenderOptions.EdgeMode="Aliased" ClipToBounds="False" 
  3                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
  4             <Viewport3D.Camera>
  5                 <PerspectiveCamera Position="-0.3,-0.5,9"   />
  6             </Viewport3D.Camera>
  7             <Viewport3D.OpacityMask>
  8                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  9                     <GradientStop Color="#00000000"  Offset="0.55"/>
 10                     <GradientStop Color="#FFFFFFFF" Offset="0.01"/>
 11                 </LinearGradientBrush>
 12             </Viewport3D.OpacityMask>
 13             <ModelVisual3D>
 14                 <ModelVisual3D.Content>
 15                     <AmbientLight Color="White"/>
 16                 </ModelVisual3D.Content>
 17             </ModelVisual3D>
 18             <ModelVisual3D >
 19                 <ModelVisual3D.Content>
 20                     <Model3DGroup x:Name="reflctionRoom">
 21                         <Model3DGroup.Children>
 22                              <GeometryModel3D x:Name="reflctionChild0" 
 23                                      Geometry="{StaticResource geometry1}" >
 24                                 <GeometryModel3D.Material>
 25                                     <DiffuseMaterial>
 26                                         <DiffuseMaterial.Brush>
 27                                             <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D0, Path=Visual}"/>
 28                                         </DiffuseMaterial.Brush>
 29                                     </DiffuseMaterial>
 30                                 </GeometryModel3D.Material>
 31                                 <GeometryModel3D.Transform>
 32                                     <Transform3DGroup>
 33                                         <RotateTransform3D>
 34                                             <RotateTransform3D.Rotation>
 35                                                 <AxisAngleRotation3D Axis="0,1.,0" Angle="-45"/>
 36                                             </RotateTransform3D.Rotation>
 37                                         </RotateTransform3D>
 38                                         <TranslateTransform3D OffsetX="-2.12" OffsetY="2" OffsetZ="0" />
 39                                         <ScaleTransform3D ScaleY="-1"/>
 40                                     </Transform3DGroup>
 41                                 </GeometryModel3D.Transform>
 42                              </GeometryModel3D>
 43                             <GeometryModel3D x:Name="reflctionChild1" Geometry="{StaticResource geometry1}" >
 44                                 <GeometryModel3D.Material>
 45                                     <DiffuseMaterial>
 46                                         <DiffuseMaterial.Brush>
 47                                             <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D1, Path=Visual}"/>
 48                                         </DiffuseMaterial.Brush>
 49                                     </DiffuseMaterial>
 50                                 </GeometryModel3D.Material>
 51                                 <GeometryModel3D.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="2" OffsetZ="0" />
 59                                         <ScaleTransform3D ScaleY="-1"/>
 60                                     </Transform3DGroup>
 61                                 </GeometryModel3D.Transform>
 62                             </GeometryModel3D>
 63                             <GeometryModel3D x:Name="reflctionChild2" Geometry="{StaticResource geometry1}" >
 64                                 <GeometryModel3D.Material>
 65                                     <DiffuseMaterial>
 66                                         <DiffuseMaterial.Brush>
 67                                             <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D2, Path=Visual}"/>
 68                                         </DiffuseMaterial.Brush>
 69                                     </DiffuseMaterial>
 70                                 </GeometryModel3D.Material>
 71                                 <GeometryModel3D.Transform>
 72                                     <Transform3DGroup>
 73                                         <RotateTransform3D>
 74                                             <RotateTransform3D.Rotation>
 75                                                 <AxisAngleRotation3D Axis="0,1.,0" Angle="-45"/>
 76                                             </RotateTransform3D.Rotation>
 77                                         </RotateTransform3D>
 78                                         <TranslateTransform3D OffsetX="0.71" OffsetY="2" OffsetZ="0" />
 79                                         <ScaleTransform3D ScaleY="-1"/>
 80                                     </Transform3DGroup>
 81                                 </GeometryModel3D.Transform>
 82                             </GeometryModel3D>
 83                             <GeometryModel3D x:Name="reflctionChild3" Geometry="{StaticResource geometry1}" >
 84                                 <GeometryModel3D.Material>
 85                                     <DiffuseMaterial>
 86                                         <DiffuseMaterial.Brush>
 87                                             <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D3, Path=Visual}"/>
 88                                         </DiffuseMaterial.Brush>
 89                                     </DiffuseMaterial>
 90                                 </GeometryModel3D.Material>
 91                                 <GeometryModel3D.Transform>
 92                                     <Transform3DGroup>
 93                                         <RotateTransform3D>
 94                                             <RotateTransform3D.Rotation>
 95                                                 <AxisAngleRotation3D Axis="0,1.,0" Angle="45"/>
 96                                             </RotateTransform3D.Rotation>
 97                                         </RotateTransform3D>
 98                                         <TranslateTransform3D OffsetX="3.54" OffsetY="2" OffsetZ="0" />
 99                                         <ScaleTransform3D ScaleY="-1"/>
100                                     </Transform3DGroup>
101                                 </GeometryModel3D.Transform>
102                             </GeometryModel3D>
103                             <GeometryModel3D x:Name="reflctionChild4" Geometry="{StaticResource geometry1}" >
104                                 <GeometryModel3D.Material>
105                                     <DiffuseMaterial>
106                                         <DiffuseMaterial.Brush>
107                                             <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D4, Path=Visual}"/>
108                                         </DiffuseMaterial.Brush>
109                                     </DiffuseMaterial>
110                                 </GeometryModel3D.Material>
111                                 <GeometryModel3D.Transform>
112                                     <Transform3DGroup>
113                                         <RotateTransform3D>
114                                             <RotateTransform3D.Rotation>
115                                                 <AxisAngleRotation3D Axis="0,1,0" Angle="45"/>
116                                             </RotateTransform3D.Rotation>
117                                         </RotateTransform3D>
118                                         <TranslateTransform3D OffsetX="-2.12" OffsetY="2" OffsetZ="-0" />
119                                         <ScaleTransform3D ScaleY="-1"/>
120                                     </Transform3DGroup>
121                                 </GeometryModel3D.Transform>
122                             </GeometryModel3D>
123                         </Model3DGroup.Children>
124                     </Model3DGroup>
125                 </ModelVisual3D.Content>
126             </ModelVisual3D>
127     </Viewport3D>

WPF案例 (五) 对控件界面使用倒影

标签：

原文地址：http://www.cnblogs.com/lonelyxmas/p/4558496.html