[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,代码如下:

Copy
<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。

Copy
<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制作出内容向后缩退的感觉:

Copy
<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>
Copy
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

posted @   dino.c  阅读(4679)  评论(3编辑  收藏  举报
编辑推荐:
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列:向量数据库的应用与畅想
· 从问题排查到源码分析:ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
阅读排行:
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(四):结合BotSharp
· Vite CVE-2025-30208 安全漏洞
· 《HelloGitHub》第 108 期
· MQ 如何保证数据一致性?
· 一个基于 .NET 开源免费的异地组网和内网穿透工具
点击右上角即可分享
微信分享提示
CONTENTS