博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用OpacityMask快速制作theme friendly UI
阅读量:6891 次
发布时间:2019-06-27

本文共 1281 字,大约阅读时间需要 4 分钟。

首先,要好好解释一下OpacityMask,先来回答几个问题:

  1. OpacityMask能做什么呢? 它只能把它所属的控件变得更加透明。
  2. 透过来的是什么呢? 透明嘛,当然是挡在所属控件后面的东西了。
  3. 它是通过减小所属控件的Opacity属性做到的吗? 不是。控件最终的透明度是由OpacityMask和Opacity共同决定的,它们各司其职。
  4. 为什么是Mask? 是为了让所属控件更加灵活更有目的性地变透明,而非改变控件的整体透明效果。整体透明不如直接改控件的Opacity属性。

总结一下OpacityMask的特性:

  1. 它的brush(无论是何种类型的brush)完全忽略RGB颜色,只看A(也就是Alpha)的值。也就是说它只能改变透明度,无法改变颜色。
  2. OpacityMask的brush的Alpha值越小,则所属控件越透明,这与我们通常理解的Alpha值的含义一致。
  3. 它的Alpha值不会覆盖控件本身的透明度,而是叠加上。例如控件本身的opacity=50%,如果OpacityMask的Alpha是40%,那么最终的opacity就是50%*40%=20%的透明度;如果OpacityMask的Alpha是100%(FF),那么最终的opacity就是50%*100%=50%的透明度(也就是说控件丝毫不受它的影响);如果OpacityMask的Alpha是0%(00),那么最终的opacity就是50%*0%=0%的透明度(也就是说控件本身被完全透明化,看不到了)。

实际用处

windows phone开发要注意兼容dark theme和light theme,难道非要给两种主题配不同的图片资源不可?其实可以用OpacityMask巧妙地解决。

在网上找到的icon,颜色经常与我们想要的不一样,就算是单色的图形,你给它用另外一种单色填充往往会产生锯齿,因为填充的时候,边缘的一些透明机器处理不好。比如我有一个白色的图案(该图案的背景是透明的)想用于一个按钮,但想把它变成红色,该如何做呢?

只要把按钮的背景色改成红色。

这样任意变颜色也不会产生锯齿了。
 
那怎样设置dark和light主题下都适当的颜色呢?
在两种主题下,背景色是不一样的,同名的资源也不尽相同,例如PhoneContrastBackgroundBrush,在不同主题下有着不同的颜色。
 

<Button Background="{

StaticResource PhoneContrastBackgroundBrush}">
    <
Button.OpacityMask>
        <
ImageBrush Stretch="None" ImageSource="icons/appbar.delete.rest.png"/>
    </
Button.OpacityMask>
</
Button>

转载于:https://www.cnblogs.com/dc10101/archive/2011/12/16/2289605.html

你可能感兴趣的文章
UVA 11988 Broken Keyboard (链表)
查看>>
去掉影响美观的横滚动条
查看>>
「2019冬令营提高组」树
查看>>
配置OWASP的ModSecurity规则
查看>>
laravel 5.1 单元测试 Cannot modify header information 错误
查看>>
周四作业
查看>>
iOS - 正则表达式判断邮箱、身份证..是否正确
查看>>
golang 转换markdown文件为html
查看>>
JS的console使用
查看>>
SpringMVC最简单配置应用
查看>>
8.Appium的基本使用-3(安装JDK、android-sdk)
查看>>
区块链开发(1)基本概念
查看>>
java中的深层复制和浅层复制
查看>>
pytest自动化1:兼容unittest代码实例
查看>>
spring集成freemaker 制作短信模板
查看>>
从 Nginx 优秀的核心架构设计,揭秘其为何能支持高并发?
查看>>
Linux第四章 进程
查看>>
[Vue CLI 3] 插件开发中的 genCacheConfig 细节研究
查看>>
windows下使用php重命名目录下的文件
查看>>
python - 协程
查看>>