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}">