用OpacityMask快速制作theme friendly UI

首先，要好好解释一下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，颜色经常与我们想要的不一样，就算是单色的图形，你给它用另外一种单色填充往往会产生锯齿，因为填充的时候，边缘的一些透明机器处理不好。比如我有一个白色的图案（该图案的背景是透明的）想用于一个按钮，但想把它变成红色，该如何做呢？

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

<Button Background="Red">
    <Button.OpacityMask>
        <ImageBrush Stretch="None" ImageSource="icons/appbar.delete.rest.png"/>
    </Button.OpacityMask>
</Button>

这样任意变颜色也不会产生锯齿了。

那怎样设置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