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 >
目录
相关文章
|
5月前
|
编解码 C# 数据库
C# + WPF 音频播放器 界面优雅,体验良好
【9月更文挑战第18天】这是一个用 C# 和 WPF 实现的音频播放器示例,界面简洁美观,功能丰富。设计包括播放/暂停按钮、进度条、音量控制滑块、歌曲列表和专辑封面显示。功能实现涵盖音频播放、进度条控制、音量调节及歌曲列表管理。通过响应式设计、动画效果、快捷键支持和错误处理,提升用户体验。可根据需求扩展更多功能。
196 3
|
6月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
|
6月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
162 1
|
6月前
|
C# Windows
WPF中如何使用HandyCotrol控件库
WPF中如何使用HandyCotrol控件库
275 1
|
6月前
|
开发框架 前端开发 JavaScript
WPF应用开发之控件动态内容展示
WPF应用开发之控件动态内容展示
|
6月前
|
C# 前端开发 UED
WPF数据验证实战:内置控件与自定义规则,带你玩转前端数据验证,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,数据验证是确保输入正确性的关键环节。前端验证能及时发现错误,提升用户体验和程序可靠性。本文对比了几种常用的WPF数据验证方法,并通过示例展示了如何使用内置验证控件(如`TextBox`)及自定义验证规则实现有效验证。内置控件结合`Validation`类可快速实现简单验证;自定义规则则提供了更灵活的复杂逻辑支持。希望本文能帮助开发者更好地进行WPF数据验证。
231 0
|
6月前
|
C# UED 开发者
WPF动画大揭秘:掌握动画技巧,让你的界面动起来,告别枯燥与乏味!
【8月更文挑战第31天】在WPF应用开发中,动画能显著提升用户体验,使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法,包括平移、缩放、旋转等常见类型,并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
358 0
|
6月前
|
容器 C# 开发者
XAML语言大揭秘:WPF标记的魅力所在,让你轻松实现界面与逻辑分离,告别复杂代码!
【8月更文挑战第31天】XAML提供了一种直观且易于维护的界面设计方式,使得开发者可以专注于逻辑和业务代码的编写,而无需关心界面细节。通过数据绑定、布局管理和动画效果等特性,XAML可以实现丰富的界面交互和视觉效果。在实际开发过程中,开发者应根据具体需求选择合适的技术方案,以确保应用程序能够满足用户的需求。希望本文的内容能够帮助您在WPF应用程序开发中更好地利用XAML语言。
70 0
|
6月前
|
数据处理 开发者 C#
WPF数据绑定实战:从零开始,带你玩转数据与界面同步,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,数据绑定是核心技能之一,它能实现界面元素与数据源的同步更新。本文详细介绍了WPF数据绑定的概念与实现方法,包括属性绑定、元素绑定及路径绑定等技术,并通过示例代码展示了如何创建数据绑定。通过数据绑定,开发者不仅能简化代码、提高可维护性,还能提升用户体验。无论初学者还是有经验的开发者,都能从中受益,更好地掌握WPF数据绑定技巧。
143 0
|
6月前
|
C# UED 定位技术
WPF控件大全:初学者必读,掌握控件使用技巧,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,控件是实现用户界面交互的关键元素。WPF提供了丰富的控件库,包括基础控件(如`Button`、`TextBox`)、布局控件(如`StackPanel`、`Grid`)、数据绑定控件(如`ListBox`、`DataGrid`)等。本文将介绍这些控件的基本分类及使用技巧,并通过示例代码展示如何在项目中应用。合理选择控件并利用布局控件和数据绑定功能,可以提升用户体验和程序性能。
207 0