WPF中实现模仿CSS效果的图片悬停和模糊特性
扫描二维码随身看资讯
使用手机 二维码应用 扫描右侧二维码,您可以
1. 在手机上细细品读~
2. 分享给您的微信好友或朋友圈~
先看一下效果吧:
原博主的地址: 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究 - ChokCoco - 博客园 (cnblogs.com)
原效果是一个 CSS 效果,我们采用 WPF 的方式模仿一下。
因为技术有限,没有原博主的那么好看,毕竟盗版永远比不过原版...
然后这里看一下盗版的怎么写吧。
先是拿到原版的图片(原博客里面有图片地址),当然也可以自己挑一张自己喜欢的图片,把图片保存到自己的 WPF 项目下面。
再把图片运用到代码里面去,给一个 border 的背景设置成图片,再给 border 设置一个圆角,就会得到一个圆角的图片。
然后再给图片添加一个模糊效果。
模糊效果的实现就是在图片的下面一层添加一个同样的 border,但是设置不同的 margin,让它比正常显示的图片大一圈。
红色部分就是添加的模糊层,添加以后就会得到下面的效果。
然后最重要的就是剩下的悬停效果。
我们先准备一个背景色,原版的背景色我不知道怎么实现,所以只能用不同的背景色做为底色了。
把这个背景放到最下面就会得到下面的效果( 这里遇到个问题,不知道怎么把超出 border 以外的虚化效果裁掉,导致 border 以外也有一点点的模糊效果 )
( 原博是通过设置外层的 overflow: hidden; 来实现的,但是我不知道 WPF 怎么实现这个效果,查了半天也没查到 )
代码如下,就是一个带有渐变色的 border。
然后就是实现悬停效果,在实现悬停效果以前先给 bd2 添加一个 clip 效果。
关于 clip 的解释,可以看一下微软对于 clip 效果的说明。
把这段代码放到明为 bd2 的 border 下面就可以了。
但是还需要一些后台代码,控制一下这个 clip 的移动,我们给最外层的名为 gd1 的 grid 添加几个事件。
然后我们让默认情况下 bd2 的 Visibility="Hidden"。
效果就完成了...
如果有更好的解决办法,可以和我联系哦。
项目 GitHub 地址: bearhanQ/WPFFramework: Share some experience (github.com)
QQ 技术交流群:332035933;
欢迎进群讨论问题,不论是 winform,还是 WPF,还是 .net core 的,还有很多萌妹。
- 1
大富翁go 官网版
- 2
一战到底游戏
- 3
坏蛋冰淇淋
- 4
叫叫学院app官方版
- 5
couple game 正式版
- 6
couple game 免费下载
- 7
连连看消消乐游戏
- 8
罗斯方块游戏
- 9
蛋仔派对 网易版官服
- 10
夏哈塔遭难的一天 1.03最新版下载