Как слить изображение в фон по двум краям?

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>