Using color gradients as backgrounds in your dialogs and views

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

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.

Horizontal gradients

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.

Diagonal gradients

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.

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.

License

Share

About the Author

Nish Nishant is a Principal Software Architect based out of Columbus, Ohio. He has over 17 years of software industry experience in various roles including Lead Software Architect, Principal Software Engineer, and Product Manager. Nish was a Microsoft Visual C++ MVP between 2002 and 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 : If you are interested in hiring Nish as a consultant, you can reach him via his google email id voidnish.

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 "

Hi,
I pasted your code in my application, it works nicely. But a small problem-

I have a start button in my dialog. If user clicks on it, a set of controls including buttons, icons will be visible. The problem is that, the contols flicker for a while before they display. This is really bad looking. Even while hiding these controls, the same problem occurs.
Pls help me in this matter.
Thanking you,
Rajani

Thanx for such a nice code.I have two querrie.
1.When I maximise the dialog box, there is a patch of color, of the size of the dialog box when it was opened.If I fully minimise & then maximise, this problem is not there. What to do?
2.When I used the diagonal shading code, I getting an error that m_bitmap is not declared, like that. Where should it be declared.

Thank you very much.It is very useful for me.
But I meet a problem when I pasted your code into my project.
In the Diagonal gradients part,I wanted to make a resizable application.So I pasted the MakeBitmap function called inside OnInitDialog into my project and called it inside OnSize. But when I run it,there was nothing on the background unless I called Inverlitate.
Why?

----------------------
I am from a non-English country,so if you can mail me,i would be very thankful.

I pasted your code into OnEraseBkgnd(), and it works well.
But, I'm using OpenGL functions and libraries, So I have code following.
When I use them, they override gradient background of yours. So your beautiful background is disappearing.
What can I do for that problem??
Please answer me... vulcan31@hanmail.net
--------------------------------------------
PIXELFORMATDESCRIPTOR object,
SetPixelFormat(m_hDC,pixelformat,&pfd);
m_hRC = wglCreateContext(m_hDC);
wglMakeCurrent(m_hDC,m_hRC);
glClearColor(0.0f, 1.0f, 1.0f, 0.0f);
---------------------------------------------

Hey Nish
Great article. Here is something to get your juices flowing . . . . A few *cough* years ago, I wrote a Visual Basic application that solved a simple brain teaser (it was a Governor's School assignment when I was in high school). I got bored with doing just the basic assignment . . . so I added some flare (database access, gradient colored form, and a few other bells and whistles). I have since ported this to C++. Anyway, my idea for you is to extend this article to add a timer and change the gradient scheme based on some random number generator, etc. I still have my code for this somewhere . . . but it might be fun for you to fool around with

These gradients look great by themselves. I added the code to program I'm writing for a customer and the result was attrocious (sp?). Static controls showed their ugly backgrounds (and I meticulously set my statics to the same height everywhere), group boxes lost their nice 3D definition, and the affect was quite jarring when the spaces between listboxes and buttons got filled with color. The "smoothness" of the GUI was lost.

A long time ago, someone told me that space is a really important consideration when designing GUI's. Filling the space with a gradient takes away from the spatiousness of the interface.