Color fading

  • Thread starter Thread starter Joe
  • Start date Start date
J

Joe

I want to fade a color to another color in a user control. Actually the
color is the BackColor of the User control.

What's the easiest way to do this?

Thanks,
Joe
 
You could override the "OnPaintBackground()" method.

Here is an example:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace FadeColorBack
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

protected override void OnPaintBackground(PaintEventArgs e)
{
base.OnPaintBackground(e);
int red = 0;
int green = 90;
int blue = 70;
for (int counter = 0; counter < this.Size.Height; counter++)
{
red = red + 1; // You must do the math here...
if (red > 255) red = 255;
e.Graphics.DrawLine(new
Pen(System.Drawing.Color.FromArgb(red, green, blue), 1), 0, counter,
this.Size.Width, counter);
}

}

protected override void OnResize(EventArgs e)
{
base.OnResize(e);
this.Invalidate();
}

}
}

Regards,
Lars-Inge Tønnessen
 
Find the red, green, and blue values of both colors. You will need 6
variables, one for each start, and one for each destination value of each
color. Determine the length of time for the fade. Use a timer to change the
values. Set the timer interval to a fraction of a second (say, for example,
1/10th of a second, or 100 milliseconds) , and calculate the number of
intervals you need to complete the change in the time you specify. For
example, if you want the change to occur over a period of 3 seconds, and
your interval is 100 milliseconds, the number of intervals will be 30.

You want each color to change at the same rate, so as the difference between
each of the 3 start and destination values will differ, you will need to
calculate the difference for each start and destination value, and divide
that by the total number of intervals between the start and end of the fade.
This will yield the number that each value should change. It must be a float
or a double in order to be accurate, so you will need to convert it to an
integer after the calculation.

With each elapsed event of the timer, change the values of all 3 and create
a Color structure from the 3 values. Set the background color of the Control
to that color.

Since you are rounding, you will want to check and make sure that the values
don't go beyond the target values, or fall short of the target values. This
may require a bit of tweaking along the way, by redoing the calculation at
each event, or possibly by stopping a bit early on any given value (when it
reaches the destination), or adjusting it at the end to catch up with the
destination.

That's it in a nutshell.

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Numbskull

Show me your certification without works,
and I'll show my certification
*by* my works.
 
Did he mean fade, as in, a gradient fill, or did he mean a fade, as in,
a time based colour change?
Lets ask him!
 
Hi Kevin,

This worked out perfect!

Thanks,
Joe

Kevin Spencer said:
Find the red, green, and blue values of both colors. You will need 6
variables, one for each start, and one for each destination value of each
color. Determine the length of time for the fade. Use a timer to change
the values. Set the timer interval to a fraction of a second (say, for
example, 1/10th of a second, or 100 milliseconds) , and calculate the
number of intervals you need to complete the change in the time you
specify. For example, if you want the change to occur over a period of 3
seconds, and your interval is 100 milliseconds, the number of intervals
will be 30.

You want each color to change at the same rate, so as the difference
between each of the 3 start and destination values will differ, you will
need to calculate the difference for each start and destination value, and
divide that by the total number of intervals between the start and end of
the fade. This will yield the number that each value should change. It
must be a float or a double in order to be accurate, so you will need to
convert it to an integer after the calculation.

With each elapsed event of the timer, change the values of all 3 and
create a Color structure from the 3 values. Set the background color of
the Control to that color.

Since you are rounding, you will want to check and make sure that the
values don't go beyond the target values, or fall short of the target
values. This may require a bit of tweaking along the way, by redoing the
calculation at each event, or possibly by stopping a bit early on any
given value (when it reaches the destination), or adjusting it at the end
to catch up with the destination.

That's it in a nutshell.

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Numbskull

Show me your certification without works,
and I'll show my certification
*by* my works.
Click to expand...
 
:-D

--

Kevin Spencer
Microsoft MVP
Professional Numbskull

Show me your certification without works,
and I'll show my certification
*by* my works.
 
Back
Top