(UWP)应用窗口实现毛玻璃效果

杂想

最近微软在开Build2017大会,为期三天。目前修仙看了两晚的大会直播,第一晚的主角是Azure云服务以及Cortana人工智能,有很多很不错的点子;第二晚终于讲到了Windows,这才是我迫不及待想知道的啊。微软在Build2017宣布了Windows 10的下一个更新:Windows 10 Fall Creators Update。我印象很深的几个新特性是:

  1. 新的Story Teller应用,集成了AI技术,可以识别出故事人物,并按照选择的主角生成精彩的视频。结合混合现实技术,可以加入一些很酷炫的3D模型(比如恐龙)和特效。
  1. TimeLine,显示最近的工作
  2. 新的Fluent Design System,包含五个元素:Light(光感)、Depth(深度)、Motion(动效)、Material(材质)、Scale(缩放)
  3. Win10内置的Linux环境得到增强,应用商店还可以直接下载Ubuntu等Linux发行版

其实我是一个很在意UI的人,所以以上最令我振奋的就是Fluent Design了。微软其实不缺好的UI设计理念,Windows Vista开始的Aero,Windows 8的Metro都很棒,不过到了Windows 10,感觉微软应该在UI上更进一步的。Fluent Design让我看到了曙光,我喜欢这个设计规范。早在年初,Fluent Design就以内部代号Project Neon被曝光,然后有人发现了微软开放了窗体毛玻璃透明相关的Apis。调用这些Apis,我们就可以做出带有部分Fluent Design风格的UWP应用了。当然,我相信微软在最近会更新更多的Apis来方便开发者实现Fluent Design的。


Fluent Design

参考

主要参考了IT之家的两篇教程
Win10 UWP开发技巧:应用窗口实现毛玻璃效果
Win10 UWP开发技巧:充分利用标题栏空间
另外为了实现一些自己想要的效果动了点小脑筋:-)

窗体效果

是不是很美

教程

注:本教程只实现窗体的半透明,关于窗口内控件元素的半透明以后再说╮(╯▽╰)╭

实现窗体半透明用到的笔刷需要用到15021以后的SDK,所以要将项目的目标平台设置为超过15021的版本


目标平台设置

1. 隐藏标题栏

原理
在这个页面的构造函数里通知框架,把布局扩展至标题栏,框架就会去掉原来的标题栏,并把我们编写的布局扩展填充至属于标题栏的那一部分区域。我们还可以通知框架,我们自己编写的布局里,有哪一块依然需要充当标题栏的功能(响应鼠标的拖动、右击和双击等标题栏操作),这样框架就会将那一块作标题栏处理。

方法
双击解决方案管理器里面的MainPage.xaml,按F7跳转到MainPage.xaml.cs
首先需要在上方添加对Windows.ApplicationModel.Core和Windows.ApplicationModel.Core的引用:

using Windows.ApplicationModel.Core;
using Windows.UI.ViewManagement;```
然后在构造函数MainPage()里添加以下代码:
```var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;```
那么当这个页面构造的时候,就会把窗口内容扩展填充到标题栏啦。
这时候你试着运行这个应用,看到的应该是一片惨白的窗口,上面什么也没有,就连上面的标题栏都消失啦。当你试图拖曳窗口时发现是可以拖的!不过区域仅限于原来标题栏的位置。原因是我们没有调用Window.Current.SetTitleBar()这个方法来指定哪个部分是实际的标题栏,那就默认是原来的区域实现标题栏的功能啦。
####2. 使窗体半透明化
转到MainPage.xaml,在工程刚建的时候,这个xaml文件里面已经默认有一个Grid控件了,默认将它当作根的布局框架。我们为了使用笔刷,要给这个Grid起个名字,在Grid后面输入x:Name="GlassHost",使这个标签如下面所示:
`<Grid x:Name="GlassHost">`
这就把它命名为GlassHost啦。按F7跳转到MainPage.xaml.cs,编写以下方法:

```private void initializeFrostedGlass(UIElement glassHost)
{
        Visual hostVisual = ElementCompositionPreview.GetElementVisual(glassHost);
        Compositor compositor = hostVisual.Compositor;
        var backdropBrush = compositor.CreateHostBackdropBrush();
        var glassVisual = compositor.CreateSpriteVisual();
        glassVisual.Brush = backdropBrush;
        ElementCompositionPreview.SetElementChildVisual(glassHost, glassVisual);
        var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");
        bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);
        glassVisual.StartAnimation("Size", bindSizeAnimation);
}```

这个方法的作用就是接收一个UI控件实例,然后把这个控件半透明和背景模。**但是,这个方法是将一个模糊层覆盖在被处理的控件之上的,所以这个控件上的任何信息、动作都会被覆盖掉**。因此窗体里面的控件元素,比如按钮,是不推荐用这个方法使其背景模糊的,不然的话这个按钮上的文字会被覆盖,点击动作也不能够响应。
创建了方法也要用才行啊,还记得我们刚刚命名为“GlassHost”的Grid吗?现在我们就可以用这个方法改变它!在构造函数MainPage()里添加以下代码:
`initializeFrostedGlass(GlassHost);`

好啦现在运行试试。

![右上角!](http://upload-images.jianshu.io/upload_images/4846400-fde9ead5526bdc13.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

咦,右上角的窗口按键怎么还是有颜色。嗯…它们的外观属性是和窗口本身分开的,需要另外设置,不过也不难。继续在构造函数MainPage()里添加以下代码:
```var view = ApplicationView.GetForCurrentView(); 
view.TitleBar.ButtonBackgroundColor = Colors.Transparent; //将标题栏的三个键背景设为透明
view.TitleBar.ButtonInactiveBackgroundColor = Colors.Transparent; //失去焦点时,将三个键背景设为透明
view.TitleBar.ButtonInactiveForegroundColor = Colors.White; //失去焦点时,将三个键前景色设为白色```

现在,效果如下图所示~
![只使用毛玻璃笔刷的效果](http://upload-images.jianshu.io/upload_images/4846400-aaece2e51dbfe129.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####3. 在模糊层之上布局
这样做出来的窗口虽然很美,可是没有内容展示也只能算是花瓶而已啦。我们也能发现只做以上处理的一个缺点就是,窗体是无色的半透明,而我们往往需要的是有色半透明,因为有时候背景太亮而窗口上的字是白色的话,内容就会变得难以识别。从我们最终的效果图看来,还有一种分区域的效果。下面我们就来看看怎么实现。
转到MainPage.xaml,我们先了解到一个技巧:在xaml中,控件代码在下面的控件反而是被显示在上层的。那么我们就要思考,我们能不能直接将新控件作为Grid“GlassHost”的子控件放在“GlassHost”里面呢?**很遗憾,并不能,上面说过,使用了那个方法会是控件表面覆盖上透明层,但透明层是相对于窗体背后透明的,而非背后的控件。**所以,我们只能在那个Grid之外而且是它之上(控件层次的上方,代码的上方)添加其他控件。我的做法是,保留那个Grid作为根Grid,但是**删掉**对它的命名。然后是xaml的page标签里面的内容呈现如下:
<Grid> //根Grid
    <Grid.ColumnDefinitions> //定义三列,表现三个区域
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="4*"/>
        <ColumnDefinition Width="6*"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="GlassHost" Grid.ColumnSpan="3"/> //将这个命名为GlassHost,并使其代码相对于其他控件在最上方
    <Grid Background="#4C1E90FF"> //第一列,设置了一个带透明度的蓝色,如何设置下面给图
        <Grid>
            <TextBlock Text="Aero" FontSize="20" Margin="0,32,0,0"
                   Foreground="White" HorizontalAlignment="Center"
                   Height="Auto" Width="Auto"/>
        </Grid>
    </Grid>
    <Grid Background="#661E90FF" Grid.Column="1"> //第二列,透明度和第一列不同
        <Grid>
            <TextBlock Text="Pictures" FontSize="20" Margin="50,32,0,0"
                   Foreground="White" HorizontalAlignment="Left"
                   Height="Auto" Width="Auto"/>
        </Grid>
    </Grid>
    <Grid Background="#7F1E90FF" Grid.Column="2"> //第三列,透明度不同
        <Grid>
            <StackPanel Orientation="Horizontal" Margin="50,32,0,0" Height="Auto">
                <TextBlock Text="Zune" FontSize="50" FontWeight="Bold"
                   Foreground="White" HorizontalAlignment="Left"
                   Height="Auto" Width="Auto"/>
                <TextBlock Text="Y" FontSize="50" Margin="10,0,0,0"
                   Foreground="White" HorizontalAlignment="Left"
                   Height="Auto" Width="Auto"/>
            </StackPanel>
        </Grid>
    </Grid>
</Grid>
以上的代码为无色的模糊层覆盖上了不同透明度的蓝色,这样可以使得背景更为淡化而不影响阅读,还能较美观地区分不同区域。下面来说说透明度是怎样通过VS的可视化工具设置的。选择你要调整的Grid,VS右下区域会出现它的属性控制,选择画笔中的Background,调好了自己想要的颜色后,在箭头所指的A的输入框输入透明度,0为全透明,100%为不透明,这样就可以啦。教程部分就结束啦。
![透明度设置](http://upload-images.jianshu.io/upload_images/4846400-629745d20f765375.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#后记
其实很希望已经在应用商店上传应用的开发者尽快用新的规范去更新完善自己的UWP应用。而我,还在学习阶段。很是希望,自己能尽快开发出一款高质量的App。说是教程,其实也不会太多人看啦,UWP开发在我们学校也真的算是冷门,而我也是因为个人兴趣才有一点点动力去研究。那,这教程就算是写给自己看的吧:-)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容