An easy way to create transparent button

• Download demo project - 91.1 Kb
• Download source - 2.4 Kb

Introduction

I wanted to draw a button which is transparent to its back ground image and hence had gone through several articles about button styles - transparent buttons. They were all very tedious tasks of making a button transparent - erase button back ground, draw picture etc. I found an easy method. The idea behind this is, draw a bitmap picture on the dialog box. Draw the same bitmap on the button from the location LeftTop of the button. Button is not visible like a button unless mouse cursor is moved on it. Therefore I'll add two icons on the button.

//I have implemented two important functions - 
//SetTransparent() and PaintBG(CDC *pDC, CRect rc)
//SetTranparent function loads bitmap from the resource and 
//creates an handle to CDC - m_hHdc. 

void CBut::SetTransparent()
{
    HBITMAP m_hBmp = ::LoadBitmap(::AfxGetInstanceHandle(), 
        MAKEINTRESOURCE(IDB_BITMAP6));
    m_hHdc = ::CreateCompatibleDC(NULL);
    ::SelectObject(m_hHdc, m_hBmp);
} 

//PaintBG fnction is called in DrawItem function which draws 
//bitmap on the button from the location left-top of the button.

void CBut::PaintBG(CDC *pDC, CRect rc)
{
    CRect rect;
    GetWindowRect(rect);
    GetParent()->ScreenToClient(rect);

    if(m_hHdc!=NULL)
        ::BitBlt(pDC->m_hDC, rc.left, rc.top, rect.Width(), 
            rect.Height(), m_hHdc, rect.left, rect.top, SRCCOPY);
}

How to use the source files

Draw bitmap on the dialog box in CPaint function of your CDialog derived class. Check the 'OwnerDraw' property of the button. Create a variable of type CButtonStyle in dialog class. Don't forget to include ButtonStyle.h file name in the same class.

void CButtonStyleDlg::OnPaint() 
{
    if (IsIconic())
    {
        CPaintDC dc(this); // device context for painting
        ....................
        ............
    }
    else
    {
        CPaintDC dc(this);
        CRect rect;
        GetClientRect(&rect);
        //ScreenToClient(rect);
        BITMAP bmp;
        HBITMAP hBmp = ::LoadBitmap(::AfxGetInstanceHandle(), 
            MAKEINTRESOURCE(IDB_BITMAP1));
        ::GetObject(hBmp, sizeof(bmp), &bmp);
        HDC hDC = ::CreateCompatibleDC(NULL);
        SelectObject(hDC, hBmp);

        //Note: Do not use StretchBlt function.
        ::BitBlt(dc.m_hDC, 0, 0, rect.Width(), rect.Height(), hDC, 0, 0, 
            SRCCOPY);
        CDialog::OnPaint();
    }
}

//Set button properties in OnInitDialog() function of CDialog derived class

BOOL CButtonStyleDlg::OnInitDialog()
{
    CDialog::OnInitDialog();
    .......................
    .........
    ..................

    // Set the icon for this dialog.  The framework does this automatically
    //  when the application's main window is not a dialog
    SetIcon(m_hIcon, TRUE);            // Set big icon
    SetIcon(m_hIcon, FALSE);        // Set small icon
    
    // TODO: Add extra initialization here
    m_btnButton1.SetTransparent();
    m_btnButton1.SetTextColor(RGB(0,220,0), RGB(0,255,0));
    m_btnButton1.SetIcons(IDI_ICON4, IDI_ICON4);
    m_btnButton1.FontStyle("MS Sans Serif");

    m_btnOK.SetTransparent();
    m_btnOK.SetTextColor(RGB(0,220, 0), RGB(0,255,0));
    m_btnOK.SetIcons(IDI_ICON2, IDI_ICON2);
    m_btnOK.FontStyle("MS Sans Serif");

    m_btnExit.SetTransparent();
    m_btnExit.SetTextColor(RGB(0,220,0), RGB(0,255,0));
    m_btnExit.SetIcons(IDI_ICON1, IDI_ICON1);
    m_btnExit.FontStyle("MS Sans Serif");

    m_btnClick.SetTransparent();
    m_btnClick.SetTextColor(RGB(0,220,0), RGB(0,255,0));
    m_btnClick.SetIcons(IDI_ICON3, IDI_ICON5);
    m_btnClick.FontStyle("MS Sans Serif");
    
    return TRUE;  // return TRUE  unless you set the focus to a control
}