WPF中实现模仿CSS效果的图片悬停和模糊特性

先看一下效果吧:

原博主的地址: 【动画进阶】神奇的卡片 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 的,还有很多萌妹。

热门手游下载
下载排行榜