Click here to Skip to main content
15,896,500 members
Articles / Desktop Programming / MFC
Article

Transparant Image Button (BMP, GIF, JPG...)

Rate me:
Please Sign up or sign in to vote.
4.13/5 (26 votes)
31 Oct 20041 min read 287.4K   10.4K   87   27
Using transparant image button~!

Sample Image - CKbcButton.jpg

Introduction

*I'm not good at English, but if you can understand my story, isn't that enough? :)

When I made this application, especially as dialog based, a lot of buttons were used. Buttons are very important things in my situation. So I decided to make an Image button source.

As you know, there are many sources for image buttons. I think it's useless work making another image button. But those image buttons have a small problem.

intro - a small problem

In this image, button's background hides the parent's background. That's not what I want. So I am going to handle this problem.

Using the code

There are two ways using this button. First of all, include the following files to your project:

  • KbcBmp.h,
  • KbcBmp.cpp,
  • KbcButton.h,
  • KbcButton.cpp,
  • Picture.h,
  • Picture.cpp

Then, let's start~!

  1. Using DDX_Control
    1. Include "KbcButton.h" in header file.
    2. Declare a CKbcButton variable in header file.
    3. Go to dialog resource and draw a button. Check 'Onwer draw' style.
    4. Use DDX_Control like this in CPP file: DDX_Control(pDX, IDC_PLAYBUTTON, m_btnPlay);
    5. Then set button's image by calling SetButtonImage() function.
      // In your header file
      
      #include "KbcButton.h"
      
      class CTestButtonDlg : public CDialog
      {
      protected:
           CKbcButton  m_btnPlay;
      
          ...
          ...
      }
      
      // in you cpp file
      
      void CTestButtonDlg::DoDataExchange(CDataExchange* pDX)
      {
           CDialog::DoDataExchange(pDX);
           //{{AFX_DATA_MAP(CTestButtonDlg)
           DDX_Control(pDX, IDC_PLAYBUTTON, m_btnPlay);
           //}}AFX_DATA_MAP
      }
      
      
      BOOL CTestButtonDlg::OnInitDialog()
      {
           ...
           ...
      
           // set button image..
           m_btnPlay.SetButtonImage("play.bmp",RGB(255,255,255));
           m_btnPlay.SetToolTipText("Play~!");
           m_btnPlay.SetCursor(AfxGetApp()->LoadCursor(IDC_CURSOR1));
      
           ...
           ...
      }
  2. Using new operation
    1. Include "KbcButton.h" in header file.
    2. Declare a CKbcButton* variable in header file.
    3. Create CKbcButton instance by using new operator.
    4. Call Create() function.
    5. Then set button's image by calling SetButtonImage() function.
      // In your header file
      
      #include "KbcButton.h"
      
      class CTestButtonDlg : public CDialog
      {
      protected:
           CKbcButton*  m_pButton;
      
      
          ...
          ...
      
      // in you cpp file
      
      BOOL CTestButtonDlg::OnInitDialog()
      {
           ...
           ...
      
           // create button and set button image..
           CRect rtButton;
           CWnd* pWnd = GetDlgItem(IDC_STATIC_SHOW);
           pWnd->GetWindowRect(rtButton);
           ScreenToClient(rtButton);
           m_pButton = new CKbcButton;
           m_pButton->Create("CKbcButton", WS_CHILD|WS_VISIBLE|BS_OWNERDRAW, 
                                 rtButton, this, NEWBUTTON);
           m_pButton->SetButtonImage("show.gif",RGB(0,0,255));
      
           ...
           ...
      }

That's all. Isn't it simple?

Make sure that you set 'Owner draw style' to a button.

Thanks

Thanks to Dr. Yovav Gad (CPicture's author) and The Code Project. :) I learned a lot of things from this site.

History

  • Ver 1.0 (11/01/2004)
    • Used CPicture class supporting JPG, GIF...
    • Fixed cursor problem.

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


Written By
Web Developer
Korea (Republic of) Korea (Republic of)
student of Pohang University of Science and Technology.

Comments and Discussions

 
GeneralUnicode Pin
Sunny12702-Jan-11 4:43
Sunny12702-Jan-11 4:43 
Questiongif????????????? Pin
batsword8-Sep-10 15:41
batsword8-Sep-10 15:41 
GeneralToolTip does not appear Pin
MohamadElHajj27-Mar-09 7:19
MohamadElHajj27-Mar-09 7:19 
QuestionTransparancy doesn't work on CDHtmlDialog ? Pin
lambertwm10-Apr-08 21:10
lambertwm10-Apr-08 21:10 
Generaloh,very very good!!! Pin
wsb_82245-Jun-07 23:29
wsb_82245-Jun-07 23:29 
GeneralRe: oh,very very good!!! Pin
logi00116-Dec-09 0:29
logi00116-Dec-09 0:29 
GeneralRe: oh,very very good!!! Pin
batsword8-Sep-10 15:35
batsword8-Sep-10 15:35 
GeneralZqrTalent Pin
Zakaria Butskhrikdize20-Mar-07 8:19
Zakaria Butskhrikdize20-Mar-07 8:19 
Generala note when using VS2005 Pin
rincle29-May-06 23:44
rincle29-May-06 23:44 
QuestionHow to hide the white line on the button circle Pin
liaohaizhou11-Apr-06 19:00
liaohaizhou11-Apr-06 19:00 
AnswerRe: How to hide the white line on the button circle Pin
ywlee05212-May-06 8:41
ywlee05212-May-06 8:41 
Generalvery good ,but how to use Resource 'bmp Pin
xnetec13-Dec-05 5:38
xnetec13-Dec-05 5:38 
GeneralRe: very good ,but how to use Resource 'bmp Pin
vbachmut10-Feb-06 7:27
vbachmut10-Feb-06 7:27 
It actually pretty easy to make the class work with resources. While there are no corresponding functions in CKbcButton and CKbcBitmap, the class CPicture actually has all you need to open a resource bitmap. Open the CPicture class - you will see a function called Load. It is an overloaded function and the second version actually supports using resources directly. The instructions for opening a resource bitmap are also included.

If you have trouble getting it to work, do the following. First thing, go to Resources and open up the required bitmap as a custom type. If you are using .NET, create a new cutom resource of type BMP. When the blank resource is created, which will be given the name IDR_BMP1 and placed under the type "BMP", select File->Open and open up the bitmap file as a binary. Then select all the contents and copy them to the clipboard. Go back to your empty IDR_BMP1 resource and paste from the clipboard. Now the custom resource has all the data of the actual bitmap. Now create, in class CKbcBmp an overloaded version of the LoadBitmap function with the following code:

void CKbcBmp::LoadBitmap(UINT nResource)
{
m_picImg.Load(nResource, "BMP");

m_nWidth = m_picImg.m_Width;
m_nHeight = m_picImg.m_Height;
m_nSliceWidth = m_nWidth/4;
}

At last, in the class CKbcButton, create an overloaded version of the SetButtonImage function with the following header:

void CKbcButton::SetButtonImage(UINT nResource,UINT nMask)

Now copy all the contents from the original SetButtonImage function and change the first line from

m_bmpImage.LoadBitmap(strFileName);

to...

m_bmpImage.LoadBitmap(nResource);

Tada...you're done.

Now all you have to do to load a bitmap from a resource is to call the overloaded SetButtonImage function as follows:

MyButton.SetButtonImage(IDR_BMP1,RGB(255,255,255));

where IDR_BMP1 is the bitmap's resource ID and MyButton is a button of type CKbcButton.
GeneralVery good Pin
Fransiscusherry12-Oct-05 23:17
Fransiscusherry12-Oct-05 23:17 
GeneralRe: Very good Pin
ByeongChan Gwak15-Oct-05 20:13
ByeongChan Gwak15-Oct-05 20:13 
GeneralRe: Very good Pin
Fransiscusherry30-Oct-05 22:00
Fransiscusherry30-Oct-05 22:00 
GeneralNice, but half done Pin
Ali Rafiee18-Jul-05 10:07
Ali Rafiee18-Jul-05 10:07 
GeneralRe: Nice, but half done Pin
ByeongChan Gwak15-Oct-05 20:09
ByeongChan Gwak15-Oct-05 20:09 
GeneralRe: Nice, but half done Pin
Xia Xiongjun4-Sep-06 13:35
Xia Xiongjun4-Sep-06 13:35 
General"Unsupported operation" error Pin
Anarchi22-Apr-05 0:52
Anarchi22-Apr-05 0:52 
GeneralRe: "Unsupported operation" error Pin
Mohamed_Bakr21-May-06 23:21
Mohamed_Bakr21-May-06 23:21 
AnswerRe: "Unsupported operation" error Pin
DennisMattingly10-May-07 4:51
DennisMattingly10-May-07 4:51 
GeneralRe: "Unsupported operation" error Pin
Bharat Mallapur28-Nov-07 23:15
Bharat Mallapur28-Nov-07 23:15 
GeneralRe: "Unsupported operation" error Pin
DennisMattingly29-Nov-07 3:38
DennisMattingly29-Nov-07 3:38 
Generalit's miracle!! this is only thing to want. Pin
reinkorea31-Oct-04 14:08
reinkorea31-Oct-04 14:08 

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.