Win10 UWP开发技巧:应用窗口实现毛玻璃效果

  • 时间:
  • 浏览:0

感谢IT之家女女网友DotNet码农的投稿

前一阵子,各大IT新闻聚合网站纷纷发布了从前4个 新闻:微软又一次提出了改进版的UI设计语言,Project Neon。从给出的概念图来看,这人风格涉及到絮状的模糊透明,甚至包括窗体背景的透明:

对于希望第一时间采用新设计语言的开发者来说,任何不提供API支持的UI设计语言也有耍流氓。微软在SDK 20021版本里提供了实现窗体背景透明的API,自此,Neon设计语言涉及到的所有元素都还时需被实现。本文将要阐述的,很多很多如何编写4个 高斯模糊的覆盖层,以及如何让窗体背景半透明。

1、高斯模糊覆盖层

窗体内的高斯模糊覆盖层很早就能实现了,这时需借助Win2D开源项目。新建4个 空白的UWP线程池池(C#),准备一张图片,届时我会演示如何在这张图片上叠加4个 高斯模糊半透明的覆盖层。

停留补救方案创建完毕,将你要准备好的图片加进去去进项目下的Assets目录:

如何让在MainPage.xaml里编写代码,让它看起来是这人样子:

在右上角搜索Nuget并进入Nuget包管理工具,浏览并搜索Win2D,并将其安里装项目:

现在开始英文了编写C#代码。为了方便解释,亲们先写从前4个 函数:

亲们来架构设计 一下思路。为了实现4个 高斯模糊的覆盖层,亲们首先时需取得充当覆盖层的UI元件的混成器,如何让利用Win2D开源库创建4个 高斯模糊的效果,如何让高斯效果时需依赖覆盖层底部的显示结果来实现,很多很多时需取得覆盖层的BackdropBrush,并将其设置为效果的源,并调整效果的其它参数。如何让亲们时需把这人效果应用到UI元件,并编写代码确保效果区域4个劲和效果主体的大小保持一致。将上述思路转化为下面的代码:

最后,这人模糊的产生应该在页面的构造阶段,很多很多在构造函数下引用该土辦法 ,使GlassHost获得高斯模糊效果:

别忘了,哪几个名称空间是时需被引用的:

启动这人UWP,亲们来看看效果:

效果还不错,对吧。即使被覆盖住的是UI元素,这人土辦法 还可不都可以保证正确产生高斯效果。

2、UWP窗体半透明

使窗体获得半透明效果的思路和底下一模一样,很多很多被采样的是整个窗体覆盖处的显示。取得这人笔刷时时需到20021你要的SDK,很多很多新建4个 项目,并将其目标平台设置为超过20021的版本:

记得引用Win2D库。亲们不对XAML作修改,如何让亲们很多很多演示如何获得窗体半透效果。将那个覆盖了整个页面的Grid命名为rootGrid:

依然是编写4个 这人的初始化透明效果的土辦法 ,如何让为了突出效果,亲们把模糊参数改成从前:

别忘了修改时需获取的笔刷:

将:

修改为:

同理,在构造函数里,给rootGrid应用效果。执行应用,观察效果:

这大概很多很多亲们你要的效果吧。

事实上,采用CreateHostBackdropBrush()获取的背景笔刷,自带了4个 模糊效果(这也是第4个例子里,亲们修改高斯模糊参数来降低模糊度的因为)。亲们用它作为源再产生高斯效果的目的是为了精确控制模糊。你要认为目标设备计算能力有限,如何让并非精确控制这人模糊,你要你要引用庞大的Win2D库,你要去除对Win2D的引用,并比较复杂代码为:

从前你要直接使用笔刷自带的模糊,无需引用Win2D库,但很多很多能进一步控制模糊。如何让切记,底下讲到的高斯覆盖层还可不都可以了比较复杂成这人的代码,如何让CreateBackdropBrush()土辦法 获取的笔刷不自带模糊,你要得到4个 全透的(看不见的)覆盖层。

底下很多很多为一种生活生活不同的情景产生模糊的土辦法 ,还时需看冒出在关于Neon的API体系比较混杂,这说明微软对这人风格依然在试验阶段。希望立即跟进的开发者还时需利用底下的技巧编写应用,如何让切忌滥用模糊:一方面太难看,此人 面也会消耗絮状的计算资源。