#### Tagged as

Go to top

, 9 Jun 2002
 Rate this:
Beginner article that shows how you can create horizontal, vertical and diagonal backgrounds. Also tells you what to watch out for, to avoid flickering when doing complicated drawing.

Gradients are beautiful, have always been so and will continue being beautiful. Oops! What am I doing here? I guess I got carried away a little. Pardon me. Well seriously speaking, there are times when it would be nice to have a gradient background for our windows. I think the first time I remember seeing gradients was in the Setup programs generated by Install Shield. Even during the Windows 3.11 days, they had Setup programs that typically used a Blue gradient as their background. And recently while I have been making CP stats using PowerPoint, I use an Orange gradient as my presentation's background. Well creating gradients is not a big deal as I found out.

This one uses two dark colors to create the gradient effect

This one uses green and white as the two border colors and a gradient is filled smoothly between these colors

Well, all you need to do is to override OnEraseBkgnd in your CWnd class. We start with one color and slowly change the RGB values till we end up with the other color. It's basically mathematics and I am not really good at maths. So the algorithm I have used might not be perfect and I apologize to you for that. But it portrays how to get a gradient effect which is what I wanted. If better mathematicians than me can give me an easier formula I'd be very happy about that.

CDialog::OnEraseBkgnd(pDC);

CRect rect;
GetClientRect(&rect);

int r1=127,g1=127,b1=56; //Any start color
int r2=5,g2=55,b2=165; //Any stop color

for(int i=0;i<rect.Width();i++)
{
int r,g,b;
r = r1 + (i * (r2-r1) / rect.Width());
g = g1 + (i * (g2-g1) / rect.Width());
b = b1 + (i * (b2-b1) / rect.Width());
pDC->FillSolidRect(i,0,1,rect.Height(),RGB(r,g,b));
}

return true;

I use a black to red gradient here

This uses two fluorescent colors and I don't recommend this sort of combination as it hurts the eyes

Similar to the horizontal gradient we override OnEraseBkgnd

CDialog::OnEraseBkgnd(pDC);

CRect rect;
GetClientRect(&rect);

int r1=127,g1=127,b1=56; //Any start color
int r2=5,g2=55,b2=165; //Any stop color

for(int i=0;i<rect.Height();i++)
{
int r,g,b;
r = r1 + (i * (r2-r1) / rect.Height());
g = g1 + (i * (g2-g1) / rect.Height());
b = b1 + (i * (b2-b1) / rect.Height());
pDC->FillSolidRect(0,i,rect.Width(),1,RGB(r,g,b));
}

return true;

A beautiful bluish gradient. Just like those Installshield backgrounds

Pink, for the *ahem* ladies here

Diagonal gradients are slightly tricky. Unlike horizontal and vertical gradients we are not handling rectangles here. So we will not be able to use FillSolidRect for our purpose. In fact we need to use MoveTo and LineTo in a rather heavy loop. Being a novice at this GDI stuff, I put all my code in OnEraseBkgnd. The painting was so slow that it almost seemed like an animation. I was disappointed to say the least. That's when some of the gurus here suggested that I use a memory DC. So I used CreateCompatibleDC to create a memory DC and drew directly onto this DC. Then I used BitBlt to blast it into the actual DC. Well, there was considerable improvement. Now the animation effect was gone. But still there was a very noticeable flicker. This was really bad. But there was too much looping in the painting code. That's when I got this idea of keeping a CBitmap member. During initialization I'll draw all my gradient stuff into this CBitmap. Now all I needed to do in OnEraseBkgnd was to BitBlt this bitmap into the DC and voila, things were fast and smooth once again.

CDialog::OnEraseBkgnd(pDC);

CRect rect;
GetClientRect(&rect);

CDC dc2;
dc2.CreateCompatibleDC(pDC);
CBitmap *oldbmap=dc2.SelectObject(&m_bitmap);

/*We copy the bitmap into the DC*/
pDC->BitBlt(0,0,rect.Width(),rect.Height(),&dc2,0,0,SRCCOPY);
dc2.SelectObject(oldbmap);

return true;

And I wrote a function called MakeBitmap which creates the gradient bitmap and puts it into our CBitmap member. In my dialog based application I called MakeBitmap inside OnInitDialog. In your SDI programs I guess you are supposed to call MakeBitmap inside OnInitialUpdate.

void CYourClassName::MakeBitmap()
{
CPaintDC dc(this);
CRect rect;
GetClientRect(&rect);

int r1=245,g1=190,b1=240;
int r2=130,g2=0,b2=0;

int x1=0,y1=0;
int x2=0,y2=0;

CDC dc2;
dc2.CreateCompatibleDC(&dc);

if(m_bitmap.m_hObject)
m_bitmap.DeleteObject();
m_bitmap.CreateCompatibleBitmap(&dc,rect.Width(),
rect.Height());

CBitmap *oldbmap=dc2.SelectObject(&m_bitmap);

while(x1 < rect.Width() && y1 < rect.Height())
{
if(y1 < rect.Height()-1)
y1++;
else
x1++;

if(x2 < rect.Width()-1)
x2++;
else
y2++;

int r,g,b;
int i = x1+y1;
r = r1 + (i * (r2-r1) / (rect.Width()+rect.Height()));
g = g1 + (i * (g2-g1) / (rect.Width()+rect.Height()));
b = b1 + (i * (b2-b1) / (rect.Width()+rect.Height()));

CPen p(PS_SOLID,1,RGB(r,g,b));
CPen *oldpen = dc2.SelectObject(&p);

dc2.MoveTo(x1,y1);
dc2.LineTo(x2,y2);

dc2.SelectObject(oldpen);
}

dc2.SelectObject(oldbmap);

}

## Conclusion

All the screenshots in this article have been resized using Adobe Photoshop 6 and I'd like to thank Ravi Bhavnani for his image resizing tips.

## Share

United States
Nish is a real nice guy who has been writing code since 1990 when he first got his hands on an 8088 with 640 KB RAM. Originally from sunny Trivandrum in India, he has been living in various places over the past few years and often thinks it’s time he settled down somewhere.

Nish has been a Microsoft Visual C++ MVP since October, 2002 - awfully nice of Microsoft, he thinks. He maintains an MVP tips and tricks web site - www.voidnish.com where you can find a consolidated list of his articles, writings and ideas on VC++, MFC, .NET and C++/CLI. Oh, and you might want to check out his blog on C++/CLI, MFC, .NET and a lot of other stuff - blog.voidnish.com.

Nish loves reading Science Fiction, P G Wodehouse and Agatha Christie, and also fancies himself to be a decent writer of sorts. He has authored a romantic comedy Summer Love and Some more Cricket as well as a programming book – Extending MFC applications with the .NET Framework.

Nish's latest book C++/CLI in Action published by Manning Publications is now available for purchase. You can read more about the book on his blog.

Despite his wife's attempts to get him into cooking, his best effort so far has been a badly done omelette. Some day, he hopes to be a good cook, and to cook a tasty dinner for his wife.

## You may also be interested in...

### Expanding active decision-making: The power of integrating business rules and events

 FirstPrev Next
 and OpenGL? h.gonzalez 4-May-04 1:06
 Re: and OpenGL? Sonny Aman 25-Apr-07 20:13
 Re: and OpenGL? Hugo GC 26-Jul-07 1:31
 Very good.But ... guosheng 11-Mar-04 15:18
 Static control problem rjo2909 14-Feb-04 7:10
 Very good !!.. but I have a problem.... DevPark 28-Oct-03 16:10
 Excelent Dario Diament 23-Jul-03 6:06
 Re: Excelent Nishant S 23-Jul-03 15:26
 Banded output thesentinel 31-Mar-03 23:32
 Re: Banded output Nishant S 23-Jul-03 15:29
 Future Endeavor . . . . Zac Howland 17-Jun-02 9:40
 Looks can be deceptive... Marc Clifton 10-Jun-02 17:06
 Re: Looks can be deceptive... Nish - Native CPian 10-Jun-02 17:25
 Re: gradients Chris Losinger 10-Jun-02 13:44
 Re: gradients Nish - Native CPian 10-Jun-02 15:17
 Re: gradients Nish - Native CPian 10-Jun-02 15:13
 Re: gradients Goran Mitrovic 11-Jun-02 7:56
 Re: gradients Nish - Native CPian 11-Jun-02 14:48
 Re: gradients Nish - Native CPian 12-Jun-02 23:50
 GDI+ Christian Graus 10-Jun-02 0:52
 Re: GDI+ Nish - Native CPian 10-Jun-02 0:58
 Re: GDI+ Christian Graus 10-Jun-02 1:14
 Re: GDI+ Nish - Native CPian 10-Jun-02 1:14
 Re: GDI+ Rama Krishna 10-Jun-02 1:36
 Re: GDI+ Nish - Native CPian 10-Jun-02 1:28
 Re: GDI+ Alexander Kourov 17-Jun-02 16:42
 Re: GDI+ Nishant S 18-Jun-02 18:28
 Re: GDI+ Alexander Kourov 19-Jun-02 17:04
 Re: GDI+ Nishant S 19-Jun-02 17:17
 Re: GDI+ Christian Graus 19-Jun-02 17:49
 Re: GDI+ Nishant S 19-Jun-02 18:11
 Re: GDI+ Christian Graus 19-Jun-02 18:23
 Re: GDI+ Jinhyuck Jung 12-Nov-02 21:41
 Re: GDI+ Christian Graus 13-Nov-02 0:13
 Re: GDI+ (please tell me how) chachoo 19-Feb-04 4:14
 Usefull... Jean-Michel LE FOL 9-Jun-02 23:22
 Re: Usefull... Nish - Native CPian 10-Jun-02 0:57
 Re: Usefull... Anonymous 10-Jun-02 4:53
 Very useful to me! Siuming 9-Jun-02 20:54
 Re: Very useful to me! Nish - Native CPian 9-Jun-02 21:13
 Last Visit: 31-Dec-99 18:00     Last Update: 29-Sep-14 20:15 Refresh 12