12,072,067 members (60,144 online)
alternative version

#### Stats

235.3K views
86 bookmarked
Posted

, 9 Jun 2002 CPOL
 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 Nishant is a Software Architect/Consultant based out of Columbus, Ohio. He has over 16 years of software industry experience in various roles including Lead Software Architect, Principal Software Engineer, and Product Manager. Nish is a recipient of the annual Microsoft Visual C++ MVP Award since 2002 (14 consecutive awards as of 2015).

Nish is an industry acknowledged expert in the Microsoft technology stack. He authored
C++/CLI in Action for Manning Publications in 2005, and had previously co-authored
Extending MFC Applications with the .NET Framework for Addison Wesley in 2003. In addition, he has over 140 published technology articles on CodeProject.com and another 250+ blog articles on his
WordPress blog. Nish is vastly experienced in team management, mentoring teams, and directing all stages of software development.

Contact Nish : You can reach Nish on his google email id voidnish.

Website and Blog

## You may also be interested in...

 First PrevNext
 Wow! Wong Shao Voon28-Jan-12 17:27 Wong Shao Voon 28-Jan-12 17:27
 Re: Wow! Nishant Sivakumar29-Jan-12 5:34 Nishant Sivakumar 29-Jan-12 5:34
 Dll Error Neeraj_ji23-Nov-06 22:21 Neeraj_ji 23-Nov-06 22:21
 Diagonal Gradient Tom Moore28-Sep-05 8:53 Tom Moore 28-Sep-05 8:53
 funny stuff man TuPacMansur9-Sep-05 19:10 TuPacMansur 9-Sep-05 19:10
 hahahaha... "I have only started on this GDI stuff. But it's truly an amazing field. I wish I had started on this area earlier. Now I'll always be behind times. And then I haven't started with GDI+ yet " thats funny.. Umer Mansoor
 A small problem rajani_sta18-Jul-05 0:17 rajani_sta 18-Jul-05 0:17
 Thaank you... Alfonso Bastias7-Oct-04 13:15 Alfonso Bastias 7-Oct-04 13:15
 Good but a small problem! cheenu_200230-Jun-04 2:02 cheenu_2002 30-Jun-04 2:02
 and OpenGL? h.gonzalez4-May-04 2:06 h.gonzalez 4-May-04 2:06
 Re: and OpenGL? Sonny Aman25-Apr-07 21:13 Sonny Aman 25-Apr-07 21:13
 Re: and OpenGL? Hugo GC26-Jul-07 2:31 Hugo GC 26-Jul-07 2:31
 Very good.But ... guosheng11-Mar-04 16:18 guosheng 11-Mar-04 16:18
 Static control problem rjo290914-Feb-04 8:10 rjo2909 14-Feb-04 8:10
 Very good !!.. but I have a problem.... DevPark28-Oct-03 17:10 DevPark 28-Oct-03 17:10
 Excelent Dario Diament23-Jul-03 7:06 Dario Diament 23-Jul-03 7:06
 Re: Excelent Nishant S23-Jul-03 16:26 Nishant S 23-Jul-03 16:26
 Banded output thesentinel1-Apr-03 0:32 thesentinel 1-Apr-03 0:32
 Re: Banded output Nishant S23-Jul-03 16:29 Nishant S 23-Jul-03 16:29
 Future Endeavor . . . . Zac Howland17-Jun-02 10:40 Zac Howland 17-Jun-02 10:40
 Looks can be deceptive... Marc Clifton10-Jun-02 18:06 Marc Clifton 10-Jun-02 18:06
 Re: Looks can be deceptive... Nish - Native CPian10-Jun-02 18:25 Nish - Native CPian 10-Jun-02 18:25
 gradients Goran Mitrovic10-Jun-02 14:22 Goran Mitrovic 10-Jun-02 14:22
 Re: gradients Chris Losinger10-Jun-02 14:44 Chris Losinger 10-Jun-02 14:44
 Re: gradients Nish - Native CPian10-Jun-02 16:17 Nish - Native CPian 10-Jun-02 16:17
 Re: gradients Nish - Native CPian10-Jun-02 16:13 Nish - Native CPian 10-Jun-02 16:13
 Re: gradients Goran Mitrovic11-Jun-02 8:56 Goran Mitrovic 11-Jun-02 8:56
 Re: gradients Nish - Native CPian11-Jun-02 15:48 Nish - Native CPian 11-Jun-02 15:48
 Re: gradients FranzKlein12-Jun-02 23:46 FranzKlein 12-Jun-02 23:46
 Re: gradients Nish - Native CPian13-Jun-02 0:50 Nish - Native CPian 13-Jun-02 0:50
 Re: gradients Mate7-Jun-03 15:00 Mate 7-Jun-03 15:00
 GDI+ Christian Graus10-Jun-02 1:52 Christian Graus 10-Jun-02 1:52
 Re: GDI+ Nish - Native CPian10-Jun-02 1:58 Nish - Native CPian 10-Jun-02 1:58
 Re: GDI+ Christian Graus10-Jun-02 2:14 Christian Graus 10-Jun-02 2:14
 Re: GDI+ Nish - Native CPian10-Jun-02 2:14 Nish - Native CPian 10-Jun-02 2:14
 Re: GDI+ Rama Krishna10-Jun-02 2:36 Rama Krishna 10-Jun-02 2:36
 Re: GDI+ Nish - Native CPian10-Jun-02 2:28 Nish - Native CPian 10-Jun-02 2:28
 Re: GDI+ Alexander Kourov17-Jun-02 17:42 Alexander Kourov 17-Jun-02 17:42
 Re: GDI+ Nishant S18-Jun-02 19:28 Nishant S 18-Jun-02 19:28
 Re: GDI+ Alexander Kourov19-Jun-02 18:04 Alexander Kourov 19-Jun-02 18:04
 Re: GDI+ Nishant S19-Jun-02 18:17 Nishant S 19-Jun-02 18:17
 Re: GDI+ Christian Graus19-Jun-02 18:49 Christian Graus 19-Jun-02 18:49
 Re: GDI+ Nishant S19-Jun-02 19:11 Nishant S 19-Jun-02 19:11
 Re: GDI+ Christian Graus19-Jun-02 19:23 Christian Graus 19-Jun-02 19:23
 Re: GDI+ Jinhyuck Jung12-Nov-02 22:41 Jinhyuck Jung 12-Nov-02 22:41
 Re: GDI+ Christian Graus13-Nov-02 1:13 Christian Graus 13-Nov-02 1:13
 Re: GDI+ (please tell me how) chachoo19-Feb-04 5:14 chachoo 19-Feb-04 5:14
 Usefull... Jean-Michel LE FOL10-Jun-02 0:22 Jean-Michel LE FOL 10-Jun-02 0:22
 Re: Usefull... Nish - Native CPian10-Jun-02 1:57 Nish - Native CPian 10-Jun-02 1:57
 Last Visit: 31-Dec-99 19:00     Last Update: 10-Feb-16 6:02 Refresh 12 Next »