（UWP）应用窗口实现毛玻璃效果

作者: YZune | 来源:发表于2017-05-13 00:32 被阅读1399次

杂想

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

新的Story Teller应用，集成了AI技术，可以识别出故事人物，并按照选择的主角生成精彩的视频。结合混合现实技术，可以加入一些很酷炫的3D模型（比如恐龙）和特效。

TimeLine，显示最近的工作
新的Fluent Design System，包含五个元素：Light（光感）、Depth（深度）、Motion（动效）、Material（材质）、Scale（缩放）
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);`

好啦现在运行试试。

![右上角！](https://img.haomeiwen.com/i4846400/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; //失去焦点时，将三个键前景色设为白色```

现在，效果如下图所示~
![只使用毛玻璃笔刷的效果](https://img.haomeiwen.com/i4846400/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%为不透明，这样就可以啦。教程部分就结束啦。
![透明度设置](https://img.haomeiwen.com/i4846400/629745d20f765375.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#后记
其实很希望已经在应用商店上传应用的开发者尽快用新的规范去更新完善自己的UWP应用。而我，还在学习阶段。很是希望，自己能尽快开发出一款高质量的App。说是教程，其实也不会太多人看啦，UWP开发在我们学校也真的算是冷门，而我也是因为个人兴趣才有一点点动力去研究。那，这教程就算是写给自己看的吧:-)

（UWP）应用窗口实现毛玻璃效果

杂想

参考

窗体效果

教程

1. 隐藏标题栏

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

win10