c# - 如何将图像沿两条边缘合并到背景中？

Question

我正在尝试在我的应用程序中创建一种时尚的效果，允许图像位于右上角，左边缘和下边缘使用Image.OpacityMask. 就像是：

这可以使用以下代码完成，除了Image.OpacityMask只允许一个孩子LinearGradientBrush：

    <Image Source="Images/poster.jpg" Width="300">
        <Image.OpacityMask>
            <LinearGradientBrush StartPoint="1, 0.5" EndPoint="0, 0.5">
                <GradientStop Color="Black" Offset="0.2" />
                <GradientStop Color="Transparent" Offset="1.0" />
            </LinearGradientBrush>
            <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
                <GradientStop Color="Black" Offset="0.2" />
                <GradientStop Color="Transparent" Offset="1.0" />
            </LinearGradientBrush>
        </Image.OpacityMask>
    </Image>

我怎样才能Image.OpacityMask用有效的代码创建一个这样的？我知道有一个RadialGradientBrush，但这会融合整个图像，而不仅仅是左边缘和下边缘。

Answer 1

您可以使用两个元素，例如边框中的图像：

<Border HorizontalAlignment="Right" VerticalAlignment="Top" Width="300">
    <Border.OpacityMask>
        <LinearGradientBrush StartPoint="1, 0.5" EndPoint="0, 0.5">
            <GradientStop Color="Black" Offset="0.2" />
            <GradientStop Color="Transparent" Offset="1.0" />
        </LinearGradientBrush>
    </Border.OpacityMask>
    <Image Source="Images/poster.jpg">
        <Image.OpacityMask>
            <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
                <GradientStop Color="Black" Offset="0.2" />
                <GradientStop Color="Transparent" Offset="1.0" />
            </LinearGradientBrush>
        </Image.OpacityMask>
    </Image>
</Border>