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

Question

我正在尝试在我的应用程序中创建一种时尚效果，允许图像位于右上角，使用 Image.OpacityMask 将左侧和底部边缘合并到背景颜色中。类似于：

这可以使用以下代码完成，除了 Image.OpacityMask 只允许一个 child 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>

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

How to merge an image into the background along two edges?

c#

wpf

image

opacitymask