原文:[UWP]使用Acrylic(亚克力)

1. 前言

如何使用Fluent Design System 这篇文章里已经简单介绍过Reveal的用法,这篇再详细介绍其它内容。

自Windows 8 放弃Aero后,群众对毛玻璃回归的呼声一致都很大。Fluent Design System带来了新的透明背景Acrylic,提供更好的性能及更时髦的外观。(不过由于使用简单,可以预见滥用已经不可避免。)

2. 使用Acrylic

2.1 在XAML中使用Acrylic

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

<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">

可用的ThemeResource详见官方文档

Acrylic具体来说包含两种:

  • Background acrylic 透视整个应用UI,可以看到应用窗体后的其它应用或桌面(在ThemeResource中名称包含 -AcrylicWindow-)。
  • In-app acrylic 只透视套用了acrylic brush的元素(在ThemeResource中名称包含 -AcrylicElement-)。

2.2 正确使用Acrylic

现阶段常见的应用都只使用了Background acrylic,很少见In-app acrylic的应用场景。

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

  1. 作为导航菜单的背景:

  2. Widget或轻量级应用可以在整个应用的背景使用Acrylic,像计算器那样:

In-app acrylic的应用场景目前通常都是弹出的Modal Layer,或者Flyout的背景:

3. 自定义AcrylicBrush

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

<AcrylicBrush x:Key="CustomAcrylicBackgroundBrush"
BackgroundSource="HostBackdrop"
TintOpacity="0.8"
TintColor="#FF1F1F1F" /> <AcrylicBrush x:Key="CustomAcrylicInAppBrush"
BackgroundSource="Backdrop"
TintOpacity="0.8"
TintColor="#FF1F1F1F" />

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

4 Acrylic与Depth

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

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

<Grid Height="600"
Width="800">
<ScrollViewer HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
HorizontalAlignment="Center"
VerticalAlignment="Center"> <Image Source="ms-appx:///Assets/IMG_20180115_182131.jpg"
Height="600"
Width="800"> <Custom:Interaction.Behaviors>
<Custom1:Scale x:Name="ImageScale"
ScaleX="1.1"
ScaleY="1.1"
CenterX="400"
CenterY="300"
Duration="500" />
</Custom:Interaction.Behaviors>
</Image>
</ScrollViewer>
<Button Style="{StaticResource ButtonRevealStyle}"
Content="Save To..."
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Background="Transparent"
Margin="20"
FontSize="30"
Click="OnSave" />
<Grid Background="{StaticResource ModalAcrylicInAppBrush}"
Visibility="Collapsed"
x:Name="ModalLayer">
<animations:Implicit.ShowAnimations> <animations:OpacityAnimation Duration="0:0:1"
From="0"
To="1.0"></animations:OpacityAnimation>
</animations:Implicit.ShowAnimations> <animations:Implicit.HideAnimations>
<animations:ScalarAnimation Target="Opacity"
Duration="0:0:1"
To="0.0"></animations:ScalarAnimation> </animations:Implicit.HideAnimations>
<Button Style="{StaticResource ButtonRevealStyle}"
Content="Save"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Transparent"
Margin="20"
FontSize="30"
Click="OnSaved" />
</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(亚克力)的更多相关文章

  1. Customize Acrylic Brush in UWP Applications(在UWP中自定义亚克力笔刷)

    原文 Customize Acrylic Brush in UWP Applications(在UWP中自定义亚克力笔刷) Windows 10 Fall Creators Update(Build ...

  2. [UWP]使用Acrylic

    1. 前言 在 如何使用Fluent Design System 这篇文章里已经简单介绍过Reveal的用法,这篇再详细介绍其它内容. 自Windows 8 放弃Aero后,群众对毛玻璃回归的呼声一致 ...

  3. 在 WPF 程序中应用 Windows 10 真?亚克力效果

    原文:在 WPF 程序中应用 Windows 10 真?亚克力效果 从 Windows 10 (1803) 开始,Win32 应用也可以有 API 来实现原生的亚克力效果了.不过相比于 UWP 来说, ...

  4. 如何在pyqt中自定义无边框窗口

    前言 之前写过很多关于无边框窗口并给窗口添加特效的博客,按照时间线罗列如下: 如何在pyqt中实现窗口磨砂效果 如何在pyqt中实现win10亚克力效果 如何在pyqt中通过调用SetWindowCo ...

  5. UWP Acrylic Material

    文档:https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic Acrylic 能带来类似 win7 的毛玻璃效果 要使用 A ...

  6. [UWP开发] 在低版本中使用亚克力刷以及部分高版本控件

    写于2018.10.3 仅在我的PC(17763)和WP(Limia 950 XL 15254)上测试过 微软在build 16299中引入了亚克力刷,但是Win10m并没有活那么久,lumia手机在 ...

  7. [UWP]浅谈按钮设计

    一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不 ...

  8. 如何在pyqt中实现亚克力磨砂效果的QLabel

    前言 Windows10 在 UWP 应用中支持亚克力画刷,可以在部件的底部绘制亚克力效果的背景图.下面我们使用 QLabel 来模拟这个磨砂过程. 实现方法 MSDN 文档中介绍了亚克力材料的配方, ...

  9. win10 uwp 毛玻璃

    毛玻璃在UWP很简单,不会和WPF那样伤性能. 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃. 毛玻璃可以使用 win2D 方法,也可以使用 Compositor . 使用 win2d 得 ...

随机推荐

  1. 12、python单步调试工具pdb

    pdb 第4种方式是启动Python的调试器pdb,让程序以单步方式运行,可以随时查看运行状态.我们先准备好程序: # err.py s = '0' n = int(s) print(10 / n) ...

  2. 原生js大总结十

    91.ajax的优点     a.提高运行效率   b.提高用户体验,让多件事情同时发生   c.在不刷新页面的情况下可以对局部数据进行加载和刷新       92.ajax请求的流程   1.创建通 ...

  3. android之路Gallery 画廊

    Gallery是一个内部元素能够水平滚动,而且能够把当前选择的子元素定位在它中心的布局组件. 我们还是直接看看样例的执行效果. watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  4. Centos NFS 简单设置

    Server 端: NFS的安装配置:centos 5 :yum install nfs-utils portmapcentos 6 :yum install nfs-utils rpcbind vi ...

  5. POJ 3278 Catch That Cow(BFS 剪枝)

    题目链接:http://poj.org/problem?id=3278 这几次都是每天的第一道题都挺顺利,然后第二道题一卡一天. = =,今天的这道题7点40就出来了,不知道第二道题在下午7点能不能出 ...

  6. flask的使用(一)

    1.程序基本的说明 #-*-encoding=utf--*- 从flask中引入类 from flask import Flask ,render_template import config 初始化 ...

  7. 每日技术总结:filter(),Bscroll

    前言: 这是一个vue的电商项目,使用express后端提供数据. 1.filter()函数. 事情是这样的.我从数据库拿到了所有分类数据. 分类有三个等级.父类,子类,孙类这样.但它们都在同一张表里 ...

  8. UVA 11461 - Square Numbers 数学水题

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  9. 9.1 Binder系统_C程序示例_框架分析和编写程序

    IPC : Inter-Process Communication, 进程间通信 A进程把数据原原本本的发给B,这就是IPC RPC : Remote Procedure Call, 远程过程调用 A ...

  10. Arcgis engine 指定图层对要素进行创建、删除等操作

    Arcgis engine 指定图层创建点要素 在指定的图层上创建一个点要素,点要素的位置是通过X,Y坐标指定的,下面是具体的注释 .其中 和IFeatureClassWrite接口有关的代码不要好像 ...