Windows 10 秋季更新(Build 16299)中引入了亚克力材质,这是一种类似于Windows 7窗口磨砂玻璃效果的Brush。
很多Windows自带的应用,比如计算器,就引入了这样的设计。然而,系统自带的画刷有时候无法满足我们自己设计App的需求,特别是在Windows决定不渲染亚克力效果的时候,比如设备在低电量模式下运行,或者窗口非激活状态下,很多系统默认画刷会让我们App的界面变的很丑。
比如,这是正常的亚克力效果:
窗口inactive的时候竟然变成了:
这时候就需要我们自定义亚克力的参数,并且定义fall back的配色方案。比如我的"Character Map UWP",就是使用自定义亚克力的一个例子。
正常状态显示自定义透明度的黑色:
全屏或者inactive状态,显示系统主题色:
这样的效果,是通过自定义AcrylicBrush实现的。在你的资源XAML里定义:
<AcrylicBrush x:Key="CMapUwpAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="Black" TintOpacity="0.4" FallbackColor="{StaticResource SystemAccentColor}"/>
其中,TintColor
表示正常情况下,亚克力的颜色,这里我指定的是黑色。TintOpacity
表示透明度,0.4就是40%的意思。而FallbackColor
指的是无法渲染亚克力的情况下,使用哪种颜色代替,我用的是系统主题色。
那么,完整的资源文件可以定义为这样:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="Default"> <AcrylicBrush x:Key="CMapUwpAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="Black" TintOpacity="0.4" FallbackColor="{StaticResource SystemAccentColor}"/> </ResourceDictionary> <ResourceDictionary x:Key="HighContrast"> <SolidColorBrush x:Key="CMapUwpAcrylicBrush" Color="{ThemeResource SystemColorWindowColor}"/> </ResourceDictionary> <ResourceDictionary x:Key="Light"> <AcrylicBrush x:Key="CMapUwpAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="Black" TintOpacity="0.4" FallbackColor="{StaticResource SystemAccentColor}"/> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> </ResourceDictionary>
然后在需要使用亚克力的地方,就能用自定义材质了:
<Grid Background="{ThemeResource CMapUwpAcrylicBrush}">