时间戳

首页 > 解决方案 > 如何在 WPF 中创建具有不同颜色段的完全连接线？

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

问题描述

看看这张照片：

线]

注意左边的线有一个干净的角落，而右边的线没有。这是我用来创建每个的 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 度。

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

标签： wpfpolyline

解决方案

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

<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"/>

推荐阅读