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

原文: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控件

                   </Viewport3D>

界面倒影

                                </Viewport3D>