在这个程序里对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则成.
![](https://yqfile.alicdn.com/img_1c53668bcee393edac0d7b3b3daff1ae.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_405b18b4b6584ae338e0f6ecaf736533.gif](https://yqfile.alicdn.com/img_405b18b4b6584ae338e0f6ecaf736533.gif?x-oss-process=image/resize,w_1400/format,webp)
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 >
![](https://yqfile.alicdn.com/img_1c53668bcee393edac0d7b3b3daff1ae.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_405b18b4b6584ae338e0f6ecaf736533.gif](https://yqfile.alicdn.com/img_405b18b4b6584ae338e0f6ecaf736533.gif?x-oss-process=image/resize,w_1400/format,webp)
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 >