如何在 WPF 中创建具有不同颜色段的完全连接线？

Question

看看这张照片：

注意左边的线有一个干净的角，而右边的线没有。这是我用来创建每个的 XAML：

<Canvas Margin="10">
    <Polyline Stroke="Green" StrokeThickness="10">
        <Polyline.Points>
            <Point X="0" Y="0"/>
            <Point X="30" Y="50"/>
            <Point X="60" Y="0"/>
        </Polyline.Points>
    </Polyline>

    <Line X1="100" Y1="0" X2="130" Y2="50" Stroke="Red" StrokeThickness="10"/>
    <Line X1="130" Y1="50" X2="160" Y2="0" Stroke="Blue" StrokeThickness="10"/>
</Canvas>

显然 Polyline 可以轻松处理角落，但它不支持不同颜色的段，这正是我需要的。创建单独的线可以解决这个问题，但我失去了干净的角落。我需要能够使用第 1 行的角创建一条线，但使用第 2 行的颜色。

我的实际应用是折线图，所以这些线是动态创建的，可能有几十条线段，每条线段的角度范围为 0 到 180 度。

我遇到的唯一解决方案是使用 LinearGradientBrush 和 Polyline.Stroke，并在拐角处放置渐变停止点。但是考虑到线的长度和每一段都是完全可变的，梯度停止似乎是以百分比来衡量的（从一端的 0 到另一端的 1），计算起来似乎很痛苦，结果如下一个过于复杂的解决方案。有没有更简单的方法来做到这一点？

Answer 1

将线条笔划的起点和终点设置为圆形：

<Line X1="100" Y1="0" X2="130" Y2="50" Stroke="Red" StrokeThickness="10"
      StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
<Line X1="130" Y1="50" X2="160" Y2="0" Stroke="Blue" StrokeThickness="10"
      StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>

如何在 WPF 中创建具有不同颜色段的完全连接线？

How Can I Create A Fully Connected Line With Different Colored Segments In WPF?

wpf

polyline