how do I create a rounded button

[abdul]

Look at the attached image of a button. I want to create the same kind of button rounded button. The part that I am stuck on is how to draw different (3D) borders around the button. It's easy for a simple rectangle but I've no clue how to do that of anything other than a rectangle.
I am creating a custome button using a picture box. So any code given can use a picture box to draw stuff on it.

Any idea?

[abdul]

Here is an unzoomed view of the button.

[rjlohan]

Are you trying to make a new .OCX for this, or what?
Not really sure what you need here...

[abdul]

Yes, I'm trying to make a new OCX that supports different shapes for a command button

[rjlohan]

Well, I suggest that in the Click/MouseDown events you check the X/Y to see if it hits the button or not - that will enhance the effect of curves, etc.

But I'm still not really sure where your problem lies. The picture you had looks fine to me...

[Juba]

Try the attached button. I just flipped 180o on Photoshop and then pasted the label as it was originally.

Regards,
Juba

[abdul]

The thing is that the picture attached is not the button created by myself
I want to create the same button using MY code. The problem is drawing that rouned rectangle around the button. I don't need to work with any mouse interface for now, but I want to create a button that has a 3D border around that. If I create a rectangular button, there is an API called "DrawEdge" that I can use to draw 3D borders but it only works for rectangular buttons. If I have circular, triangular, or rounded button, how would I draw a 3D border? I need to draw some kind of lines of rectangles manually using white colour of the left and top sides edges of the button, and drawing the same kind of lines using gray or black colour on the bottom and right sides of the button. Hopefully, you get the problem now

[JaredM]

Just a suggestion, not that i know a lot about this kind of thing, but I remember someone making a odd shaped form by using API to drawn it like a polygon. They then created their shape using a jagged shaped polygon (with more than 3 points).

[AIS_DK]

Since I already did one of those, I'll help you a little bit.

Check the API call:

Private Declare Function CreateRoundRectRgn Lib "gdi32" (ByVal X1 As Long, ByVal Y1 As Long, ByVal X2 As Long, ByVal Y2 As Long, ByVal X3 As Long, ByVal Y3 As Long) As Long

It creates a rectangular rounded region, on which you draw a border with the call:
[Highlight=VB]
Private Declare Function FrameRgn Lib "gdi32" (ByVal hdc As Long, ByVal hRgn As Long, ByVal hBrush As Long, ByVal nWidth As Long, ByVal nHeight As Long) As Long
[Highlight=VB]

Last but not least, you change the standard retangular window region of your usercontrol to the newly created region by using:

Private Declare Function SetWindowRgn Lib "user32" (ByVal hWnd As Long, ByVal hRgn As Long, ByVal bRedraw As Long) As Long

For more information about using Regions, check either the platform SDK or msdn.microsoft.com

[abdul]

Originally posted by AIS_DK
Since I already did one of those, I'll help you a little bit.

Check the API call:

Private Declare Function CreateRoundRectRgn Lib "gdi32" (ByVal X1 As Long, ByVal Y1 As Long, ByVal X2 As Long, ByVal Y2 As Long, ByVal X3 As Long, ByVal Y3 As Long) As Long

It creates a rectangular rounded region, on which you draw a border with the call:
[Highlight=VB]
Private Declare Function FrameRgn Lib "gdi32" (ByVal hdc As Long, ByVal hRgn As Long, ByVal hBrush As Long, ByVal nWidth As Long, ByVal nHeight As Long) As Long
[Highlight=VB]
Last but not least, you change the standard retangular window region of your usercontrol to the newly created region by using:

Private Declare Function SetWindowRgn Lib "user32" (ByVal hWnd As Long, ByVal hRgn As Long, ByVal bRedraw As Long) As Long

For more information about using Regions, check either the platform SDK or msdn.microsoft.com

Thanks, but I was able to create a rounded region of a picture box. But if you look carefully, the picture boxbecomes totally flat because it cuts off its edges from all 4 sides. Now, how do I draw that 3D rounded border around the regioned picture?

[haravinth]

I don't have no idea how to make a round button in visual basic.

[abdul]

Originally posted by haravinth
I don't have no idea how to make a round button in visual basic.

Hi dude, you are interviewing with the teacher and I'm seeing this thread on your computer's screen
Caught you!

[abdul]

Anybody has any idea how to do that??

[Static]

Abdul..Ive done it..But I used an image. Since an image is clickable and can react to mousedown/up.

draw to pics. One on the button up...one down.

add an imagelist to your app.
put the up and down pics in.

on load...set the image to the up image of the list...

on mousedown..set it to the down pic..
on mouseup...return it to the original.

then use the click event to run the code.

works and looks good.


if you dont like that. Give a Yell to Kedaman. He has done something similar and may be able to help you.

[MrPolite]

I might be totally wrong , but can't you just use bitblt to mask your image and draw a rounded image?

[mlewis]

You can use that to Draw the button, but what is really needed is to draw the 3d border effects, not a premade picture.

[abdul]

Using different pictureboxes to create a rounded button is the easiest way, I think.
But how about the manual stuff like the button you see on this website:
www.vbthunder.com (rainbow button)

geoff_xrx:
Has Kedaman done that picture switching or the actual rounded button using API?

[Static]

Keda has created a shape that can be changed which has click events, mouseover and mouseoff events. its call the LCARS control. pretty cool. I am guessing it uses some similar API to what your needing. Drop him an email

[abdul]

I have sent a PM to Kedaman, and now I'm waiting for his answer

[TiPeRa]

I haven't read all the posts but you might like to try this. Just add a button to the form.

Private Declare Function CreateEllipticRgn Lib "gdi32" (ByVal X1 As Long, ByVal Y1 As Long, ByVal X2 As Long, ByVal Y2 As Long) As Long
Private Declare Function SetWindowRgn Lib "user32" (ByVal hWnd As Long, ByVal hRgn As Long, ByVal bRedraw As Boolean) As Long
Private Sub Command1_Click()
    Dim hRgn As Long
    Form1.BackColor = vbBlue
    hRgn = CreateEllipticRgn(0, 0, Command1.Width, Command1.Height)
    Call SetWindowRgn(Command1.hWnd, hRgn, True)
End Sub

I hope it helps :-) It will work on anything with a hWnd.

[Motoxpro]

go to www.planet-source-code.com and go to the contest page and it will be like a buttons thing or somethin and it shows you how

[Nucleus]

Here is a cheeky alternative:



A)bort, R)etry, I)nfluence with large hammer:

[Motoxpro]

you forgot the form

[Nucleus]

Amended the attachment to include the form

[abdul]

Originally posted by Nucleus
Amended the attachment to include the form

There is still no form

[abdul]

Originally posted by Motoxpro
go to www.planet-source-code.com and go to the contest page and it will be like a buttons thing or somethin and it shows you how

Can you please provide the actual link?

[abdul]

Originally posted by TiPeRa
I haven't read all the posts but you might like to try this. Just add a button to the form.

Private Declare Function CreateEllipticRgn Lib "gdi32" (ByVal X1 As Long, ByVal Y1 As Long, ByVal X2 As Long, ByVal Y2 As Long) As Long
Private Declare Function SetWindowRgn Lib "user32" (ByVal hWnd As Long, ByVal hRgn As Long, ByVal bRedraw As Boolean) As Long
Private Sub Command1_Click()
    Dim hRgn As Long
    Form1.BackColor = vbBlue
    hRgn = CreateEllipticRgn(0, 0, Command1.Width, Command1.Height)
    Call SetWindowRgn(Command1.hWnd, hRgn, True)
End Sub

I hope it helps :-) It will work on anything with a hWnd.

I can create the region (which is the first thing you do if you want to create a button other than rectangular one), but if notice, the button is all flat because creating a region cuts out all the edges so it takes off the 3D border around the button. Now, I want to create a rounded 3D border around the button. How would you go about doing that?

[DaoK]

Abdul here some link who you may will like to took a look.

PSP Link 1
PSP Link 2
PSP link 3

[DaoK]

Here is an other link who show you how to make VB button who look as XP button very nice interface.

http://www.planet-source-code.com/xq/ASP/txtCodeId.27437/lngWId.1/qx/vb/scripts/ShowCode.htm

[DaoK]

A perfect Round Button : PSP link 5


Hope all these links will help you.

[abdul]

Thanks a lot for link #2, that's exactly what I was looking for
I'll have to now study the code

[Arc]

Yo. Why don't you just create your buttons in Photoshop and use a imagebox to display them? Set all the pictures in a imagelist and call the picture for the mouse down and mouse up events.

You have to set a transparent label on top of the imagebox to allow the user to change caption ect...


This would be the best way to do it.

[DaoK]

He just wants to create his own control OCX are hard to make and can be a good project.

[abdul]

Originally posted by Arc
Yo. Why don't you just create your buttons in Photoshop and use a imagebox to display them? Set all the pictures in a imagelist and call the picture for the mouse down and mouse up events.

You have to set a transparent label on top of the imagebox to allow the user to change caption ect...


This would be the best way to do it.

Yes, but what if I wanted to do, let us say, gradiants on that button or some other effects?
That's why I want to leave the pictures out for this kind of effect.

[abdul]

Originally posted by DaoK
He just wants to create his own control OCX are hard to make and can be a good project.

Actually, this is a part of my big project - a messenger or chat program, in which I want to allow the user to use different skins and lots of other stuff

[mlewis]

btw, OCX's are very easy to make if you know what you are doing...(IMHO)

[abdul]

I was just looking for some code no matter in which form it was (OCX or just simple code). Now, I will create another OCX out of it that has some more features.

[DaoK]

You can make a really big OCX with a lots of feature and it can be hard, I have read the Tutorial on that website and I can not make everything than I have in my head about OCX but I do not worry because I hate adding OCX in my project