1. 前言
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 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=
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率
联系我们
电话咨询
0532-85025005
扫码添加微信
