Click here to Skip to main content
11,428,876 members (61,660 online)
Click here to Skip to main content

Using color gradients as backgrounds in your dialogs and views

, 9 Jun 2002 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

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;

Vertical gradients

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;

Diagonal gradients

A beautiful bluish gradient. Just like those Installshield backgrounds

Pink, for the *ahem* ladies here Smile | :)

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nish Nishant

United States United States
Nish Nishant is a Software Architect/Consultant based out of Columbus, Ohio. He has over 15 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 (13 consecutive awards as of 2014).

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

Comments and Discussions

 
GeneralWow! Pin
Wong Shao Voon28-Jan-12 17:27
memberWong Shao Voon28-Jan-12 17:27 
GeneralRe: Wow! Pin
Nishant Sivakumar29-Jan-12 5:34
mvpNishant Sivakumar29-Jan-12 5:34 
GeneralRe: Wow! Pin
Mahadev HK28-Nov-13 18:18
memberMahadev HK28-Nov-13 18:18 
QuestionDll Error Pin
Neeraj_ji23-Nov-06 22:21
memberNeeraj_ji23-Nov-06 22:21 
GeneralDiagonal Gradient Pin
Tom Moore28-Sep-05 8:53
memberTom Moore28-Sep-05 8:53 
GeneralRe: Diagonal Gradient Pin
Wes Aday28-Sep-05 10:06
memberWes Aday28-Sep-05 10:06 
Generalfunny stuff man Pin
TuPacMansur9-Sep-05 19:10
memberTuPacMansur9-Sep-05 19:10 
GeneralA small problem Pin
rajani_sta18-Jul-05 0:17
memberrajani_sta18-Jul-05 0:17 
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
GeneralThaank you... Pin
Alfonso Bastias7-Oct-04 13:15
memberAlfonso Bastias7-Oct-04 13:15 
GeneralGood but a small problem! Pin
cheenu_200230-Jun-04 2:02
membercheenu_200230-Jun-04 2:02 
Questionand OpenGL? Pin
h.gonzalez4-May-04 2:06
sussh.gonzalez4-May-04 2:06 
AnswerRe: and OpenGL? Pin
Sonny Aman25-Apr-07 21:13
memberSonny Aman25-Apr-07 21:13 
GeneralRe: and OpenGL? Pin
Hugo GC26-Jul-07 2:31
memberHugo GC26-Jul-07 2:31 
GeneralVery good.But ... Pin
guosheng11-Mar-04 16:18
memberguosheng11-Mar-04 16:18 
GeneralStatic control problem Pin
rjo290914-Feb-04 8:10
memberrjo290914-Feb-04 8:10 
GeneralVery good !!.. but I have a problem.... Pin
DevPark28-Oct-03 17:10
sussDevPark28-Oct-03 17:10 
GeneralExcelent Pin
Dario Diament23-Jul-03 7:06
sussDario Diament23-Jul-03 7:06 
GeneralRe: Excelent Pin
Nishant S23-Jul-03 16:26
editorNishant S23-Jul-03 16:26 
GeneralBanded output Pin
thesentinel1-Apr-03 0:32
memberthesentinel1-Apr-03 0:32 
GeneralRe: Banded output Pin
Nishant S23-Jul-03 16:29
editorNishant S23-Jul-03 16:29 
GeneralFuture Endeavor . . . . Pin
Zac Howland17-Jun-02 10:40
memberZac Howland17-Jun-02 10:40 
GeneralLooks can be deceptive... Pin
Marc Clifton10-Jun-02 18:06
memberMarc Clifton10-Jun-02 18:06 
GeneralRe: Looks can be deceptive... Pin
Nish - Native CPian10-Jun-02 18:25
memberNish - Native CPian10-Jun-02 18:25 
Generalgradients Pin
Goran Mitrovic10-Jun-02 14:22
memberGoran Mitrovic10-Jun-02 14:22 
GeneralRe: gradients Pin
Chris Losinger10-Jun-02 14:44
memberChris Losinger10-Jun-02 14:44 
GeneralRe: gradients Pin
Nish - Native CPian10-Jun-02 16:17
memberNish - Native CPian10-Jun-02 16:17 
GeneralRe: gradients Pin
Nish - Native CPian10-Jun-02 16:13
memberNish - Native CPian10-Jun-02 16:13 
GeneralRe: gradients Pin
Goran Mitrovic11-Jun-02 8:56
memberGoran Mitrovic11-Jun-02 8:56 
GeneralRe: gradients Pin
Nish - Native CPian11-Jun-02 15:48
memberNish - Native CPian11-Jun-02 15:48 
GeneralRe: gradients Pin
FranzKlein12-Jun-02 23:46
memberFranzKlein12-Jun-02 23:46 
GeneralRe: gradients Pin
Nish - Native CPian13-Jun-02 0:50
memberNish - Native CPian13-Jun-02 0:50 
GeneralRe: gradients Pin
Mate7-Jun-03 15:00
memberMate7-Jun-03 15:00 
GeneralGDI+ Pin
Christian Graus10-Jun-02 1:52
memberChristian Graus10-Jun-02 1:52 
GeneralRe: GDI+ Pin
Nish - Native CPian10-Jun-02 1:58
memberNish - Native CPian10-Jun-02 1:58 
GeneralRe: GDI+ Pin
Christian Graus10-Jun-02 2:14
memberChristian Graus10-Jun-02 2:14 
GeneralRe: GDI+ Pin
Nish - Native CPian10-Jun-02 2:14
memberNish - Native CPian10-Jun-02 2:14 
GeneralRe: GDI+ Pin
Rama Krishna10-Jun-02 2:36
memberRama Krishna10-Jun-02 2:36 
GeneralRe: GDI+ Pin
Nish - Native CPian10-Jun-02 2:28
memberNish - Native CPian10-Jun-02 2:28 
GeneralRe: GDI+ Pin
Alexander Kourov17-Jun-02 17:42
memberAlexander Kourov17-Jun-02 17:42 
GeneralRe: GDI+ Pin
Nishant S18-Jun-02 19:28
memberNishant S18-Jun-02 19:28 
GeneralRe: GDI+ Pin
Alexander Kourov19-Jun-02 18:04
memberAlexander Kourov19-Jun-02 18:04 
GeneralRe: GDI+ Pin
Nishant S19-Jun-02 18:17
memberNishant S19-Jun-02 18:17 
GeneralRe: GDI+ Pin
Christian Graus19-Jun-02 18:49
memberChristian Graus19-Jun-02 18:49 
GeneralRe: GDI+ Pin
Nishant S19-Jun-02 19:11
memberNishant S19-Jun-02 19:11 
GeneralRe: GDI+ Pin
Christian Graus19-Jun-02 19:23
memberChristian Graus19-Jun-02 19:23 
GeneralRe: GDI+ Pin
Jinhyuck Jung12-Nov-02 22:41
memberJinhyuck Jung12-Nov-02 22:41 
GeneralRe: GDI+ Pin
Christian Graus13-Nov-02 1:13
memberChristian Graus13-Nov-02 1:13 
GeneralRe: GDI+ (please tell me how) Pin
chachoo19-Feb-04 5:14
memberchachoo19-Feb-04 5:14 
GeneralUsefull... Pin
Jean-Michel LE FOL10-Jun-02 0:22
memberJean-Michel LE FOL10-Jun-02 0:22 
GeneralRe: Usefull... Pin
Nish - Native CPian10-Jun-02 1:57
memberNish - Native CPian10-Jun-02 1:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150428.2 | Last Updated 10 Jun 2002
Article Copyright 2002 by Nish Nishant
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid