WPF gradual change in color

Question

I am developing a simple game, using WPF. I need to change color of the brush gradually between blue, green, yellow, red, etc, without abrupt visible change in the color.

Is there a way I can use the color values to achieve this? I tried using intermediate colors like BlueGreen between blue and green, but it is still not very smooth. The GradientBrush doesn't help, as it is as if there are strokes of different colors. The lines ultimately end up looking like a string of colored pearls.

Thanks!

You will have to use storyboard and apply some animation on a certain trigger to make that nice smooth color transition — Krishna, Jun 11 '14 at 08:51
Please show some code. Do you need a gradient or an animation? — EagleBeak, Jun 11 '14 at 08:59
Hi, I don't need an animation... I am looking for a gradient; and the change in color happens dynamically, so I can't use XAML. — Vikram Bammanhalli, Jun 12 '14 at 07:15

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

This example shows how to use the LinearGradientBrush class to paint a line inside canavas with a linear gradient at run time.

Xaml

<Window x:Class="Example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Canvas  Name="paintSurface" MouseDown="Canvas_MouseDown_1" MouseMove="Canvas_MouseMove_1" >
            <Canvas.Background>
                <SolidColorBrush Color="Red" Opacity="0"/>
            </Canvas.Background>
        </Canvas>
    </Grid>
</Window>

Code Behind

 public partial class MainWindow : Window
    {

        Point currentPoint = new Point();

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Canvas_MouseDown_1(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            if (e.ButtonState == MouseButtonState.Pressed)
                currentPoint = e.GetPosition(this);
        }

        private void Canvas_MouseMove_1(object sender, System.Windows.Input.MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                Line line = new Line();
                // Create a diagonal linear gradient with four stops.   
                LinearGradientBrush myLinearGradientBrush =
                    new LinearGradientBrush();
                myLinearGradientBrush.StartPoint = new Point(0, 0);
                myLinearGradientBrush.EndPoint = new Point(1, 1);
                myLinearGradientBrush.GradientStops.Add(
                    new GradientStop(Colors.Yellow, 0.0));
                myLinearGradientBrush.GradientStops.Add(
                    new GradientStop(Colors.Red, 0.25));
                myLinearGradientBrush.GradientStops.Add(
                    new GradientStop(Colors.Blue, 0.75));
                myLinearGradientBrush.GradientStops.Add(
                    new GradientStop(Colors.LimeGreen, 1.0));
                line.Stroke = myLinearGradientBrush;
                line.X1 = currentPoint.X;
                line.Y1 = currentPoint.Y;
                line.X2 = e.GetPosition(this).X;
                line.Y2 = e.GetPosition(this).Y;

                currentPoint = e.GetPosition(this);

                paintSurface.Children.Add(line);
            }
        }
    }

Thanks Moez! I tried that approach. One drawback with that is I need to have rectangle drawn before filling it up. In my case, user can draw the line in run-time using the mouse cursor, and I need to change the line color gradually. Is there a way I can use LinearGradientBrush in that case too? — Vikram Bammanhalli, Jun 12 '14 at 09:39
Hi Moez! Thanks for the code. But I have already tried this and the problem with this is that the lines are a series of brush strokes. So to the user, it seems like the line is made up of pearls of different colors. What I am looking for is something very similar to Gradient, but which will work in run time. i.e. The color changes gradually and then goes back to the original color and so on. (All at run time) — Vikram Bammanhalli, Jun 12 '14 at 11:32
If my comment was not clear, just set line.StrokeThickness = 50; and line.StrokeStartLineCap = PenLineCap.Round. You can observe the series of gradient dots, which don't give a very pleasant gradient. — Vikram Bammanhalli, Jun 12 '14 at 11:42
Hi moez, as per your suggestion, I have uploaded an image: [IMG]http://i62.tinypic.com/eitn5d.png[/IMG] — Vikram Bammanhalli, Jun 12 '14 at 12:33

WPF gradual change in color

1 Answers1

Xaml

Code Behind