用gradient brush和OpacityMask实现fade edge效果

看下面一个gradient brush效果：

            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.3,0.3">
                    <GradientStop Color="White"/>
                    <GradientStop Color="Transparent" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>

我们看到，transparent也可以作为stop的颜色，其实每个颜色都可以通过设置alpha值来设置透明度。

再介绍一下OpacityMask，在很多UI控件中都有这个属性，用来配合着brush做出透明等光影效果。在OpacityMaskbrush中的brush，只有alpha值有效果，RGB值无论是什么，都是被忽略的。

<Image.OpacityMask>
    <RadialGradientBrush GradientOrigin="0.3,0.3">
        <GradientStop Color="White" />
        <GradientStop Color="#99000000" Offset="0.7" />
        <GradientStop Color="Transparent" Offset="1.04" />
    </RadialGradientBrush>
</Image.OpacityMask>

注意，上面第一个GradientStop颜色是White，但其实只有前两位alpha值有意义，White的alpha值是FF，所以哪怕这里换成Red，Blue，Black，由于它们的alpha值都是FF，所以效果都是一样的。

 

下面看一个LinearGradient的例子：

<Button Content="Button">
    <Button.OpacityMask>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Offset="0"/>
            <GradientStop Color="Black" Offset="0.5"/>
            <GradientStop Offset="1"/>
        </LinearGradientBrush>
    </Button.OpacityMask>
</Button>
<Button Content="Button">
    <Button.OpacityMask>
        <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
            <GradientStop Offset="0"/>
            <GradientStop Color="Black" Offset="0.5"/>
            <GradientStop Offset="1"/>
        </LinearGradientBrush>
    </Button.OpacityMask>
</Button>

再来一个两端渐变的例子：

<Image.OpacityMask>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Offset="0"/>

        <GradientStop Color="#AA000000" Offset="0.02"/>
        <GradientStop Color="Black" Offset="0.05"/>
        <GradientStop Color="Black" Offset="0.95"/>
        <GradientStop Color="#AA000000" Offset="0.98"/>

        <GradientStop Offset="1"/> 
    </LinearGradientBrush>
</Image.OpacityMask>

从上面的XAML代码可以看到，如果不给Color设置值，默认是Transparent。