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 的，还有很多萌妹。