WPF 透明掩码 OpactiyMask

在WPF中提供了Opacity属性使得元素的所有内容都是透明的.而OpacityMask属性可以使元素的特定区域变成透明.

OpacityMask属性接受任何画刷.画刷的alpha通道的值确定了什么地方是透明的.并且,OpacityMask会忽略画刷的颜色.也就是说,不管画刷是红色或者蓝色,效果都相同.OpacityMask只关注画刷的Opacity属性.

因此.使用SolidColorBrush就显得没有什么意义.因为可以使用Opacity达到相同的效果.然而,当使用更特殊类型的画刷时,比如LinearGradientBrush,就能得到一种渐变的效果.下面给出效果.

首先代码如下.

        <Button  Width="200" Background="#FFFF54A2" FontSize="30" FontWeight="Bold">            <Button.OpacityMask>                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">                    <GradientStop Offset="0" Color="AliceBlue"/>                        <GradientStop Offset="1" Color="Transparent"/>                    </LinearGradientBrush>            </Button.OpacityMask>        </Button>

为了能更好的看出效果,我为窗体加了一个背景图.

结合OpacityMask和VisualBrush画刷可以创建反射效果.比如我们常见的具有镜像的文本.具体做法就是用VisualBrush画刷绘制一个矩形,将填充内容Binding到text上,再进行一次翻转就ok了.

主要代码如下:

        <TextBox Name="txt" FontSize="22" Height="30" Margin="0,50,0,213">            你好啊~小朋友        </TextBox>        <Rectangle RenderTransformOrigin="1,0.5" Height="30" Margin="0,80,0,186">            <Rectangle.Fill>                <VisualBrush Visual="{Binding ElementName=txt}"></VisualBrush>            </Rectangle.Fill>            <Rectangle.RenderTransform>                <ScaleTransform ScaleY="-1"></ScaleTransform>            </Rectangle.RenderTransform>            <Rectangle.OpacityMask>                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">                    <GradientStop Offset="0.2" Color="Transparent"></GradientStop>                    <GradientStop Offset="1.0" Color="#44000000"></GradientStop>                </LinearGradientBrush>            </Rectangle.OpacityMask>        </Rectangle>

做出来的效果如下图: