Steps to integrate code into your programs
This is an easy and flexible way to use bitmaps as buttons in your application, and here are the detail steps of how you can add the custom button to your application.
- Create a new MFC AppWizard (exe) based project and name it as BtnSample
- Select dialog based and click on Finish
- You will see the following dialog and click on OK button
- After some progress bars you will see the following project created for you.
- Now Add a button to the Dialog Application from the Control Toolbox
- Now Copy the GuiButton.h and GuiButton.cpp files from the attachment into your project location and Add the files to the workspace.
- Add a variable to the button using the class wizard and keep the variable type as
CButton
- Open BtnSampleDlg.h and change the variable type you have created in the above step from
CButtontoCGuiButtonand add theat the top of the file.Code: Cpp#include "GuiButton.h" - Now copy the bitmap you would like to use for your button and add import the bitmap resource into the project
- Finally add the following line in the OnInitDialog of your dialog in the file BtnSampleDlg.cpp. Remember to skip the About Dialog classes. Code: Cppm_btn.SetSkin(IDB_BITMAP1);
- If you have successfully done all the steps try compiling and runing the program and you should see
What is it in the code ...
This was all about running the program and integrating the GuiButton into your project but what is there in the GuiButton I will try to explain that as well.
First the SetSkin function.
Code: Cpp
/////////////////////////////////////////////////////////////////////////
/// <b>Function: SetSkin</b>
///
/// \param uiNormal (in) Normal Bitmap ID
///
/// \param uiDisabled (in) Disabled Bitmap ID
///
/// \param clrTextColor (in) Text Color where default color is white
///
/// \return void
///
/// \remarks Sets the skin to the button
///
/////////////////////////////////////////////////////////////////////////
void CGuiButton::SetSkin(UINT uiNormal, UINT uiDisabled, COLORREF clrTextColor)
{
TRACE(TEXT("CGuiButton::SetSkin\n"));
// --------------------------------------
// Free previous allocated bitmaps
// --------------------------------------
m_NormalBitmapDC.DeleteObject();
m_DisabledBitmapDC.DeleteObject();
// --------------------------------------
// Load bitmaps corresponding to states
// --------------------------------------
if (uiNormal>0)
m_NormalBitmapDC.LoadBitmap(uiNormal);
if (uiDisabled>0)
m_DisabledBitmapDC.LoadBitmap(uiDisabled);
m_TextColor = clrTextColor;
}
Now some of the overridden methods and what they do.
Code: Cpp
/////////////////////////////////////////////////////////////////////////
/// <b>Function: PreSubclassWindow</b>
///
/// \param NONE
///
/// \return void
///
/// \remarks PreSubclassWindow to make the button is Owner Draw.
///
/////////////////////////////////////////////////////////////////////////
void CGuiButton::PreSubclassWindow()
{
CButton::PreSubclassWindow();
// Modifying the style to OwnerDraw
ModifyStyle(0, BS_OWNERDRAW );
}
/////////////////////////////////////////////////////////////////////////
/// <b>Function: OnEraseBkgnd</b>
///
/// \param pDC (in\out)
///
/// \return BOOL
///
/// \remarks We do not want the base class to erase the background.
///
/////////////////////////////////////////////////////////////////////////
BOOL CGuiButton::OnEraseBkgnd(CDC* pDC)
{
// Do not erase background to be transparent
return true;
}
/////////////////////////////////////////////////////////////////////////
/// <b>Function: OnKillFocus</b>
///
/// \param pNewWnd (in)
///
/// \return void
///
/// \remarks Validates the button so that the Focus rect is removed
/// correctly
///
/////////////////////////////////////////////////////////////////////////
void CGuiButton::OnKillFocus(CWnd* pNewWnd)
{
this->Invalidate();
}
Now the main function DrawItem
Code: Cpp
/////////////////////////////////////////////////////////////////////////
/// <b>Function: DrawItem</b>
///
/// \param lpDrawItemStruct (in\out)
///
/// \return void
///
/// \remarks Draws the button in 3 steps
/// 1. Bitmap - Draws the loaded bitmap
/// 2. Text - Draws the button text
/// 3. Focus Rect - Draws the focus rect of the button
///
/////////////////////////////////////////////////////////////////////////
void CGuiButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
{
ASSERT (lpDrawItemStruct);
CDC btnDC ;
btnDC.Attach(lpDrawItemStruct->hDC); // get device context
CBitmap* pbitmapDC=NULL;
BITMAP bmpStruct;
CRect btnRect;
GetClientRect(&btnRect);
// --------------------------------------
// Draw the bitmap
// --------------------------------------
// Get the correct Bitmap
if(! IsWindowEnabled())
pbitmapDC=&m_DisabledBitmapDC;
else
pbitmapDC=&m_NormalBitmapDC;
// Select the bitmap into a Compatible DC
CDC *bmpDC = new CDC();
bmpDC->CreateCompatibleDC(&btnDC);
bmpDC->SelectObject(pbitmapDC);
if(pbitmapDC != NULL)
{
pbitmapDC->GetBitmap(&bmpStruct);
const int iDiff = 1;
// Draw the bitmap on the button leaving one pixel from each side of the button
btnDC.StretchBlt(iDiff, iDiff, btnRect.Width()-(2*iDiff), btnRect.Height()-(2*iDiff),bmpDC,0,0,bmpStruct.bmWidth,bmpStruct.bmHeight, SRCCOPY );
}
// --------------------------------------
// Draw the Text
// --------------------------------------
CString sCaption;
GetWindowText(sCaption); // get button text
int iLength = sCaption.GetLength();
CRect textRect;
textRect = lpDrawItemStruct->rcItem;
int oldMode = btnDC.SetBkMode(TRANSPARENT);
COLORREF oldColor = btnDC.SetTextColor(m_TextColor);
CSize sz;
sz = btnDC.GetTextExtent(sCaption);
BOOL bNoOfLines = FALSE;
UINT uiDrawTextFormat = DT_CENTER|DT_VCENTER|DT_SINGLELINE;
int iOffset = btnDC.DrawText(sCaption,textRect,uiDrawTextFormat);
// --------------------------------------
// Draw the Focus Rect
// --------------------------------------
if( (iLength) && (lpDrawItemStruct->itemState & ODS_FOCUS) )
{
CRect focusRect( btnRect );
focusRect.InflateRect(-1,-1,-1,-1);
btnDC.DrawFocusRect(&focusRect);
}
btnDC.SetTextColor(oldColor) ;
btnDC.SetBkMode(oldMode) ;
btnDC.Detach() ;
}
Quote:
Originally Posted by CommentDraws the button in 3 steps
1. Bitmap - Draws the loaded bitmap
2. Text - Draws the button text
3. Focus Rect - Draws the focus rect of the button
like this
