Click here to Skip to main content
15,400,390 members
Articles / Web Development / HTML
Tip/Trick
Posted 15 Oct 2014

Stats

16.8K views
862 downloads
15 bookmarked

Adding a "transparent" Background to Your Buttons

Rate me:
Please Sign up or sign in to vote.
4.54/5 (6 votes)
15 Oct 2014Public Domain2 min read
Tutorial on setting a false transparency onto your button's edges.

Introduction

When creating buttons (or another control) in Win32 API, you may note that the edges won't match the background color. However, there is a very simple way to fix this issue, by quickly handling a WM_CTLCOLORBTN message at your Window Procedure. Keep in mind that you must understand the concepts of Window Procedure, Message Handling, and perhaps, Window Styles.

NOTE: This does NOT work with the BS_OWNERDRAW style, that will paint the entire control. Do not use these together, unless you can properly redraw the button.

Background

I once had a very hard time tracking down a way to solve a button's edges contrasting with the window background, being it a bitmap, HBRUSH, or whatever control. I then gathered as much information as possible and compiled it into an almost working prototype, that basically painted the whole button and rendered it invisible. By restudying the code, I discovered the nature of the issue, the BS_OWNERDRAW style.

Using the Code

First of all, this procedure only works with a monochromatic background, or at least one in which the area your button(s) will occupy present only one color.
NOTE: The procedure will work with multiple colors, but the outcome is not what this tutorial tries to achieve.

To begin with, at your Window Procedure, you must handle the message WN_CTLCOLORBTN. This specific message is received and sent back when a button is created, and references all buttons.

C++
case WM_CTLCOLORBTN:

    break;

Now that you can properly handle this message, we need to create an HBRUSH with the color of the background, this will create a false "transparency" effect.
For this, use MSPaint or any other image editing software to gather the RGB code (if you're not dealing with bitmaps, I'd suggest to do this procedure from a screenshot).
After you have the proper RGB values, you need to "translate" this information into a proper HBRUSH. But to do so, you'll need a third variable (COLORREF) for conversions.

In the code snippet, add:

C++
case WM_CTLCOLORBTN:
    COLORREF colorref; //Creates our COLORREF value, with a very creative name
    break;

We'll later use CreateSolidBrush(), which receives a COLORREF argument, basically like representing RGB color through hex values. So now, we load the RGB value into the COLORREF.

C++
case WM_CTLCOLORBTN:
    COLORREF colorref; //Creates our COLORREF value, with a very creative name
    colorref = RGB(4,97,41); //This RGB value is dark green
    break;

Now, we need to call CreateSolidBrush() with an HBRUSH variable to store it.

C++
case WM_CTLCOLORBTN:
    COLORREF colorref; //Creates our COLORREF value, with a very creative name
    colorref = RGB(4,97,41); //This RGB value is dark green
    HBRUSH hBrushBtn;
    hBrushBtn = CreateSolidBrush(colorref);
    break;

And now, we have our HBRUSH with the color of our background. To implement it, we only need one extra line. One to return this brush to the buttons.

case WM_CTLCOLORBTN:
    COLORREF colorref; //Creates our COLORREF value, with a very creative name
    colorref = RGB(4,97,41); //This RGB value is dark green
    HBRUSH hBrushBtn;
    hBrushBtn = CreateSolidBrush(colorref);
    return ((LRESULT)hBrushBtn);
    break;

There you go! Compile your code and enjoy your buttons with a "transparent" background.

Points of Interest

  • The code doesn't show to be compatible with BS_OWNERDRAW style, unless properly coded.
  • This should work with other controls as well.
  • Remember to delete the objects when you're done, and a wise reader may note that most of the code can/should be done before the handling of the switch statement. (Thanks, DanielRomax)

Contact

Any questions/suggestions? E-mail me at ventus.ik@mail.com or comment on this tip.

License

This article, along with any associated source code and files, is licensed under A Public Domain dedication

Share

About the Author

Arthur Caputo
Brazil Brazil
No Biography provided

Comments and Discussions

 
BugYou're leaking resources Pin
DanielRomax15-Oct-14 5:47
MemberDanielRomax15-Oct-14 5:47 
GeneralRe: You're leaking resources Pin
Arthur Caputo15-Oct-14 5:51
MemberArthur Caputo15-Oct-14 5:51 

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

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