Как я могу создать полностью соединенную линию с разными цветными сегментами в 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"/>