如何沿着两个边缘将图像合并到背景中？

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>