Вы можете нарисовать двухцветную линию, используя LinearGradientBrush с четырьмя GradientStops.Например, следующий 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.Для этого вам нужно изменить StartPoint и EndPoint для LinearGradientBrush.Они зависят от градиента линии, и их немного сложно вычислить.
Чтобы продемонстрировать, как это можно сделать, я собрал шаблонный элемент управления (ниже), который рисует двухцветные линии.Color1 - это цвет, который был бы слева от вас, если бы вы стояли (X1, Y1) и смотрели в сторону (X2, Y2), а 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);
}
}
Темы \ 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 по краю линии, а не по ограничивающему прямоугольнику линии.Пересмотренный метод намного проще и позволяет использовать элемент управления с более чем двумя цветами.