[MFC] Custom Button 만들기

이제 본격적으로 Custom Button 만드는 작업을 진행하겠습니다.

(본문 하단에 샘플 코드가 첨부되어 있습니다.)

먼저, 'MyButton'이라는 Dialog Base의 프로젝트를 생성하겠습니다.

그리고 GDI+를 사용하기 위해 아래 링크를 참고하여 설정을 추가합니다.

[GDI+] Part 1. GDI+ 준비 단계

'솔루션 탐색기'에서 프로젝트에 새로운 클래스를 생성합니다.

('프로젝트 우클릭 > Add > Class...' 를 선택하면 됩니다.)

다음과 같이 창이 생성되면 '추가(Add)' 버튼을 클릭합니다.

클래스에 이름을 지정합니다.

이번 프로젝트에서는 'CSkinButton'이라고 이름을 짓겠습니다.

'Finish' 버튼을 클릭하면 다음과 같이 'SkinButton.cpp/h' 파일이 추가됩니다.

앞으로 만들 SkinButton Class는 CButton을 상속받는 구조로 만들어야 하니, 'CSkinButton.h'에서 다음과 같이 수정합니다.

//SkinButton.h 
 class CSkinButton : public CButton 
{
 public: 
	CSkinButton(); 
	~CSkinButton(); 
}; 

그리고, 버튼의 배경 / 외곽선 / 텍스트의 색상과 텍스트의 크기를 설정하기 위한 함수도 정의합니다.

//SkinButton.h 
class CSkinButton : public CButton 
{
 public: 
	CSkinButton(); 
	~CSkinButton(); 
public : 
	void SetColorBackground(int a, int r, int g, int b); 
	void SetColorBorder(int a, int r, int g, int b); 
	void SetColorText(int a, int r, int g, int b); 
	void SetSizeText(float size); 
private : 
	Gdiplus::Color m_clrBackground; // 배경 색상. 
	Gdiplus::Color m_clrBorder; // 외곽선 색상. 
	Gdiplus::Color m_clrText; // 텍스트 색상. 
	float m_fSizeText; // 텍스트 크기. 
	CString m_strText; // 문자열. 
};

'SkinButton.cpp'에서는 다음과 같이 구현합니다.

자, 끝났습니다!

... 당황스럽죠?ㅎㅎ;

농담이구요. 이제 알맹이를 구현해 볼까요?

SkinButton Drawing 컨셉은 다음과 같습니다.

먼저 Background 영역을 그리고 Border를 그린 다음 Text를 그리면 끝입니다.

참고로, SetDlgItemText API를 이용한 문자열 설정은 사용하지 않습니다.

해당 API를 사용하다 보면 깜빡임 현상이 나타나 문제가 되기 때문입니다.

그래서 CString 멤버 변수를 통해 문자열을 설정하고 그리는 것입니다.

그리는 함수도 정의해 볼게요.

//SkinButton.h 
class CSkinButton : public CButton
{
public:
	CSkinButton();
	~CSkinButton();

public :
	void SetColorBackground(int a, int r, int g, int b);
	void SetColorBorder(int a, int r, int g, int b);
	void SetColorText(int a, int r, int g, int b);
	void SetSizeText(float size);

private :
	Gdiplus::Color m_clrBackground;
	Gdiplus::Color m_clrBorder;
	Gdiplus::Color m_clrText;
	float m_fSizeText;
	CString m_strText;

	void DrawBackground(Gdiplus::Graphics *pG); // 배경 그리기.
	void DrawBorder(Gdiplus::Graphics *pG); // 외곽선 그리기.
	void DrawText(Gdiplus::Graphics *pG); // 텍스트 그리기.
};

//SkinButton.cpp
void CSkinButton::DrawBackground(Graphics *pG)
{
	CRect rect;
	GetClientRect(&rect);

	Gdiplus::SolidBrush brush(m_clrBackground);

	pG->FillRectangle(&brush, rect.left, rect.top, rect.right, rect.bottom);
}

void CSkinButton::DrawBorder(Graphics *pG)
{
	CRect rect;
	GetClientRect(&rect);

	Gdiplus::Pen pen(m_clrBorder, 1);
	pG->DrawRectangle(&pen, rect.left, rect.top, rect.Width(), rect.Height());
}

void CSkinButton::DrawText(Graphics *pG)
{
	CRect rect;
	GetClientRect(&rect);

	Gdiplus::FontFamily fontfam(_T("Arial"));
	Gdiplus::Font font(&fontfam, m_fSizeText, Gdiplus::FontStyleRegular, Gdiplus::UnitPixel);

	Gdiplus::StringFormat stringAlign;
	stringAlign.SetAlignment(Gdiplus::StringAlignmentCenter);
	stringAlign.SetLineAlignment(Gdiplus::StringAlignmentCenter);

	Gdiplus::SolidBrush brush(m_clrText);

	pG->DrawString(m_strText, m_strText.GetLength(), &font, 
		Gdiplus::RectF((float)rect.left, (float)rect.top, (float)rect.Width(), (float)rect.Height()), &stringAlign, &brush);
}

여기까지 각 요소를 그리는 함수와 색상 및 크기를 정의하는 함수를 구현했는데요.

버튼 컨트롤을 '그리는 순간'은 언제일까요? 어디에서 그리는 함수를 사용하면 될까요?

그것은 바로 'OnPaint()'입니다.

OnPaint 함수는 컨트롤이 그려질 때 호출되는 이벤트 함수 입니다.

OnPaint 함수에 그냥 그리는 것이 아니라 더블 버퍼링(double buffering)을 적용하여 그려보겠습니다.

먼저 OnPaint() 함수를 추가해 볼까요?

단축키 'Ctrl+Shift+x' 또는 'Class Wizard'를 실행합니다.

'Class name: CSkinButton'을 선택하고, 'Messages'에서 'WM_PAINT'를 'Add Handler'를 클릭하여 추가합니다.

'OK'를 클릭하면 다음과 같이 코드가 추가됩니다.

void CSkinButton::OnPaint() 
{ 
	CPaintDC dc(this); // device context for painting 	
				 // TODO: Add your message handler code here 	
				 // Do not call CButton::OnPaint() for painting messages 
}

이제 OnPaint()를 아래 처럼 수정합니다.

//SkinButton.cpp 
void CSkinButton::OnPaint()
{
	CPaintDC dc(this);

	CRect rect;
	GetClientRect(&rect);

	Graphics mainG(dc.GetSafeHdc());

	Bitmap bmp(rect.Width(), rect.Height());

	Graphics memG(&bmp);

	SolidBrush brush(m_clrBackground);
	memG.FillRectangle(&brush, 0, 0, rect.Width(), rect.Height());

	DrawBackground(&memG);
	DrawBorder(&memG);
	DrawText(&memG);

	mainG.DrawImage(&bmp, 0, 0);
}

이제 SkinButton 구현은 끝났습니다.

Main Dialog에서 SkinButton을 적용해 볼까요? 아래의 코드를 SkinButton.h에 추가합니다.

//SkinButton.h 
#include "SkinButton.h"

그리고 CMyButtonDlg에 멤버 변수로 아래 코드를 추가합니다.

//MyButtonDlg.h
CSkinButton m_skinBtn;

리소스 편집기에서 Button Control을 추가합니다.

Button의 ID는 기본 값인 IDC_BUTTON1을 사용하겠습니다.

리소스 편집기에 추가한 버튼과 SkinButton 멤버 변수를 연동하기 위해 아래의 코드를 추가합니다.

//MyButtonDlg.cpp
void CMyButtonDlg::DoDataExchange(CDataExchange* pDX) 
{ 
	CDialogEx::DoDataExchange(pDX); 
	DDX_Control(pDX, IDC_BUTTON1, m_skinBtn); // 코드 추가. 
} 

이제 실행해 볼까요?

검은색만 나오죠? 왜그럴까요?

색상 변수를 정의는 했지만 초기화 또는 설정을 안했기 때문입니다.

CSkinButton() 생성자에 아래 코드처럼 초기 값을 입력합니다.

CSkinButton::CSkinButton()
{
	m_clrBackground = Gdiplus::Color(255, 64, 64, 64);
	m_clrBorder = Gdiplus::Color(255, 128, 128, 128);
	m_clrText = Gdiplus::Color(255, 255, 255, 255);
	m_strText = _T("Button");
	m_fSizeText = 15;
}

빌드 후 다시 실행하면 아래와 같이 동작합니다.

이제 색상 설정 함수와 글자 크기를 지정하여 마음대로 꾸밀 수 있습니다!

그런데 동작은 할까요?

리소스 편집기에서 버튼 컨트롤을 더블클릭 하고, 아래의 코드를 추가합니다.

//MyButtonDlg.cpp
void CMyButtonDlg::OnBnClickedButton1()	 
{ 
	AfxMessageBox(_T("SkinButton!")); 
}

그리고 다시 실행하고 버튼을 클릭하면 정상적으로 동작합니다.

여기까지 SkinButton 만드는 과정을 진행해 보았는데요. 사실 어려운 부분은 없습니다.

단지 추가해야 할 기능적인 부분이 많을 뿐이죠.

예를 들어, 버튼을 눌렸을 때 눌리는 효과라든가, 마우스가 버튼 위에 있을 때 다른 색상을 표현한다든가 등 말이죠.

본문 예제는 아래 샘플 코드를 다운로드하여 확인해보세요.

MyButton.zip