[UWP]使用Acrylic（亚克力）

1. 前言

在之前关于如何使用fluent design system的文章中，我们已经简要介绍了reveal的用法，本文将更详细地探讨其他方面。

自从Windows 8放弃了Aero界面后，用户对毛玻璃效果回归的需求一直很强烈。Fluent Design System引入了新的透明背景Acrylic，提供了更好的性能和更时尚的外观。（然而，由于使用简单，滥用Acrylic的情况似乎已不可避免。）

2. 使用Acrylic

2.1 在XAML中使用Acrylic

UWP提供了一组预定义的Acrylic Brush供开发者使用，通过ThemeResource找到包含“Acrylic”的Brush资源即可轻松在应用中使用Acrylic，代码如下：

<grid background="{ThemeResource SystemControlAcrylicElementBrush}"></grid>

可用的ThemeResource详见官方文档：

Acrylic具体包含两种：

Background acrylic：可以透视整个应用UI，看到应用窗体后的其他应用或桌面（在ThemeResource中名称包含 -AcrylicWindow-）。

In-app acrylic：只透视应用了acrylic brush的元素（在ThemeResource中名称包含 -AcrylicElement-）。

2.2 正确使用Acrylic

目前，常见的应用大多只使用了Background acrylic，In-app acrylic的使用场景较少。

Background acrylic的常见应用场景包括：

作为导航菜单的背景：

Widget或轻量级应用可以将整个应用的背景设置为Acrylic，像计算器那样：

In-app acrylic的应用场景通常是弹出的Modal Layer或Flyout的背景：

3. 自定义AcrylicBrush

可以使用TintColor（颜色）、TintOpacity（不透明度）、BackgroundSource（background 或 in-app acrylic类型）、FallbackColor这四个属性来自定义AcrylicBrush。

<acrylicbrush backgroundsource="HostBackdrop" tintcolor="#FF1F1F1F" tintopacity="0.8" x:key="CustomAcrylicBackgroundBrush"></acrylicbrush>
<acrylicbrush backgroundsource="Backdrop" tintcolor="#FF1F1F1F" tintopacity="0.8" x:key="CustomAcrylicInAppBrush"></acrylicbrush>

其中FallbackColor是指当background acrylic不生效时（如运行于节电模式、根据设置不激活Acrylic或运行于XBOX等设备）的替代颜色。当窗口处于非激活状态时也会使用FallbackColor代替AcrylicBrush。

夸克AI

夸克AI是一个多功能AI智能助手，致力于提升用户的学习、工作和生活效率。

6879

查看详情

4. Acrylic与Depth

在Fluent Design System的五个话题中，Acrylic同时属于Material和Depth话题。半透明的背景可以透视到Z轴下一层的内容，从而营造出深度的效果。

具体来说，可以在应用内将弹出的Modal Layer背景设为In-app acrylic，并结合ScalarAnimation制作出内容向后缩退的感觉：

<grid height="600" width="800">
    <scrollviewer horizontalalignment="Center" horizontalscrollbarvisibility="Hidden" verticalalignment="Center" verticalscrollbarvisibility="Hidden">
        <image height="600" source="ms-appx:///Assets/IMG_20180115_182131.jpg" width="800">
            <interaction.behaviors>
                <scale centerx="400" centery="300" duration="500" scalex="1.1" scaley="1.1" x:name="ImageScale"></scale>
            </interaction.behaviors>
        </image>
    </scrollviewer>
    <grid background="{StaticResource ModalAcrylicInAppBrush}" visibility="Collapsed" x:name="ModalLayer">
        <implicit.showanimations>
            <opacityanimation duration="0:0:1" from="0" to="1.0"></opacityanimation>
        </implicit.showanimations>
        <implicit.hideanimations>
            <scalaranimation duration="0:0:1" target="Opacity" to="0.0"></scalaranimation>
        </implicit.hideanimations>
    </grid>
</grid>

private void OnSave(object sender, RoutedEventArgs e){
    ModalLayer.Visibility = Visibility.Visible;
    ImageScale.ScaleX = 1;
    ImageScale.ScaleY = 1;
}
private void OnSaved(object sender, RoutedEventArgs e){
    ModalLayer.Visibility = Visibility.Collapsed;
    ImageScale.ScaleX = 1.1;
    ImageScale.ScaleY = 1.1;
}

希望将来能看到更多为营造有深度的UI而使用的Acrylic，不要为了让UI闪闪发光就滥用。

5. 其它

5.1 Acrylic没有生效及其它各种问题

在如何使用Fluent Design System (下)中详细介绍了Acrylic没有生效的各种情况，也介绍了正确使用Acrylic的方式及版本兼容代码，这里不再赘述。

5.2 窗口处于非激活状态

当窗口处于非激活状态时，background acrylic会失效并使用FallbackColor指定的纯色背景代替。有些应用在导航、弹出提示或最大化/还原时会让窗口暂时失去焦点，这样会导致使用了background acrylic的地方（通常是整个导航菜单）意外地闪烁一下。这种情况如果频繁发生会很烦人，需要谨慎处理。

6. 结语

实际上，Acrylic并不是那么容易使用，而且很容易被滥用，尤其是一些应用在整个背景上使用Acrylic，但又处理不好内容的显示，导致文字等内容的识别率下降。如何正确使用微软提供的这件工具是值得设计师深思熟虑的一件事。

顺便一提，上篇文章关于使用Reveal的部分原本打算尽量简洁，结果很快就被移出首页，真是为难。于是本文原本打算再多写一些，但昨晚家里的爱机突然坏了，看来连天都要阻止我婆婆妈妈。

参考中给出的链接都是一些有趣的内容，不妨一看。

7. 参考

Acrylic material

From 3D to 2D and back again – Microsoft Design

Digital Design is Never Done – Microsoft Design

How to use Acrylic Accent in Windows 10 Creators Update - Stack Overflow

8. 源码

Fluent Design System Sample

以上就是[UWP]使用Acrylic（亚克力）的详细内容，更多请关注php中文网其它相关文章！