How to create Rounded Rectangle Buttons in MFC

Question

I need to create Rounded Rectangle Buttons in MFC. I tried several resources but did not found the correct way of explanation. Even in **Code Project ** I founded circular or elliptical buttons.

Please suggest how we can create Rounded Rectangle Buttons or any other article

Answer 1

My answers are...

1. Use Skin Library.

I usually use Codejock SkinFramework. That's ver easy. Include XTSkinFrameworkPro.h in your stdafx.h then load skin file before your dialog is invoked.

XTPSkinManager()->LoadSkin(_T("..."));

2-1. Draw by yourself.

Most simple one is here. Read it first.

https://vcpptips.wordpress.com/tag/owner-draw-button-control/

Then use this code for making round button. It would be nicer if you slide the label text 1px to right-bottom when they hit the button.

http://www.codeproject.com/Articles/11683/CRoundButton-A-fancy-graphical-button

2-2. Draw by yourself. (Use bitmap)

The other one is using bitmap button. Make a bitmap image of rounded button then set it to your button.

how to add bitmap image to buttons in MFC?

Exsample:

Save below as a SimpleBitmapButton.h and include it in your project.

#pragma once

#include <afxwin.h>

class CSimpleBitmapButton : public CButton
{
    DECLARE_DYNAMIC(CSimpleBitmapButton)

protected:

    enum EButtonState
    {
        NORMAL = 0,
        PUSHED = 1
    };

public:
    CSimpleBitmapButton();

    BOOL Open( int resource_id );
    virtual void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct);

protected:
    DECLARE_MESSAGE_MAP()
    afx_msg void OnLButtonDown(UINT nFlags, CPoint point);
    afx_msg void OnLButtonUp(UINT nFlags, CPoint point);
    afx_msg BOOL OnEraseBkgnd(CDC* pDC);

protected:
    int Width, Height;
    BOOL Pushed;
    CBitmap Bitmap;
};

Save below as a SimpleBitmapButton.cpp and include it in your project.

#include "stdafx.h"
#include "SimpleBitmapButton.h"

const int BUTTON_IMAGE_NUM = 2;

IMPLEMENT_DYNAMIC(CSimpleBitmapButton, CButton)

BEGIN_MESSAGE_MAP(CSimpleBitmapButton, CButton)
    ON_WM_LBUTTONDOWN()
    ON_WM_LBUTTONUP()
    ON_WM_CREATE()
END_MESSAGE_MAP()

CSimpleBitmapButton :: CSimpleBitmapButton()
{
    Pushed = FALSE;
    Width = 0;
    Height = 0;
}

void CSimpleBitmapButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct )
{
    CDC memDC;
    memDC.CreateCompatibleDC( NULL );
    CBitmap *oldBitmap = memDC.SelectObject( &Bitmap );

    if( Pushed == FALSE )
        BitBlt( lpDrawItemStruct->hDC, 0, 0, Width, Height, memDC, 0, 0, SRCCOPY );
    else
        BitBlt( lpDrawItemStruct->hDC, 0, 0, Width, Height, memDC, Width , 0, SRCCOPY );

    memDC.SelectObject( oldBitmap );
}

BOOL CSimpleBitmapButton :: Open( int resource_id )
{
    Pushed = FALSE;

    Bitmap.LoadBitmap( resource_id );

    //adjust the button size
    BITMAP bm;
    Bitmap.GetObject(sizeof(BITMAP),&bm);
    Width = bm.bmWidth / BUTTON_IMAGE_NUM;
    Height = bm.bmHeight;

    RECT rect;
    GetWindowRect( &rect );
    GetParent()->ScreenToClient( &rect );

    rect.right = rect.left + Width;
    rect.bottom = rect.top + Height;
    MoveWindow( &rect );

    return TRUE;
}

void CSimpleBitmapButton::OnLButtonDown(UINT nFlags, CPoint point)
{
    Pushed = TRUE;
    Invalidate( FALSE );

    CButton::OnLButtonDown(nFlags, point);
}


void CSimpleBitmapButton::OnLButtonUp(UINT nFlags, CPoint point)
{
    Pushed = FALSE;
    Invalidate( FALSE );

    CButton::OnLButtonUp(nFlags, point);
}

Import this bitmap to resource.

Then set IDB_ROUND_BUTTON for resource ID.

Add button on your dialog and set the "Owner Darw" proerty to True. Important!

Add member variables of the button as m_PlayButton.

At the dialog header, include SimpleBitmapButton.h and change the class of m_PlayButton from CButton to CSimpleBitmapButton.

CSimpleBitmapButton m_Button;  // it was CButton m_Button;

At the last, set the bitmap on OnInitDialog()

m_PlayButton.Open( IDB_ROUND_BUTTON );