如何在WPF XAML中实现路径末端渐变变细效果？

WPF没有直接支持渐变StrokeThickness的属性，你可以通过以下两种方法实现路径末端逐渐变细的视觉效果：

方法一：静态叠加多个Path（适合固定路径） #

通过创建多个嵌套的Path，每个Path的StrokeThickness依次递减，同时路径长度逐渐缩短至原路径的终点，叠加后即可形成自然的末端渐变变细效果。

示例XAML代码：

<Grid>
    <!-- 基础路径（最粗） -->
    <Path Stroke="Gray" StrokeThickness="52" x:Name="theCurve">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10,100">
                    <BezierSegment Point1="100,10" Point2="200,200" Point3="300,100"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <!-- 渐变层1：StrokeThickness递减，路径缩短 -->
    <Path Stroke="Gray" StrokeThickness="44">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10,100">
                    <BezierSegment Point1="100,10" Point2="200,200" Point3="290,100"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <!-- 渐变层2 -->
    <Path Stroke="Gray" StrokeThickness="36">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10,100">
                    <BezierSegment Point1="100,10" Point2="200,200" Point3="280,100"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <!-- 继续添加更多渐变层，直到StrokeThickness接近0 -->
    <Path Stroke="Gray" StrokeThickness="28">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10,100">
                    <BezierSegment Point1="100,10" Point2="200,200" Point3="270,100"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Stroke="Gray" StrokeThickness="20">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10,100">
                    <BezierSegment Point1="100,10" Point2="200,200" Point3="260,100"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Stroke="Gray" StrokeThickness="12">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10,100">
                    <BezierSegment Point1="100,10" Point2="200,200" Point3="250,100"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Stroke="Gray" StrokeThickness="4">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10,100">
                    <BezierSegment Point1="100,10" Point2="200,200" Point3="240,100"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid>

方法二：后台代码动态生成渐变路径（适合动态变化的路径） #

通过WPF的PathGeometry相关API，自动生成不同长度和粗细的Path，实现更平滑、灵活的渐变效果：

1. 在窗口加载事件中调用以下代码：

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    GenerateTaperedPathLayers();
}

private void GenerateTaperedPathLayers()
{
    var originalGeometry = (PathGeometry)theCurve.Data;
    int stepCount = 13; // 控制渐变平滑度，数值越大过渡越自然
    double initialThickness = 52;
    double thicknessStep = initialThickness / stepCount;

    for (int i = 0; i < stepCount; i++)
    {
        double currentThickness = initialThickness - (i * thicknessStep);
        if (currentThickness <= 0) break;

        // 计算当前路径的长度比例（从1.0逐渐减小）
        double lengthFraction = 1.0 - (i / (double)stepCount);
        // 截取原路径的前lengthFraction部分
        var taperedGeometry = originalGeometry
            .GetFlattenedPathGeometry()
            .GetTrimmedPathGeometry(0, lengthFraction);

        // 创建新的渐变路径
        var taperedPath = new Path
        {
            Stroke = Brushes.Gray,
            StrokeThickness = currentThickness,
            Data = taperedGeometry
        };

        // 将渐变路径添加到父容器中
        ((Grid)theCurve.Parent).Children.Add(taperedPath);
    }
}

这种方法会自动生成多个渐变层，路径长度和粗细按比例递减，过渡效果更平滑，且支持路径动态更新的场景。

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