Question

我需要用两个相邻的颜色画一条线。我找到的唯一解决方案是基于两行，第二行是TranslateTransform。但是翻译值必须根据线方向（角度）而改变。

有没有办法更轻松地做到这一点？

感谢您的帮助。

Answer 1

您可以使用带有四个GradientStop的LinearGradientBrush绘制双色线。例如，以下XAML绘制一条半红色和半黄色的水平线：

    <Line X1="0" Y1="20" X2="200" Y2="20" StrokeThickness="14">
        <Line.Stroke>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="Red" />
                <GradientStop Offset="0.5" Color="Red" />
                <GradientStop Offset="0.5" Color="Yellow" />
                <GradientStop Offset="1" Color="Yellow" />
            </LinearGradientBrush>
        </Line.Stroke>
    </Line>

如果您尝试将同一个LinearGradientBrush与非水平线一起使用，您很快就会发现它不会做您想要的。无论线条具有何种渐变，两种颜色始终用水平线分隔，而您希望将两种颜色分开的线条在Line的中间向下运行。为此，您需要更改LinearGradientBrush的StartPoint和EndPoint。这取决于线的梯度，它们有点难以计算。

为了演示如何做到这一点，我将一个模板控件（下图）放在一起绘制双色线。如果您站在（Color1，X1）并向前看（Y1，X2）和{，Y2是左侧的颜色{1}}就在你的右边。

请注意，此控件假定该行的开头和结尾为Color2。如果您希望使用其他类型的开始或结束上限（例如Flat或Square），则需要调整Round和overallWidth的计算。

TwoColorLine.cs：

overallHeight

主题\ Generic.xaml：

public class TwoColorLine : Control
{
    public static readonly DependencyProperty X1Property =
        DependencyProperty.Register("X1", typeof(double), typeof(TwoColorLine), new PropertyMetadata(Coordinates_Changed));

    public static readonly DependencyProperty Y1Property =
        DependencyProperty.Register("Y1", typeof(double), typeof(TwoColorLine), new PropertyMetadata(Coordinates_Changed));

    public static readonly DependencyProperty X2Property =
        DependencyProperty.Register("X2", typeof(double), typeof(TwoColorLine), new PropertyMetadata(Coordinates_Changed));

    public static readonly DependencyProperty Y2Property =
        DependencyProperty.Register("Y2", typeof(double), typeof(TwoColorLine), new PropertyMetadata(Coordinates_Changed));

    public static readonly DependencyProperty Color1Property =
        DependencyProperty.Register("Color1", typeof(Color), typeof(TwoColorLine), new PropertyMetadata(Colors_Changed));

    public static readonly DependencyProperty Color2Property =
        DependencyProperty.Register("Color2", typeof(Color), typeof(TwoColorLine), new PropertyMetadata(Colors_Changed));

    public static readonly DependencyProperty StrokeThicknessProperty =
        DependencyProperty.Register("StrokeThickness", typeof(double), typeof(TwoColorLine), null);

    private LinearGradientBrush lineBrush;

    public TwoColorLine()
    {
        this.DefaultStyleKey = typeof(TwoColorLine);
    }

    public double X1
    {
        get { return (double)GetValue(X1Property); }
        set { SetValue(X1Property, value); }
    }

    public double Y1
    {
        get { return (double)GetValue(Y1Property); }
        set { SetValue(Y1Property, value); }
    }

    public double X2
    {
        get { return (double)GetValue(X2Property); }
        set { SetValue(X2Property, value); }
    }

    public double Y2
    {
        get { return (double)GetValue(Y2Property); }
        set { SetValue(Y2Property, value); }
    }

    public Color Color1
    {
        get { return (Color)GetValue(Color1Property); }
        set { SetValue(Color1Property, value); }
    }

    public Color Color2
    {
        get { return (Color)GetValue(Color2Property); }
        set { SetValue(Color2Property, value); }
    }

    public double StrokeThickness
    {
        get { return (double)GetValue(StrokeThicknessProperty); }
        set { SetValue(StrokeThicknessProperty, value); }
    }

    private static void Coordinates_Changed(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        var line = obj as TwoColorLine;
        if (line != null)
        {
            line.OnCoordinatesChanged();
        }
    }

    private static void Colors_Changed(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        var line = obj as TwoColorLine;
        if (line != null)
        {
            line.OnColorsChanged();
        }
    }

    private void OnCoordinatesChanged()
    {
        if (lineBrush != null)
        {
            RecalculateEndPoints();
        }
    }

    public void OnColorsChanged()
    {
        if (lineBrush != null)
        {
            UpdateColors();
        }
    }

    public void UpdateColors()
    {
        lineBrush.GradientStops[0].Color = Color1;
        lineBrush.GradientStops[1].Color = Color1;
        lineBrush.GradientStops[2].Color = Color2;
        lineBrush.GradientStops[3].Color = Color2;
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        Line line = GetTemplateChild("line") as Line;
        if (line == null)
        {
            throw new InvalidOperationException("No line found in the template");
        }

        lineBrush = line.Stroke as LinearGradientBrush;
        if (lineBrush == null)
        {
            throw new InvalidOperationException("Line does not have a LinearGradientBrush as its stroke");
        }

        UpdateColors();
        RecalculateEndPoints();
    }

    private void RecalculateEndPoints()
    {
        double cos, sin;
        if (X2 == X1)
        {
            cos = 0;
            sin = (Y2 > Y1) ? 1 : -1;
        }
        else
        {
            double gradient = (Y2 - Y1) / (X2 - X1);
            cos = Math.Sqrt(1 / (1 + gradient * gradient));
            sin = gradient * cos;
        }

        // These two lines assume flat start and end cap.
        double overallWidth = Math.Abs(X2 - X1) + StrokeThickness * Math.Abs(sin);
        double overallHeight = Math.Abs(Y2 - Y1) + StrokeThickness * Math.Abs(cos);

        int sign = (X2 < X1) ? -1 : 1;

        double xOffset = (sign * StrokeThickness * sin / 2) / overallWidth;
        double yOffset = (sign * StrokeThickness * cos / 2) / overallHeight;

        lineBrush.StartPoint = new Point(0.5 + xOffset, 0.5 - yOffset);
        lineBrush.EndPoint = new Point(0.5 - xOffset, 0.5 + yOffset);
    }
}

使用示例：

<Style TargetType="local:TwoColorLine">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TwoColorLine">
                <Line x:Name="line" X1="{TemplateBinding X1}" Y1="{TemplateBinding Y1}" X2="{TemplateBinding X2}" Y2="{TemplateBinding Y2}" StrokeThickness="{TemplateBinding StrokeThickness}">
                    <Line.Stroke>
                        <LinearGradientBrush>
                            <GradientStop Offset="0" />
                            <GradientStop Offset="0.5" />
                            <GradientStop Offset="0.5" />
                            <GradientStop Offset="1" />
                        </LinearGradientBrush>
                    </Line.Stroke>
                </Line>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

编辑：修改<Grid> <local:TwoColorLine X1="190" Y1="170" X2="150" Y2="50" Color1="Red" Color2="Green" StrokeThickness="14" /> <local:TwoColorLine X1="210" Y1="170" X2="250" Y2="50" Color1="Red" Color2="Green" StrokeThickness="14" /> <local:TwoColorLine X1="230" Y1="190" X2="350" Y2="150" Color1="Red" Color2="Green" StrokeThickness="14" /> <local:TwoColorLine X1="230" Y1="210" X2="350" Y2="250" Color1="Red" Color2="Green" StrokeThickness="14" /> <local:TwoColorLine X1="210" Y1="230" X2="250" Y2="350" Color1="Red" Color2="Green" StrokeThickness="14" /> <local:TwoColorLine X1="190" Y1="230" X2="150" Y2="350" Color1="Red" Color2="Green" StrokeThickness="14" /> <local:TwoColorLine X1="170" Y1="210" X2="50" Y2="250" Color1="Red" Color2="Green" StrokeThickness="14" /> <local:TwoColorLine X1="170" Y1="190" X2="50" Y2="150" Color1="Red" Color2="Green" StrokeThickness="14" /> </Grid>方法，将StartPoint和EndPoint放在行的边缘而不是行的边界矩形上。修改后的方法更简单，并且使用两种以上颜色的控件更容易。

Answer 2

您可以使用颜色创建一个小的ImageBrush，并使用它绘制一条线。

Silverlight双色系

2 个答案: