1. 前言 在 "如何使用Fluent Design System" 這篇文章里已經簡單介紹過Reveal的用法，這篇再詳細介紹其它內容。 自Windows 8 放棄Aero後，群眾對毛玻璃回歸的呼聲一致都很大。Fluent Design System帶來了新的透明背景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常見的應用場景包括：
作為導航菜單的背景：
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
