WPF 透明掩码 OpactiyMask

原文: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>

做出来的效果如下图: