I need a polyline to be "drawn" when the button is clicked. The background on which the polyline is drawn is not white:
<Grid Background="#102035">
I did something similar but I doubt it's the right solution, the animation doesn't look smooth enough and while the line is drawn its end is already visible in white. Any ideas how to make it better?
private void animate(object sender, RoutedEventArgs e)
{
polyline.Points.Clear();
polyline.StrokeThickness = 5;
polyline.Points.Add(new Point(200, 100));
polyline.Points.Add(new Point(1000, 100));
LinearGradientBrush gradientBrush = new LinearGradientBrush();
gradientBrush.StartPoint = new Point(0, 0);
gradientBrush.EndPoint = new Point(1, 1);
GradientStop stop1 = new GradientStop(Colors.Transparent, 0.0);
GradientStop stop2 = new GradientStop(Colors.Transparent, 0.25);
GradientStop stop3 = new GradientStop(Colors.Transparent, 0.5);
GradientStop stop4 = new GradientStop(Colors.Transparent, 0.75);
GradientStop stop5 = new GradientStop(Colors.Transparent, 1);
gradientBrush.GradientStops.Add(stop1);
gradientBrush.GradientStops.Add(stop2);
gradientBrush.GradientStops.Add(stop3);
gradientBrush.GradientStops.Add(stop4);
gradientBrush.GradientStops.Add(stop5);
polyline.Stroke = gradientBrush;
ColorAnimation animation1 = new ColorAnimation(Colors.Red, TimeSpan.FromSeconds(0.1));
stop1.BeginAnimation(GradientStop.ColorProperty, animation1);
ColorAnimation animation2 = new ColorAnimation(Colors.Red, TimeSpan.FromSeconds(0.3));
stop2.BeginAnimation(GradientStop.ColorProperty, animation2);
ColorAnimation animation3 = new ColorAnimation(Colors.Red, TimeSpan.FromSeconds(0.5));
stop3.BeginAnimation(GradientStop.ColorProperty, animation3);
ColorAnimation animation4 = new ColorAnimation(Colors.Red, TimeSpan.FromSeconds(0.8));
stop4.BeginAnimation(GradientStop.ColorProperty, animation4);
ColorAnimation animation5 = new ColorAnimation(Colors.Red, TimeSpan.FromSeconds(1));
stop5.BeginAnimation(GradientStop.ColorProperty, animation5);
}