Silverlight双色线
Silverlight双色线
提问于 2011-10-02 20:34:05
我需要用两个相邻的颜色画一条线。我找到的唯一解决方案是基于两行代码，第二行代码是TranslateTransform。但是平移值必须根据线的方向(角度)而改变。
有没有更简单的方法呢？
谢谢你的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-10-03 00:10:32
您可以使用具有四个GradientStops的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。这些依赖于直线的梯度，而且它们的计算有点笨拙。
为了演示如何做到这一点，我已经组合了一个模板控件(如下所示)，它绘制了双色线。如果你站在(X1，Y1)处并朝(X2，Y2)看，Color1是你左边的颜色，而Color2在你的右边。
请注意，此控件假定线条的起始和结束封口为Flat。如果您希望使用其他类型的起点或终点封口(例如Square或Round)，则需要调整overallWidth和overallHeight的计算。
TwoColorLine.cs：
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);
}
}Themes\Generic.xaml：
<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>：修改RecalculateEndPoints()方法，将StartPoint和EndPoint放在行的边缘，而不是放在行的边界矩形上。修改后的方法更简单，并且更容易使用具有两种以上颜色的控件。
Stack Overflow用户
发布于 2011-10-02 21:49:06
您可以创建一个带有颜色的小ImageBrush，并使用它绘制一条线。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7626335
复制相关文章
相似问题
腾讯云开发者
