How to Make nice buttons ?

[justgreat]

Hello ALL,


I would like to change the buttons in my applications to make them look like nicer, any suggestions ?

For example, I want to make a button that has the image of an arrow Up and another one for arrow Down, cancel , open folder etc....I mean buttons with Icons/images.

If i use the graphical property of button and put the picture on it, I don't find it, so nice because the button is 3D !

I tried to use the image control, by doing something like :

By default : I Set BorderStyle and Appearance to 0.
On MouseMove    : I set BorderStyle to 1. 
On MouseDown    : I set both BorderStyle and Appearance to 1.
On MouseUp 	: I set them both back to 0.

That way , i got ride of the 3D appearance of the button, but
The result is that the border of the imagebox appear clicked , not the arrow itself, can we get an effect like if the arrow appears to be clicked and not the whole rectangle (Imagebox) ? If not is there a nicer effect I can make with imagecontrol ?

I am not a lot into graphics, so if you have suggestions or tutorials to make nice buttons please let me know


Thanks a lot in advance for your help

[baja_yu]

Create an image you want to use as a button, then load it into a borderless picturebox and use the pictburebox as a button.

To get the windows look and feel you can manifest your application to get the XP styles (using regular controls), but the upper method gives you more freedom.

EDIT: You can do pretty much anything with images. Here's a very old example where I illustrated how to create a custom tab control with images (attachment in post #14) http://www.vbforums.com/showthread.php?t=309279

EDIT2: In addition, you can create several version of the image like: normal, selected, pressed_down, and use MouseDown event for example to show it pressed down while you hold the mouse then switch back to normal (or to selected) on MouseUp (or Click).

[justgreat]

baja_yu, thanks a lot for your reply, I will check the code you did and will let you know if it's what i need.
Regarding the

Create an image you want to use as a button, then load it into a borderless picturebox and use the pictburebox as a button.

What is the difference using the picture box and an imagebox like i mentioned above ?

[baja_yu]

Not sure of all differences, but a Picturebox can act as a container for other controls while an Imagebox can't. Also Image has no device context (hDC) and when it comes to vertical ordering (ZOrder) it can only be placed over other such controls and not true windowed controls like a PictureBox. Picturebox also has some other properties you might find useful like BackColor, FillColor etc.

[justgreat]

baja_yu, thanks for the information, now i am checking your post you mentionned on the other thread.

Please can you tell me if i want to use the picturebox how to give it the effect of a clicked button ?
Because they way i mentioned above, is not really so nice

[Keithuk]

Please can you tell me if i want to use the picturebox how to give it the effect of a clicked button ?

You put a 3D picture in the Picturebox and when it clicked with the mouse you change the picture to a flat button in the MouseDown event and the 3D picture in the MouseUp event. Its called artistic imagery.

[justgreat]

Thanks baja_yu, I just checked your example it's nice but it needs to be talented in drawing i think
In the case of Tabs make them appear enabled and disabled you did this based on the color changing from black to grey, but the problem is that i have an arrow Up and an arrow Down, a Clear Icon etc...How can i give them an effect that they are pressed ? I can't make an arrow grey when not pressed and green when pressed, i don't think it's so nice looking...I prefere to keep it green all time, but to show that it was pushed down !
The problem is that when I am putting an arrow inside a picture box and doing as I said above, the effect is that all the rectangle is pressed, not the arrow area, so any Idea how to make it appears that only the arrow is pressed and not the whole rectangle (picture box)!
I am ready to use the method you used for the tabs, but any idea how can i distinguished between a pressed arrow and unpressed arrow, if i want to keep same color ?

Same question for buttons ...

[baja_yu]

You need to make several images for one button. One image that looks normal, and one that looks pressed. Lets called them imgPressed and imgNormal. By default the picturebox would should imgNormal, then on that picturebox's MouseDown event you would change the image to imgPressed, and change back to imgNormal on MouseUp.

[justgreat]

Thanks Keithuk, for the Ironic artistic imagery, which was repeating the Idea that I am trying since the first post i mentioned !


Thanks a lot baja_yu for your support, In fact I attached the Icons that i am talking about ! If I understand you, I can't simply use these Icons ? i must create more Icons to do what I want ? for example I make an icon with light blue and another one with darker blue to distinguish between disabled and enabled ?
Then I have to use something like the code you provided for TabControl ?

[baja_yu]

Exactly. Any effect you want to use, you will have to make/draw yourself first to be able to use it.

[gibra]

http://www.vbforums.com/showthread.p...34#post3722534

[Keithuk]

You put a 3D picture in the Picturebox and when it clicked with the mouse you change the picture to a flat button in the MouseDown event and the 3D picture in the MouseUp event. Its called artistic imagery.

You need to make several images for one button. One image that looks normal, and one that looks pressed. Lets called them imgPressed and imgNormal. By default the picturebox would should imgNormal, then on that picturebox's MouseDown event you would change the image to imgPressed, and change back to imgNormal on MouseUp.

I've already suggested that baja_yu but he isn't very artistic.

I'm sure he would be better of using the Command button then you wouldn't have to worry about tabs. I'm sure I have an app that uses all sorts of shaped Command buttons if he thinks the default one is bland.

[MarMan]

Here's another idea you can decide if it is useful or not. One way to simulate pressing a button with an image is to move the image in the MouseDown event down and right by a certain amount, like 3 pixels then in the MouseUp event move the image up and left the same amount.

[justgreat]

gibra, thanks for the link I will check it

I'm sure I have an app that uses all sorts of shaped Command buttons if he thinks the default one is bland.

What app your talking about? (any link to check ? )

you suggested to make 3D photos and use them ! I am bad i drawing 2d photos so imagine for 3d ones !

[justgreat]

Here's another idea you can decide if it is useful or not. One way to simulate pressing a button with an image is to move the image in the MouseDown event down and right by a certain amount, like 3 pixels then in the MouseUp event move the image up and left the same amount.

Why not, the advantage with your idea is that I will have to draw less which if good for me
Can I move only the image inside, to get the effect and not the whole picturebox to avoid taking more place in the screen ?
Also I would like to know how to avoid showing that all the rectangle is pressed(picture box), and that only the inside icon is pressed ?

[MarMan]

You can move just the image, I don't remember how to do it. Maybe someone else knows. Look into the BitBlt API.

[justgreat]

Thanks MarMan, I hope that someone will give me an answer about how to do so

[MarMan]

You're welcome. You may find the answer yourself, search for BitBlt.

[LaVolpe]

If the image is loaded into a hidden image control or VB stdPicture object, you can easily draw that image to a picturebox using VB's PaintPicture. Don't need BitBlt in this case; just another option.

Edited: To imitate pressed state, paint the picture just 1 pixel down and to the right. When unpressed paint it back at its normal position.

simple example, assuming your picture is in a hidden image control & picture1 scalemode is pixels

' not pressed:
Picture1.Cls
Picture1.PaintPicture Image1.Picture, 0, 0
' pressed:
Picture1.Cls
Picture1.PaintPicture Image1.Picture, 1, 1

Edited: Odds are that your picturebox will have AutoRedraw=True. If so, you will want to refresh the picturebox after all of your drawing is done.

[LaVolpe]

Note that by offsetting the drawing of the image, this means your picturebox must be 1 pixel taller/wider than the image, else it can be cutoff slightly when drawing in the pressed condition.

You can achieve a very similar effect by simply moving the picturebox.

' to simulate pressed

 ' if picbox container's (i.e., form) scalemode is pixels
Picture1.Move Picture1.Left + 1, Picture1.Top+1 
' if picbox container's scalemode is twips
Picture1.Move Picture1.Left + Screen.TwipsPerPixelX, Picture1.Top + Screen.TwipsPerPixelY

[justgreat]

Thanks a lot to all, I will read and check all you said and links you provided to see what method fits me more !

LaVolpe, as usual you rock, you have a solution for everything with code and example or a project, thanks a lot

[justgreat]

Please can anyone tell me how to avoid showing that the whole rectangle is pressed ? (the picture box) and make the effect that only the image that i have (arrow ...) is clicked ?

[LaVolpe]

That is a bit more complicated. One option is to use window regions to cut away the "transparent" area.
In this thread, I discussed a similar situation. However, that thread regarded forms, not controls. The same principle/code applies though. Except in that thread, SetLayeredWindowAttributes was discussed but is not applicable to controls. A link to a very fast shaping routine can be found in post #2 of that thread.

[justgreat]

That is a bit more complicated. One option is to use window regions to cut away the "transparent" area.
In this thread, I discussed a similar situation. However, that thread regarded forms, not controls. The same principle/code applies though. Except in that thread, SetLayeredWindowAttributes was discussed but is not applicable to controls. A link to a very fast shaping routine can be found in post #2 of that thread.

I didn't understand well, maybe because i didn't check the thread yet, i will try to check it , but reading what you say it seems it's not gonna be simple to do what i want

[LaVolpe]

Actually, if you read the posts in that thread, you will see Milk posted a simple example (use your picbox handle vs. the form handle as was done in the examples). As for easy, yes it is if you include the clsRegions class. Basically a 1-liner call to that class' RegionFromBitmap function will shape your picturebox for you. Do not use JPGs as your picture though. Read the entire thread.

[MarMan]

Did you try this?

' not pressed:
Picture1.Cls
Picture1.PaintPicture Image1.Picture, 0, 0
' pressed:
Picture1.Cls
Picture1.PaintPicture Image1.Picture, 1, 1

It requires an additional control that you would have to hide, but it sounds like your answer. It will avoid showing the picturebox. Unless I am misunderstanding you.

[LaVolpe]

@MarMan. I believe what the OP wants now is to make the picturebox control an irregualar shape, not a rectangle. The picbox should shape-shift to the image's shape.
@justgreat: Read post #25 also

[MarMan]

@LaVolpe OK, I don't know how to do that, I'll stay out of it for now

[LaVolpe]

A far easier option, but has limitations, is to use an image control and a transparent GIF.
You can move the image control during the press state.

Some limitations associated with real buttons
1) Can't draw on the image control, so adding/modifying text dynamically isn't really doable
2) Image controls have no tab stop or keyboard events
3) Image controls have no accelerator key ability

[justgreat]

Thanks lavolpe, i will read all you proposed!
In fact, I don't want the picture box to appear, because if i really want it to appear, than i can put my arrow in a command and use it as graphical and that's it, but i don't find it so nice an arrow, surrounded by a rectangle...anyway if i found it so complicated to do better, i will do this finally

[justgreat]

LaVolpe, in case it doesn't take lots of time and you have free time, can you please make me an example with the method that you said for 1 button the (arrow that i posted above ) ?
If you can't no problem, i understand you, but in case you can, i am thankfull !
Right now am still reading what you suggested me to read

[LaVolpe]

Sure, it'll be a bit though; got some other things to take care of at home. If you get to it before me, just update your thread so I know.

[baja_yu]

Not to beat a dead horse, but you can avoid all of this coding by making separate graphics with the effects you want. It's not that hard to do, plus software like Photoshop and others have plugins specifically made for creating button images so you can get those effects with a couple of clicks. I'm not a very good designer (when it comes to taste even though I generally know how to do it), that's why I always get a professional designer to do all the work, makes the final product look better.

[justgreat]

LaVolpe, no problem, but I think that in the link that provided Gibra about your project at pscode, you already did what I want with your custom controls, i have now to try to understand your code to be able to do what i want, because the button in which you use your Fox Icon, in case i can use it and use instead of the Fox the Arrow, i think that my problem will be solved, but I want to see how you do that, because your code is so big and lots of drawing that I don't know ...

[justgreat]

Not to beat a dead horse, but you can avoid all of this coding by making separate graphics with the effects you want. It's not that hard to do, plus software like Photoshop and others have plugins specifically made for creating button images so you can get those effects with a couple of clicks. I'm not a very good designer (when it comes to taste even though I generally know how to do it), that's why I always get a professional designer to do all the work, makes the final product look better.

Any free software to make easily buttons with effects ? other than Photoshop ?
the problem is also that trying to do these effects, is showing like the whole rectangle is clicked and not the arrow inside it ! If i want to show the whole rectangle clicked then why not to use directly a command button with an arrow picture as graphical on it ?

[LaVolpe]

1. Since your GIFs have transparency, I think using an image control is easier unless you need the "button" to be tabbed to and activated with the keyboard also.

2. Here's an example of what I suggested regarding shaping a window
a. In a new form, add a picturebox
-- Picturebox properties: AutoSize=True, BorderStyle=0
b. Add one of your arrows to that picturebox
c. Add the attached class to your project
-- I removed all unrelated code & functions from that class. See post #23 for link to full version class if wanted
d. Copy & paste this code

Private Sub Form_Load()
    Dim cRgn As New clsRegions
    Me.BackColor = vbYellow ' just to show the picturebox is indeed shaped
    cRgn.RegionFromBitmap Picture1.Picture.Handle, Picture1.hWnd
End Sub

Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
    Picture1.Move Picture1.Left + Screen.TwipsPerPixelX, Picture1.Top + Screen.TwipsPerPixelY
End Sub

Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
    Picture1.Move Picture1.Left - Screen.TwipsPerPixelX, Picture1.Top - Screen.TwipsPerPixelY
End Sub

Note that you should ensure whatever app you use to create the transparent GIF does not set the transparency color to a color already used in the GIF itself. Possible if the GIF doesn't use a full 256 color palette.

[baja_yu]

Check out this website http://cooltext.com/

You have the button styles below, it will take you to the next page which you can customize a lot of thing (button shape, file style, color, font, font size, button size, shadows, mouseover effects and so on). Here's an example normal and pressed button I created with it




EDIT: There's a nice offset setting where you can set X and Y offset for the button caption, but it's a combo box style so you can't type in the exact value and the lowest is 5px so it moves the text a lot. What you can do to compensate is generate a very large button with very large font and set the 5px offset (which won't look as much on a huge button) then resize the button down to the size you want (using Picasa or something else on your PC)

[justgreat]

1. Since your GIFs have transparency, I think using an image control is easier unless you need the "button" to be tabbed to and activated with the keyboard also.

2. Here's an example of what I suggested regarding shaping a window
a. In a new form, add a picturebox
-- Picturebox properties: AutoSize=True, BorderStyle=0
b. Add one of your arrows to that picturebox
c. Add the attached class to your project
-- I removed all unrelated code & functions from that class. See post #23 for link to full version class if wanted
d. Copy & paste this code

Private Sub Form_Load()
    Dim cRgn As New clsRegions
    Me.BackColor = vbYellow ' just to show the picturebox is indeed shaped
    cRgn.RegionFromBitmap Picture1.Picture.Handle, Picture1.hWnd
End Sub

Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
    Picture1.Move Picture1.Left + Screen.TwipsPerPixelX, Picture1.Top + Screen.TwipsPerPixelY
End Sub

Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
    Picture1.Move Picture1.Left - Screen.TwipsPerPixelX, Picture1.Top - Screen.TwipsPerPixelY
End Sub

Note that you should ensure whatever app you use to create the transparent GIF does not set the transparency color to a color already used in the GIF itself. Possible if the GIF doesn't use a full 256 color palette.

LaVolpe, once again many many thanks you rock, always getting solution !
I tried your code and it does the effect that i was looking for !
by the way in your code at pscode, it give a kind of nice purple Circle arround the image, here it doesn't !
By the way, I suggest that you try to make a kind of tutorial based on your class and publish it because it's very usefull to understand it to learn instead of just using it
Thanks again

[justgreat]

Check out this website http://cooltext.com/

You have the button styles below, it will take you to the next page which you can customize a lot of thing (button shape, file style, color, font, font size, button size, shadows, mouseover effects and so on). Here's an example normal and pressed button I created with it




EDIT: There's a nice offset setting where you can set X and Y offset for the button caption, but it's a combo box style so you can't type in the exact value and the lowest is 5px so it moves the text a lot. What you can do to compensate is generate a very large button with very large font and set the 5px offset (which won't look as much on a huge button) then resize the button down to the size you want (using Picasa or something else on your PC)

Thanks a lot to you too, the site you provided seems very nice, I will try your methode and the one of LaVolpe and check which one is nicer on my program interface and use it

Thanks to all for your support, I will work on that during the week end and come back to let you know what i did and check the thread as resolved!

Is it better to use bmp or gif ?

[baja_yu]

Gif will be much smaller but may not have all the colors in the palette. I usually stick with jpeg.