how do I create a rounded button

Printable View

Dec 4th, 2001, 11:17 PM
abdul

1 Attachment(s)

how do I create a rounded button

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?
Dec 4th, 2001, 11:17 PM
abdul

1 Attachment(s)

Here is an unzoomed view of the button.
Dec 4th, 2001, 11:20 PM
rjlohan

Are you trying to make a new .OCX for this, or what?
Not really sure what you need here...
Dec 4th, 2001, 11:25 PM
abdul

Yes, I'm trying to make a new OCX that supports different shapes for a command button:)
Dec 4th, 2001, 11:36 PM
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...
Dec 4th, 2001, 11:49 PM
Juba

1 Attachment(s)

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

Regards,
Juba :D
Dec 5th, 2001, 07:57 AM
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:)
Dec 5th, 2001, 08:14 AM
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).
Dec 5th, 2001, 08:22 AM
Since I already did one of those, I'll help you a little bit.

Check the API call:
VB Code:
```
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:
VB Code:
```
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
Dec 5th, 2001, 09:02 AM
abdul
Quote:
Originally posted by AIS_DK
Since I already did one of those, I'll help you a little bit.

Check the API call:

VB Code:

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:

VB Code:

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?
Dec 5th, 2001, 09:04 AM

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

:) :( :o :p ;) :D :cool: :rolleyes: :mad: :confused: :eek:
Dec 5th, 2001, 09:08 AM
abdul

Quote:

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

:) :( :o :p ;) :D :cool: :rolleyes: :mad: :confused: :eek:

Hi dude, you are interviewing with the teacher and I'm seeing this thread on your computer's screen:D
Caught you!;)
Dec 5th, 2001, 12:42 PM
abdul

Anybody has any idea how to do that??
Dec 5th, 2001, 12:53 PM
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.
Dec 5th, 2001, 12:55 PM
MrPolite

I might be totally wrong:D :D :D , but can't you just use bitblt to mask your image and draw a rounded image?
Dec 5th, 2001, 02:58 PM
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.
Dec 5th, 2001, 03:16 PM
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?
Dec 5th, 2001, 04:53 PM
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
Dec 5th, 2001, 05:18 PM
abdul

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

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

VB Code:

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.

Dec 5th, 2001, 05:32 PM
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
Dec 5th, 2001, 05:35 PM
Nucleus

Here is a cheeky alternative:

A)bort, R)etry, I)nfluence with large hammer: :D
Dec 5th, 2001, 05:43 PM
Motoxpro

you forgot the form :)
Dec 5th, 2001, 05:55 PM
Nucleus

Amended the attachment to include the form :o
Dec 5th, 2001, 08:05 PM
abdul

Quote:

Originally posted by Nucleus
Amended the attachment to include the form :o

There is still no form:confused:
Dec 5th, 2001, 08:05 PM
abdul

Quote:

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?
Dec 5th, 2001, 08:07 PM
abdul
Quote:
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.

VB Code:

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?
Dec 5th, 2001, 08:44 PM

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

PSP Link 1
PSP Link 2
PSP link 3
Dec 5th, 2001, 08:46 PM

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
Dec 5th, 2001, 08:48 PM

A perfect Round Button : PSP link 5

Hope all these links will help you.
Dec 5th, 2001, 09:20 PM
abdul

Brilliant search Doak!

Thanks a lot for link #2, that's exactly what I was looking for:)
I'll have to now study the code:rolleyes: ;)
Dec 5th, 2001, 09:33 PM
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.
Dec 5th, 2001, 09:34 PM

He just wants to create his own control :) OCX are hard to make and can be a good project.
Dec 5th, 2001, 09:35 PM
abdul

Quote:

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.
Dec 5th, 2001, 09:36 PM
abdul

Quote:

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:)
Dec 5th, 2001, 09:40 PM
mlewis

btw, OCX's are very easy to make if you know what you are doing...(IMHO)
Dec 5th, 2001, 09:41 PM
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.
Dec 5th, 2001, 09:43 PM

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 ;)