Round Edge Button

Question

3.88/5 (6 votes)

See more:

C++

MFC

Hello,

I do want to draw round edged button with gradient in back ground

Can anyone help me out?

Posted 2-Mar-10 1:00am

AJ83

Add a Solution

Comments

ManjIndian 9-Oct-12 9:43am

this one is also a single line question.... but seniors will answer for this... not for mine.. what a funny...................

20 solutions

Solution 28

Eugen, I have done according to you. but i am still getting "Debug Assertion Failed".

Do I have to include "OnDrawItem()"?

Posted 2-Mar-10 18:38pm

AJ83

Solution 29

Please observe the this at the assertion
(right click -> QuickWatch -> type "this") -
what class name is shown there ? :)

Posted 2-Mar-10 19:31pm

Eugen Podsypalnikov

Updated 2-Mar-10 19:32pm

v2

Solution 30

Eugen, Now "Debug Assertion Failed" is solved. I used "DrawItem()" because Owner Draw is TRUE.

But I am not getting Round Edged Button after applying your suggested code.

What to do next?

Posted 2-Mar-10 19:35pm

AJ83

Solution 32

Here would be a "replacement" for CDrawManager::DrawGradient(..):

void _FillGradient(CDC* pDC,
                        CRect rect,
                        COLORREF colorStart,
                        COLORREF colorFinish,
                        BOOL bHorz/* = TRUE*/,
                        int nStartFlatPercentage/* = 0*/,
                        int nEndFlatPercentage/* = 0*/)
{
	if (colorStart == colorFinish)
	{
		CBrush br(colorStart);
		pDC->FillRect(rect, &br);
		return;
	}
	if (nStartFlatPercentage > 0)
	{
		ASSERT(nStartFlatPercentage <= 100);
		if (bHorz)
		{
			CRect rectTop = rect;
			rectTop.bottom = rectTop.top + rectTop.Height() * nStartFlatPercentage / 100;
			rect.top = rectTop.bottom;
			CBrush br(colorFinish);
			pDC->FillRect(rectTop, &br);
		}
		else
		{
			CRect rectLeft = rect;
			rectLeft.right = rectLeft.left + rectLeft.Width() * nStartFlatPercentage / 100;
			rect.left = rectLeft.right;
			CBrush br(colorStart);
			pDC->FillRect(rectLeft, &br);
		}
	}
	if (nEndFlatPercentage > 0)
	{
		ASSERT(nEndFlatPercentage <= 100);
		if (bHorz)
		{
			CRect rectBottom = rect;
			rectBottom.top = rectBottom.bottom - rectBottom.Height() * nEndFlatPercentage / 100;
			rect.bottom = rectBottom.top;
			CBrush br(colorStart);
			pDC->FillRect(rectBottom, &br);
		}
		else
		{
			CRect rectRight = rect;
			rectRight.left = rectRight.right - rectRight.Width() * nEndFlatPercentage / 100;
			rect.right = rectRight.left;
			CBrush br(colorFinish);
			pDC->FillRect(rectRight, &br);
		}
	}
	if (nEndFlatPercentage + nStartFlatPercentage > 100)
	{
		ASSERT(FALSE);
		return;
	}
	// this will make 2^6 = 64 fountain steps
	int nShift = 6;
	int nSteps = 1 << nShift;
	for (int i = 0; i < nSteps; i++)
	{
		// do a little alpha blending
		BYTE bR = (BYTE)((GetRValue(colorStart) *(nSteps - i) + GetRValue(colorFinish) * i) >> nShift);
		BYTE bG = (BYTE)((GetGValue(colorStart) *(nSteps - i) + GetGValue(colorFinish) * i) >> nShift);
		BYTE bB = (BYTE)((GetBValue(colorStart) *(nSteps - i) + GetBValue(colorFinish) * i) >> nShift);
		CBrush br(RGB(bR, bG, bB));
		// then paint with the resulting color
		CRect r2 = rect;
		if (bHorz)
		{
			r2.bottom = rect.bottom - ((i * rect.Height()) >> nShift);
			r2.top = rect.bottom - (((i + 1) * rect.Height()) >> nShift);
			if (r2.Height() > 0)
				pDC->FillRect(r2, &br);
		}
		else
		{
			r2.left = rect.left + ((i * rect.Width()) >> nShift);
			r2.right = rect.left + (((i + 1) * rect.Width()) >> nShift);
			if (r2.Width() > 0)
				pDC->FillRect(r2, &br);
		}
	}
}

Posted 2-Mar-10 19:42pm

Eugen Podsypalnikov

Updated 2-Mar-10 19:45pm

v2

Solution 33

Thank you so much Eugen.

One more question on this, how to draw white border line on this Round Edged Button?

Posted 2-Mar-10 19:46pm

AJ83

Solution 34

You could draw at three steps :) :
- CDC::RoundRect(..) at the itemRect

- Decrement the itemRect
- The rest (SelectClipRgn(..) and so on)

Posted 2-Mar-10 20:01pm

Eugen Podsypalnikov

Solution 35

If I m doing so. I am lossing my filled gradient.
One thing i do want to let u know that i havn't used "FillGradient" method. I used for loop for fill gradient. and it is working perfectly.

What how to draw white border line? I am loosing all information of Gradient if I am using RoundRect().

Posted 2-Mar-10 20:08pm

AJ83

Solution 36

Try it :)

void CMyButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
{
  CDC* pDC = CDC::FromHandle(lpDrawItemStruct->hDC);
  CRgn cRgn1;
  cRgn1.CreateRoundRectRgn(0,
                          0,
                          lpDrawItemStruct->rcItem.right,
                          lpDrawItemStruct->rcItem.bottom,
                          50,
                          50);
  pDC->SelectClipRgn(&cRgn1);
  pDC->FillSolidRect(&lpDrawItemStruct->rcItem, RGB(255, 255, 255));
  CRgn cRgn2;
  cRgn2.CreateRoundRectRgn(2,
                          2,
                          lpDrawItemStruct->rcItem.right -2,
                          lpDrawItemStruct->rcItem.bottom -2,
                          50,
                          50);
  pDC->SelectClipRgn(&cRgn2);
...

Posted 2-Mar-10 20:30pm

Eugen Podsypalnikov

Solution 37

not working. It is filling over all area with white and giving "DEbug Assertion Failed" for next Rgn.

Any other idea?

Posted 2-Mar-10 20:40pm

AJ83

Solution 38

Try it :)

void CMyButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
{
  CDC* pDC = CDC::FromHandle(lpDrawItemStruct->hDC);
  pDC->RoundRect(0,
                 0,
                 lpDrawItemStruct->rcItem.right,
                 lpDrawItemStruct->rcItem.bottom,
                 50,
                 50);
  CRgn cRgn2;
  cRgn2.CreateRoundRectRgn(2,
                          2,
                          lpDrawItemStruct->rcItem.right -1,
                          lpDrawItemStruct->rcItem.bottom -1,
                          50,
                          50);
  pDC->SelectClipRgn(&cRgn2);
...

Posted 2-Mar-10 20:48pm

Eugen Podsypalnikov

Solution 39

It is working fine. I am getting two border. Now whre to place code for getting white color between two border?

Posted 2-Mar-10 20:59pm

AJ83

Solution 40

It is working by me :) :

void CMyButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
{
  CDC* pDC = CDC::FromHandle(lpDrawItemStruct->hDC);
  pDC->RoundRect(0,
                 0,
                 lpDrawItemStruct->rcItem.right,
                 lpDrawItemStruct->rcItem.bottom,
                 50,
                 50);
  CRgn cRgn1;
  cRgn1.CreateRoundRectRgn(1,
                          1,
                          lpDrawItemStruct->rcItem.right,
                          lpDrawItemStruct->rcItem.bottom,
                          50,
                          50);
  pDC->SelectClipRgn(&cRgn1);
  pDC->FillSolidRect(&lpDrawItemStruct->rcItem, 0x00FFFFFF);
  CRgn cRgn2;
  cRgn2.CreateRoundRectRgn(2,
                          2,
                          lpDrawItemStruct->rcItem.right -1,
                          lpDrawItemStruct->rcItem.bottom -1,
                          50,
                          50);
  pDC->SelectClipRgn(&cRgn2);
...

P.S. For the "fine working"
you could implement the drawing with GDI+ functions :)

Posted 2-Mar-10 21:14pm

Eugen Podsypalnikov

Solution 43

Thanks again....

And again one more question: Do we have to set font in Drawitem() only?
Or in someother function.

I tried in DrawItem(), but did not get good result.

Any suggestion?

Posted 2-Mar-10 23:06pm

AJ83

Solution 44

Of course, before you are drawing the text :)

CFont m_cFont could be created in CMyButton::PreSubclassWindow()

and then - used in CMyButton::OnDrawItem():

{
...
   CGdiObject* pcOldFont = pDC->SelectObject(&m_cFont);
   pcDC->DrawText(..);
   pDC->SelectObject(pcOldFont);
...
}

Posted 2-Mar-10 23:17pm

Eugen Podsypalnikov

Solution 45

Control is not coming in "OnDrawItem()".

here's my code:

void CRoundColoredButton::PreSubclassWindow()
{
	// TODO: Add your specialized code here and/or call the base class
	CButton::PreSubclassWindow();
	CRect cRect;
	GetWindowRect(cRect);
	m_cRgn.CreateRoundRectRgn(0, 0, cRect.Width(), cRect.Height(), 100, 100);
	SetWindowRgn(m_cRgn, TRUE);
	m_cFont.CreatePointFont(5, "Arial Black");
}

void CRoundColoredButton::OnDrawItem(int nIDCtl, LPDRAWITEMSTRUCT lpDrawItemStruct)
{
	// TODO: Add your message handler code here and/or call default
	CString strText;
	GetWindowText(strText);
	CButton::OnDrawItem(nIDCtl, lpDrawItemStruct);
	CDC* pDC = new CDC();
	CGdiObject* pOldFont = pDC->SelectObject(&m_cFont);
	pDC->DrawText(strText, &lpDrawItemStruct->rcItem, DT_SINGLELINE|DT_VCENTER|DT_CENTER);
	pDC->SelectObject(pOldFont);
}

Posted 2-Mar-10 23:34pm

AJ83

Solution 47

Thanks....

How to make Text align in bottom but in center?

I am trying this:

pDC->DrawText(strText, &lpDrawItemStruct->rcItem, DT_SINGLELINE|DT_VCENTER|DT_CENTER|DT_BOTTOM);

But text is going at top. I have also tried different combinations. but did not get thru. And i do want with Multiline property true.

Any Suggestion?

Posted 3-Mar-10 0:19am

AJ83

Updated 3-Mar-10 0:26am

v2

Solution 48

You should remove the DT_VCENTER flag :)

Posted 3-Mar-10 0:30am

Eugen Podsypalnikov

Solution 49

I did this already. I do want Button name say "Computer Data". But this is coming very close to bottom border and name is not looking good.

I do want little bit up from bottom border so that it will look good in appearance.

Try with this Font:

MIDL

m_ptrFont  = new CFont();
m_ptrFont->CreateFont(16, 0, 0, 0, FW_BOLD, FALSE, FALSE, 0, ANSI_CHARSET, OUT_DEFAULT_PRECIS, CLIP_DEFAULT_PRECIS,
                                            DEFAULT_QUALITY, DEFAULT_PITCH | FF_SWISS, "Arial");

And i also want Multiline property TRUE.

Posted 3-Mar-10 0:38am

AJ83

Solution 50

You could change the rectangle of the text instead,
for example - offset it down :)

Use the description[^] and the flag DT_WORDBREAK
to process a multiline output :)

Posted 3-Mar-10 0:48am

Eugen Podsypalnikov

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Eugen Podsypalnikov · Accepted Answer · 2010-03-02T22:37:00

Solution 42

Please implement the same function of CMyButton :) :

C++

BOOL CMyButton::OnEraseBkgnd(CDC* pDC)
{
  return true;
}

Posted 2-Mar-10 22:37pm

Eugen Podsypalnikov

v2