在WPF程序中,如果相位一个控件或者图片制作一个倒影的效果应该怎么做呢?其实非常简单,只需要利用三个知识点OpacityMask、ScaleTransform以及VisualBrush。

先看OpacityMask属性,该属性可使元素的特定区域透明或者部分透明。OpacityMask接受任何类型的画刷,在本例中,我们使用LinearGradientBrush画刷。

再看ScaleTransform,它是属于WPF中各种变换的一种,它可以放大或缩小元素的坐标系统,从而绘制更大或者更小的图像,对WPF中的变换有兴趣的可以多研究一下,在此不做过多介绍。

VisualBrush,画刷的一种,可以拷贝指定的元素的外观并绘制。

废话太多,现在上代码:

<TextBox Width="200" VerticalContentAlignment="Center" Name="tx" Height="40" FontSize="25" Text="Hello World" ></TextBox>

<!--倒影区域,利用矩形框作为倒影的载体-->

<Rectangle RenderTransformOrigin="0.5 0.5" Height="40" Width="200">

<Rectangle.Fill>

<!--绘制目标元素的外观-->

<VisualBrush Visual="{Binding ElementName=tx}"></VisualBrush>

</Rectangle.Fill>

<!--设置矩形框的OpacityMask属性-->

<Rectangle.OpacityMask>

<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">

<GradientStop Color="AntiqueWhite" Offset="1"/>

<GradientStop Color="Transparent" Offset="0.1"/>

</LinearGradientBrush>

</Rectangle.OpacityMask>

<!--利用ScaleTransform将矩形框翻转-->

<Rectangle.RenderTransform>

<ScaleTransform ScaleY="-1"/>

</Rectangle.RenderTransform>

</Rectangle>

效果如图,做的比较粗糙,大家可以按照这个思路做出更漂亮的效果,欢迎交流

wpf 绘制矩形_WPF制作倒影效果相关推荐

  1. 【WPF学习手记】InkCanvas绘制矩形和椭圆

    前面说到了InkCanvas的基本操作,这里用一个实例来说明具体应用:绘制矩形和椭圆. 效果图 xaml代码 <Window x:Class="WPF_InkCanvas.ROI_In ...

  2. WPF绘制自定义窗口

    原文:WPF绘制自定义窗口 WPF是制作界面的一大利器,下面就用WPF模拟一下360的软件管理界面,360软件管理界面如下: 界面不难,主要有如下几个要素: 窗体的圆角 自定义标题栏及按钮 自定义状态 ...

  3. WPF绘制简单常用的Path

    原文:WPF绘制简单常用的Path 写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画 下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比 ...

  4. WPF 绘制对齐像素的清晰显示的线条

    WPF 绘制对齐像素的清晰显示的线条 原文:WPF 绘制对齐像素的清晰显示的线条 版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.欢迎转载.使用.重新发布, ...

  5. SVG基本使用(一、基本概念、使用方法、绘制矩形/圆/椭圆/直线/折现/多边形/)

    一.SVG概念 1.什么是SVG? SVG英文全称为Scalable Vector Graphics,意思为可缩放的矢量图 2.位图和矢量图 在计算机中有两种图形, 一种是位图, 一种是矢量图 2.1 ...

  6. cad绘制椭圆的方法有几种_CAD新手入门教学:如何绘制矩形?

    各位热爱CAD的知友们,图图开了一个[电脑版的CAD教程]合辑,以后每周五给大家分享CAD教程啦,记得一定要来看呀!(仅为新手教学,大佬看见可直接说出更简易操作) 其实绘制矩形在CAD中来说,真的是一 ...

  7. python PyQt5如何绘制矩形框?(画框/绘框)

    参考代码: from PyQt5.QtWidgets import QWidget, QApplication, QLabel from PyQt5.QtCore import QRect, Qt f ...

  8. opencv进阶学习笔记6:使用鼠标在图像上绘制矩形框或者多边形框

    基础版笔记传送门: python3+opencv学习笔记汇总目录(适合基础入门学习) 进阶版笔记目录: python+opencv进阶版学习笔记目录(适合有一定基础) 感兴趣区域传统绘制: openc ...

  9. canvas基础-绘制矩形(1)

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的& ...

最新文章

  1. sql server 关联更新
  2. loj #143. 质数判定
  3. Thread Group(线程组)
  4. 如何使用.NET配置文件(二)
  5. Why product sales area is not replicated to CRM
  6. MySQL优化(一):表结构优化
  7. Python 爬虫学习 系列教程
  8. html语言怎样设置密码类型,html – 在使用contenteditable div时模仿密码类型输入
  9. 现代图论笔记(二)树与二分图
  10. 移动设备安全隐患分析
  11. n皇后---一维数组解法
  12. 字符串拼接的双引号和单引号问题,转义字符
  13. 【Flutter】Dart数据类型之String
  14. GIF动态图片分解,多帧动态图分解成多张静态图片
  15. FLASH PLAYER 谷歌浏览器浏览网站无法正常显示的问题
  16. 悉尼大学计算机研究生学制,悉尼大学研究生一般读几年?九大领域研究生学制盘点!...
  17. Pintia(拼题A)刷题插件 on VS Code
  18. 用JavaScript查找斜边
  19. Informerd详解(2)与C#百度地图定位显示项目学习
  20. 用Navicat连接MySQL的安装及配置

热门文章

  1. 组卷积(group convolution)
  2. PTA5-1 最大子列和问题
  3. 跨境电商ERP哪个好?
  4. LeetCode每日一题:2.两数相加
  5. 吴恩达机器学习(五)正则化(解决过拟合问题)
  6. vue 刷新echarts_用Vue开发动态刷新Echarts组件(以及修改时遇到的问题)
  7. html 父模板,详解vue父子模版嵌套案例
  8. 在CentOS上安装Docker
  9. 安装easydict
  10. oracle内置函数 trunc 使用