开发者社区> 杰克.陈> 正文

wpf 实现实时毛玻璃(live blur)效果

简介: 原文:wpf 实现实时毛玻璃(live blur)效果 I2OS7发布后,就被它的时实模糊吸引了,就想着能不能将这个效果引入到我们的产品上。
+关注继续查看
原文:wpf 实现实时毛玻璃(live blur)效果

I2OS7发布后,就被它的时实模糊吸引了,就想着能不能将这个效果引入到我们的产品上。拿来当mask肯定会很爽,其实在之前也做过类似的,但是不是实时效果,是死的,只是截图然后模糊,当背景,效果可想而知。


然后就想着自己做实时滤镜,   自己写了高斯模糊算法,模糊效果还算可以,但是背景取样效率太低,也试过优化这个过程。试过:将截图缩小,再模糊,再放大,模糊时先横向再纵向,最终效果还是不理想。

最后 发现WPF里的自VisualBrush就可以轻松完成这个效果。 惊恐


首先来一张最终运行的效果图:



这里为了确定它真的是实时的,我将两个图片放在ScrollViewer里面。以便可以拖动预览效果。这里的模糊半径是80


主要思路是,在BlurMask里面添加一个Border,这个Border的背景就是实时模糊效果。

模糊层我是自定义了一个BlurMask控件,该控件继承Grid,以便在上面添加内容,也方便在没有被BlurMask覆盖的时候将模糊效果切断(下面那个小的模糊区域)。

BlurMask中最主要的代码:其中targetpanel就是需要覆盖的那个控件


Border border=new Border();
VisualBrush brush = new VisualBrush();
brush.Visual = targetPanel;
brush.Stretch = Stretch.Uniform;
border.Background = brush;
border.Effect = new BlurEffect()
	{
		Radius = 80,
		RenderingBias = RenderingBias.Performance
	}
border.Margin = new Thickness(-this.Margin.Left, -this.Margin.Top, 0, 0);



这样我们就能实时的将targetpanel模糊,并显示到Border的背景上。接下来需要做的就是将border添加到Grid中


this.ClipToBounds = true;
this.Children.Clear();
this.Children.Add(border);


主要代码就这么一些,然后我们要做的是暴露需要设置的参数 模糊半径和遮罩目标。



源码下载


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WPF钟表效果实现
中WPF中的RotateTransform实现UI元素的旋转,并模拟钟表的秒针、分针和时针。
910 0
WPF实现强大的动态公式计算
数据库可以定义表不同列之间的计算公式,进行自动公式计算,但如何实现行上的动态公式计算呢?行由于可以动态扩展,在某些应用场景下将能很好的解决实际问题。本文就探讨一下如何在WPF中实现一种基于行字段的动态公式计算。
754 0
C# WPF上位机实现和下位机TCP通讯
C# WPF上位机实现和下位机TCP通讯下位机使用北京大华程控电源DH1766-1,上位机使用WPF。实现了电压电流实时采集,曲线显示。上午在公司调试成功,手头没有程控电源,使用TCP服务端模拟。昨天写的TCP服务端正好排上用场。
2119 0
WPF实现窗体中的悬浮按钮
原文:WPF实现窗体中的悬浮按钮 WPF实现窗体中的悬浮按钮,按钮可拖动,吸附停靠在窗体边缘。 控件XAML代码: ...
1860 0
WPF 实现 DataGrid/ListView 分页控件
原文:WPF 实现 DataGrid/ListView 分页控件 在WPF中,通常会选用DataGrid/ListView进行数据展示,如果数据量不多,可以直接一个页面显示出来。如果数据量很大,2000条数据,一次性显示在一个页面中,不仅消耗资源,而且用户体验也很糟糕。
1565 0
WPF实现TextBox水印效果
原文:WPF实现TextBox水印效果 在日常项目中,一个TextBox需要输入用户名,我们通常的做法是先用一个TextBlock来说明,例如下面的截图: 今天将使用另外一种方式来展示,使用水印的方式。
1444 0
WPF 实现带标题的TextBox
原文:WPF 实现带标题的TextBox 这篇博客将分享在WPF中如何创建一个带Title的TextBox。首先请看一下最终的效果, 实现思路:使用TextBlock+TextBox来实现,TextBlock用来显示Title。
1019 0
WPF MVVM模式下实现ListView下拉显示更多内容
原文:WPF MVVM模式下实现ListView下拉显示更多内容 在手机App中,如果有一个展示信息的列表,通常会展示很少一部分,当用户滑动到列表底部时,再加载更多内容。这样有两个好处,提高程序性能,减少网络流量。
1365 0
WPF中实现多选ComboBox控件
原文:WPF中实现多选ComboBox控件 在WPF中实现带CheckBox的ComboBox控件,让ComboBox控件可以支持多选。 将ComboBox的ItemsSource属性Binding到一个Book的集合, public class Book { ...
3010 0
抛砖引玉 【镜像控件】 WPF实现毛玻璃控件不要太简单
原文:抛砖引玉 【镜像控件】 WPF实现毛玻璃控件不要太简单 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Vblegend_2013/article/details/83447420 ...
1438 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载