前一阵子,各大IT新闻聚合网站纷纷发布了这样一个新闻:微软又一次提出了改进版的UI设计语言,Project Neon。从给出的概念图来看,这种风格涉及到大量的模糊透明,甚至包括窗体背景的透明:
对于希望第一时间采用新设计语言的开发者来说,任何不提供API支持的UI设计语言都是耍流氓。微软在SDK 15021版本里提供了实现窗体背景透明的API,自此,Neon设计语言涉及到的所有元素都可以被实现。本文将要阐述的,就是如何编写一个高斯模糊的覆盖层,以及如何让窗体背景半透明。
1、高斯模糊覆盖层
窗体内的高斯模糊覆盖层很早就能实现了,这需要借助Win2D开源项目。新建一个空白的UWP应用程序(C#),准备一张图片,届时我会演示如何在这张图片上叠加一个高斯模糊半透明的覆盖层。
等待解决方案创建完毕,将事先准备好的图片添加进项目下的Assets目录:
然后在MainPage.xaml里编写代码,让它看起来是这个样子:
在右上角搜索Nuget并进入Nuget包管理工具,浏览并搜索Win2D,并将其安装到项目:
现在开始编写C#代码。为了方便解释,我们先写这样一个函数:
我们来整理一下思路。为了实现一个高斯模糊的覆盖层,我们首先需要取得充当覆盖层的UI元件的混成器,然后利用Win2D开源库创建一个高斯模糊的效果,由于高斯效果需要依赖覆盖层底部的显示结果来实现,所以需要取得覆盖层的BackdropBrush,并将其设置为效果的源,并调整效果的其它参数。然后我们需要把这个效果应用到UI元件,并编写代码确保效果区域总是和效果主体的大小保持一致。将上述思路转化为下面的代码:
最后,这个模糊的产生应该在页面的构造阶段,所以在构造函数下引用该方法,使GlassHost获得高斯模糊效果:
别忘了,这些名称空间是需要被引用的:
启动这个UWP,我们来看看效果:
效果还不错,对吧。即使被覆盖住的是UI元素,这种方法也能保证正确产生高斯效果。