首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >UWP应用中自定义亚克力材质

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

作者头像
Edi Wang
发布2019-07-08 19:21:07
7350
发布2019-07-08 19:21:07
举报
文章被收录于专栏:汪宇杰博客汪宇杰博客

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-03-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 汪宇杰博客 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档