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

简介: 原文:WPF案例 (五) 对控件界面使用倒影  在这个程序里对5个2D控件界面应用了垂直倒影,边缘模糊化和模型变换,在本例中,这5个2D控件为Border, 各包含了一幅Image,界面如下图所示,源码从这里下载       本例中使用Viewport2DVisual3D来呈现2D的Bor...
原文: 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则成.

img_405b18b4b6584ae338e0f6ecaf736533.gif 呈现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 >
img_405b18b4b6584ae338e0f6ecaf736533.gif 界面倒影
  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 >
目录
相关文章
|
2月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道,在绘制流程图时,当选择或鼠标移动到控件时,都会在控件的四周出现锚点,以便于修改大小,移动位置,或连接线等,那此功能是如何实现的呢?在WPF开发中,想要在控件四周实现锚点,可以通过装饰器来实现,今天通过一个简单的小例子,简述如何在WPF开发中,应用装饰器,仅供学习分享使用,如有不足之处,还请指正。
41 1
|
2月前
|
前端开发 C# 容器
浅谈WPF之控件拖拽与拖动
使用过office的visio软件画图的小伙伴都知道,画图软件分为两部分,左侧图形库,存放各种图标,右侧是一个画布,将左侧图形库的图标控件拖拽到右侧画布,就会生成一个新的控件,并且可以自由拖动。那如何在WPF程序中,实现类似的功能呢?今天就以一个简单的小例子,简述如何在WPF中实现控件的拖拽和拖动,仅供学习分享使用,如有不足之处,还请指正。
65 2
|
2月前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
|
3月前
|
算法 C# UED
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计,同时还推出了以模板为核心的新一代设计理念。在WPF中,通过引入模板,将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类:数据模板【Data Template】和控件模板【Control Template】。
73 8
|
5月前
|
C#
WPF使用Blazor的快速案例
WPF使用Blazor的快速案例
63 0
WPF使用Blazor的快速案例
|
6月前
|
定位技术 C# UED
WPF技术之ScrollViewer控件
WPF ScrollViewer是WPF中常用的一个控件,它提供了滚动视图的功能,可用于显示超出容器可视区域的内容。ScrollViewer通常用于容纳大量内容的控件,以在有限的空间内显示这些内容,并允许用户通过滚动来查看隐藏的部分。
498 0
|
6月前
|
C# Windows
WPF技术之RichTextBox控件
WPF RichTextBox是Windows Presentation Foundation (WPF)中提供的一个强大的文本编辑控件,它可以显示富文本格式的文本,支持多种文本处理操作。
286 0
|
6月前
|
前端开发 C#
WPF技术之ContentControl 控件
ContentControl 是 WPF 中的一个常见控件,用于显示单个内容元素。它可以包含任意类型的内容,包括文本、图像、控件等。
559 0
|
6月前
|
XML C# 数据格式
WPF技术之DocumentViewer控件
WPF 的 DocumentViewer 是一个强大的控件,用于在应用程序中显示各种类型的文档,如 XPS(XML Paper Specification)、FlowDocument 和 FixedDocument 等。
742 1
|
6月前
|
搜索推荐 C# Windows
WPF技术之MediaElement控件
WPF(Windows Presentation Foundation)MediaElement是一种用于创建用户界面的框架,它提供了丰富的图形、多媒体和动画功能。它可以播放各种类型的音频和视频文件,包括本地文件和网络流。
231 0