CSS 线性渐变到 XAML答案

【问题标题】：CSS linear gradient to XAMLCSS 线性渐变到 XAML
【发布时间】：2021-12-28 00:47:59
【问题描述】：

这段 CSS 到 WPF XAML 最自然的转换是什么？

background: linear-gradient(135deg, #F25597 20%, #7C68E3 50%, #014FA4 80%);

第一次尝试 - 但它看起来与浏览器中的不完全一样：

<LinearGradientBrush MappingMode="RelativeToBoundingBox" 
                     StartPoint="0.25,0" EndPoint="0.75,1">
    <LinearGradientBrush.GradientStops>
        <GradientStopCollection>
            <GradientStop Color="#F25597" Offset="0"/>
            <GradientStop Color="#7C68E3" Offset="0.5"/>
            <GradientStop Color="#014FA4" Offset="1"/>
        </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

XAML 中似乎没有旋转角度选项，因此此公式基于一条线的两个端点。

更新：还发现了这些 CSS 属性：

.btn-primary {
    color: #fff;
    background-image: linear-gradient(135deg, #F25597 20%, #7C68E3 50%, #014FA4 80%);
    background-size: 150%;
    background-position: 50%;
}

它在 HTML/CSS 中的外观：

【问题讨论】：

标签： css xaml linear-gradients

【解决方案1】：

经过更多调整，围绕 origo 的额外转换似乎解决了差异：

<LinearGradientBrush MappingMode="RelativeToBoundingBox" 
                     StartPoint="0,1" EndPoint="0,0">
    <LinearGradientBrush.RelativeTransform>
        <TransformGroup>
            <RotateTransform CenterY="0.5" CenterX="0.5" Angle="110"/>
            <ScaleTransform CenterY="0.5" CenterX="0.5" ScaleX="1.5" ScaleY="1.5"/>
            <TranslateTransform Y="0.5"/>
        </TransformGroup>
    </LinearGradientBrush.RelativeTransform>
    <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>

从 Visual Studio 中的 XAML 编辑器：

【讨论】：