UWP应用中自定义亚克力材质

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

原文发布于微信公众号 - 汪宇杰博客(ediwangblog)

原文发表时间:2018-03-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券