Using Color Gradients in Win32/SDK Programs

Introduction

Creating a color gradient as a background isn't hard at all. If you have read Nishant's article on using color gradients with MFC, then this code is simply a modified SDK version of his article.

Into the Abyss We Go

Okay, first I suggest reading the MFC version of this:

• Using color gradients as backgrounds in your dialogs and views

After that, you should have a simple understanding of how this was done. To get started, simply add the WM_ERASEBKGND message to your window procedure function. I suggest creating a separate function to do all the work of actually drawing the background. If this is the route you decide to take, make sure in the declaration of the function you pass along the handle to your main window. With this said, now for the code.

void OnEraseBkGnd(HWND hwnd)
{
    /* Vars */
    HDC dc; /* Standard Device Context; used to do the painting */
    
    /* rect = Client Rect of the window; 
    Temp = Temparory rect tangle for the color bands */
    RECT rect, temp; 
    HBRUSH color; /* A brush to do the painting with */
    
    /* Get the dc for the wnd */
    dc = GetDC(hwnd);
    
    /* Get the client rect */
    GetClientRect(hwnd, &rect);
    
    /* Start color; Change the R,G,B values 
    to the color of your choice */
    int r1 = 255, g1 = 0, b1 = 0;
    
    /* End Color; Change the R,G,B values 
    to the color of your choice */
    int r2 = 255, g2 = 255, b2 = 0;
    
    /* loop to create the gradient */
    for(int i=0;i<rect.right;i++) 
    { 
        /* Color ref. for the gradient */
        int r,g,b; 
        /* Determine the colors */
        r = r1 + (i * (r2-r1) / rect.right); 
        g = g1 + (i * (g2-g1) / rect.right);
        b = b1 + (i * (b2-b1) / rect.right);
        
        /* Fill in the rectangle information */
        
        /* The uper left point of the rectangle 
        being painted; uses i as the starting point*/
        temp.left = i;
        /* Upeer Y cord. Always start at the top */ 
        temp.top = 0; 
        /* Okay heres the key part, 
        create a rectangle thats 1 pixel wide */
        temp.right = i + 1; 
        /* Height of the rectangle */
        temp.bottom = rect.bottom; 
        
        /* Create a brush to draw with; 
        these colors are randomized */
        color = CreateSolidBrush(RGB(r, g, b));
        
        /* Finally fill in the rectangle */
        FillRect(dc, &temp, color);
    }
}

Final Notes

One last final note, now that wasn't hard, was it? Its really easy to create a gradient. Also if you create a second function for creating the gradient, you could just easily call the function when you wanted the gradient to appear. Also with a little bit of customization, you could easily make the gradient only a portion of the window. That's all folks...

License

This article has no explicit license attached to it, but may contain usage terms in the article text or the download files themselves. If in doubt, please contact the author via the discussion board below.

A list of licenses authors might use can be found here.