CSS linear-gradient渐变如何正确转换为效果匹配的WPF XAML代码？

正确的XAML实现代码 #

<LinearGradientBrush MappingMode="RelativeToBoundingBox"
                     StartPoint="0,0" EndPoint="1,1">
    <LinearGradientBrush.GradientStops>
        <GradientStopCollection>
            <GradientStop Color="#F25597" Offset="0.2"/>
            <GradientStop Color="#7C68E3" Offset="0.5"/>
            <GradientStop Color="#014FA4" Offset="0.8"/>
        </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
    <LinearGradientBrush.Transform>
        <ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="0.5" CenterY="0.5"/>
    </LinearGradientBrush.Transform>
</LinearGradientBrush>

调整说明 #

• 修正渐变方向：135度渐变对应WPF相对坐标系下从左上角(0,0)到右下角(1,1)的渐变线，原起止点设置的角度偏差是渲染不匹配的原因之一。
• 对齐渐变停止点：对应CSS中三个色值的位置占比，将GradientStop的Offset分别调整为0.2、0.5、0.8，和CSS的20%/50%/80%位置完全对应。
• 匹配CSS背景缩放和居中设置：通过ScaleTransform将渐变整体缩放1.5倍匹配background-size:150%，设置缩放中心为元素中心点(0.5,0.5)匹配background-position:50%的居中效果。

内容的提问来源于stack exchange，提问作者Bent Rasmussen