blocks|key|581640|text|您可以创建一个带有颜色的小ImageBrush，并使用它绘制一条线。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|581641|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can create a small ImageBrush with the colors, and draw a single line using it.

blocks|key|584266|text|您可以使用具有四个GradientStops的LinearGradientBrush绘制一条双色线。例如，下面的XAML绘制一条半红半黄的水平线：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|584267|++++<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>|code-block|syntax|javascript|584268|如果您尝试对非水平线使用相同的LinearGradientBrush，您很快就会发现它无法完成您想要的操作。这两种颜色总是由一条水平线分隔，无论这条线有什么渐变，而你希望分隔这两种颜色的线沿着Line的中间延伸。为此，您需要更改LinearGradientBrush的StartPoint和EndPoint。这些依赖于直线的梯度，而且它们的计算有点笨拙。|offset|length|style|CODE|584269|为了演示如何做到这一点，我已经组合了一个模板控件(如下所示)，它绘制了双色线。如果你站在(X1，Y1)处并朝(X2，Y2)看，Color1是你左边的颜色，而Color2在你的右边。|584270|请注意，此控件假定线条的起始和结束封口为Flat。如果您希望使用其他类型的起点或终点封口(例如Square或Round)，则需要调整overallWidth和overallHeight的计算。|584271|TwoColorLine.cs：|584272|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+%2B+gradient+*+gradient));
++++++++++++sin+=+gradient+*+cos;
++++++++}

++++++++//+These+two+lines+assume+flat+start+and+end+cap.
++++++++double+overallWidth+=+Math.Abs(X2+-+X1)+%2B+StrokeThickness+*+Math.Abs(sin);
++++++++double+overallHeight+=+Math.Abs(Y2+-+Y1)+%2B+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+%2B+xOffset,+0.5+-+yOffset);
++++++++lineBrush.EndPoint+=+new+Point(0.5+-+xOffset,+0.5+%2B+yOffset);
++++}
}|584273|Themes\Generic.xaml：|584274|<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>|584275|示例用法：|584276|<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>|584277|：修改RecalculateEndPoints()方法，将StartPoint和EndPoint放在行的边缘，而不是放在行的边界矩形上。修改后的方法更简单，并且更容易使用具有两种以上颜色的控件。|584278|entityMap^0|0|0|2O|4|3Q|A|41|8|0|19|2|1C|2|1J|2|1M|2|1R|6|26|6|0|K|4|1B|6|1I|5|1U|C|27|D|0|0|0|0|0|0|0|3|M|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@$I|19|J|1A|K|L]|$I|1B|J|1C|K|L]|$I|1D|J|1E|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1F|8|@$I|1G|J|1H|K|L]|$I|1I|J|1J|K|L]|$I|1K|J|1L|K|L]|$I|1M|J|1N|K|L]|$I|1O|J|1P|K|L]|$I|1Q|J|1R|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1S|8|@$I|1T|J|1U|K|L]|$I|1V|J|1W|K|L]|$I|1X|J|1Y|K|L]|$I|1Z|J|20|K|L]|$I|21|J|22|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|23|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|24|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|25|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|26|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|27|8|@]|9|@]|A|$]]|$1|10|3|11|5|D|7|28|8|@]|9|@]|A|$E|F]]|$1|12|3|13|5|6|7|29|8|@$I|2A|J|2B|K|L]]|9|@]|A|$]]|$1|14|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]]|15|$]]

You can draw a two-colour line using a LinearGradientBrush with four GradientStops. For example, the following XAML draws a horizontal line that is half red and half yellow:

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

If you attempt to use the same LinearGradientBrush with a line that is not horizontal, you will quickly find that it won't do what you want. The two colours are always separated by a horizontal line whatever gradient the line has, whereas you want the line that separates the two colours to run down the middle of your <code>Line</code>. To achieve this, you need to change the <code>StartPoint</code> and <code>EndPoint</code> for the LinearGradientBrush. These depend on the gradient of the line, and they are a little awkward to calculate.

To demonstrate how this can be done, I've put together a templated control (below) that draws two-colour lines. <code>Color1</code> is the colour that would be on your left if you stood at (<code>X1</code>, <code>Y1</code>) and looked towards (<code>X2</code>, <code>Y2</code>), and <code>Color2</code> would be on your right.

Note that this control assumes that the start and end caps of the line are <code>Flat</code>. If you wish to use other types of start or end cap (e.g. <code>Square</code> or <code>Round</code>), you will need to adjust the calculation of <code>overallWidth</code> and <code>overallHeight</code>.

TwoColorLine.cs:

<pre><code>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 &gt; 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 &lt; 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);
 }
}
</code></pre>

Themes\Generic.xaml:

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

Example usage:

<pre><code>&lt;Grid&gt;
 &lt;local:TwoColorLine X1="190" Y1="170" X2="150" Y2="50" Color1="Red" Color2="Green" StrokeThickness="14" /&gt;
 &lt;local:TwoColorLine X1="210" Y1="170" X2="250" Y2="50" Color1="Red" Color2="Green" StrokeThickness="14" /&gt;
 &lt;local:TwoColorLine X1="230" Y1="190" X2="350" Y2="150" Color1="Red" Color2="Green" StrokeThickness="14" /&gt;
 &lt;local:TwoColorLine X1="230" Y1="210" X2="350" Y2="250" Color1="Red" Color2="Green" StrokeThickness="14" /&gt;
 &lt;local:TwoColorLine X1="210" Y1="230" X2="250" Y2="350" Color1="Red" Color2="Green" StrokeThickness="14" /&gt;
 &lt;local:TwoColorLine X1="190" Y1="230" X2="150" Y2="350" Color1="Red" Color2="Green" StrokeThickness="14" /&gt;
 &lt;local:TwoColorLine X1="170" Y1="210" X2="50" Y2="250" Color1="Red" Color2="Green" StrokeThickness="14" /&gt;
 &lt;local:TwoColorLine X1="170" Y1="190" X2="50" Y2="150" Color1="Red" Color2="Green" StrokeThickness="14" /&gt;
&lt;/Grid&gt;
</code></pre>

EDIT: revise <code>RecalculateEndPoints()</code> method to put the StartPoint and EndPoint on the edge of the line rather than on the line's bounding rectangle. The revised method is much simpler and makes it easier to use the control with more than two colours.

I need to draw a line with two adjacent color. 
The only solution i found is based on two lines, with a TranslateTransform on the second.
But the translate value have to change according to line orientation (angle).

Is the any way to do it more easily?

Thanks for help.

Silverlight double color lines

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要用两个相邻的颜色画一条线。我找到的唯一解决方案是基于两行代码，第二行代码是TranslateTransform。但是平移值必须根据线的方向(角度)而改变。有没有更简单的方法呢？谢谢你的帮助。

问Silverlight双色线
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Silverlight双色线EN