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控件

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>

时间: 2024-11-07 20:29:50

WPF案例 (五) 对控件界面使用倒影的相关文章

WPF Step By Step 控件介绍

WPF Step By Step 控件介绍 回顾 上一篇,我们主要讨论了WPF的几个重点的基本知识的介绍,本篇,我们将会简单的介绍几个基本控件的简单用法,本文会举几个项目中的具体的例子,结合这些 例子,希望我们可以对WPF的掌握会更深刻.本文涉及的内容可能较多.请大家慢慢看看.错误之处,还请指出. 本文大纲 1.基本控件介绍与用法. 基本控件介绍与用法 文本控件 Label控件 label控件:一般用户描述性文字显示. 在Label控件使用时,一般给予用户提示.用法上没有什么很特殊的,label

WPF 中动态改变控件模板

在某些项目中,可能需要动态的改变控件的模板,例如软件中可以选择不同的主题,在不同的主题下软件界面.控件的样式都会有所不同,这时即可通过改变控件模板的方式实现期望的功能. 基本方法是当用户点击切换主题按钮是加载新的资源字典,并使用新加载的资源字典替代当前的资源字典这时要用到ResourceManager. 假设现有两个不同的资源字典文件Dictionary1.xaml和Dictionary2.xaml存在于Themes文件夹内: 在MainPage中使用其中一个资源字典作为默认样式文件: <Win

Wpf使用Winform控件后Wpf元素被Winform控件遮盖问题的解决

有人会说不建议Wpf中使用Winform控件,有人会说建议使用Winform控件在Wpf下的替代方案,然而在实际工作中由于项目的特殊需求,考虑到时间.成本等因素,往往难免会碰到在WPF中使用Winfrom控件的问题,我们知道Wpf可以通过使用WindowsFormsHost容器调用Winform控件,但是在一些场合需要将Wpf元素显示在Winform控件的上层,此时就会出现Wpf元素被Winform控件遮盖的问题. 一.场景再现 接到公司命令,在时间紧迫的情况下,需要将原来的Winform程序(

WPF管理系统自定义分页控件 - WPF特工队内部资料

原文:WPF管理系统自定义分页控件 - WPF特工队内部资料 最近做一个演示的管理系统项目,需要用到分页控件,在网上找了很多,依然找到与UI模版匹配的,最后干脆自己写一个. 分页控件分析: 1.分页控件分简单显示和复杂显示两种: 2.包含上一页.下一页以及页码明细逻辑处理: 3.页码总数小于7时显示默认显示,大于7时切换复杂显示: 4.页码数.索引.总条数计算等: 先来一张效果图: 啥也不说了直接上代码 MISPager.xaml部分 <ResourceDictionary xmlns="

WPF利用通过父控件属性来获得绑定数据源RelativeSource

WPF利用通过父控件属性来获得绑定数据源RelativeSource 有时候我们不确定作为数据源的对象叫什么名字,但知道作为绑定源与UI布局有相对的关系,如下是一段XAML代码,说明多层布局控件中放置一个文本控件,来显示父级控件的名称. 1.XAML Html代码 <Grid x:Name="g1" Background="Red" Margin="10"> <DockPanel x:Name="d1" Ba

高质量的基于向量条形码产生机制 WPF Drawing API条形码控件

Barcode Professional for WPF条形码控件是一款轻量级的 .NET 程序集,为你的WPF程序生成高质量的基于矢量的条码,支持大多数流行的一维和二维条形码:Code 39, Code 128, GS1-128, GS1 DataBar (RSS-14),  EAN 13 & UPC, Postal (USPS, British Royal Mail, Australia Post, DHL, etc.), Data Matrix, QR Code, PDF 417, UPS

WPF Adorner+附加属性 实现控件友好提示

标题太空泛,直接上图 无论是在验证啊,还是提示方面等一些右上角的角标之类的效果,我们会怎么做? 这里介绍一种稍微简单一些的方法,利用附加属性和Adorner来完成. 例如WPF自带的控件上要加这样的效果,首先继承自原控件然后重写是可以的,但是控件类型太多,重写不过来.这个时候我们唯一能添加的只有附加属性了. 利用附加属性的属性变更事件PropertyChangedCallBack,我们可以获取到宿主对象即Button,然后就可以往Button上加入我们自定义的Adorner了.再添加一个附加属性

添加条码到WPF文本的条形码控件Actipro Bar Code

最近发现MDT推出去的系统的有不同问题,其问题就不说了,主要是策略权限被域继承了.比如我们手动安装的很多东东都是未配置壮态,推的就默认为安全壮态了,今天细找了一下,原来把这个关了就可以了. 添加条码到WPF文本的条形码控件Actipro Bar Code

Xceed WPF表单输入控件Xceed Editors for WPF 免费下载及介绍

Xceed Editors for WPF 是一款包含12种功能强大的WPF编辑控件,用户输入控件,每个控件都具有多种风格主题,包含:日期选择控件.复选框.改进的TextBox.数字输入框.值范围输入框等. 具体功能: DatePicker/Calendar:日期选择控件 MaskedTextBox:为输入文本指定一种标记格式 CheckBox:提供了多种风格的复选框,不像传统的WPF复选框 AutoSelectTextBox:当控件具有焦点时内容被选择 ValueRangeTextBox:添加