How to Make nice buttons ?

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 :

Code:

---

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

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

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

Quote:

---

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 ?

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.

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

Quote:

---

Originally Posted by justgreat

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

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 ...

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.

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 ?

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

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

:wave:

Quote:

---

Originally Posted by 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. ;)

---

Quote:

---

Originally Posted by 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.

---

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

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.

gibra, thanks for the link I will check it

Quote:

---

Originally Posted by Keithuk

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 :p !

Quote:

---

Originally Posted by 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.

---

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 ?

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

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

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

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

Code:

---

' 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.

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.

Code:

---

' 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

---

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

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 ?

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.

Quote:

---

Originally Posted by 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.

---

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 :(

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.

Did you try this?

Quote:

---

Originally Posted by LaVolpe

Code:

---

' 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.

@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

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

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

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

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

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.

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.

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 ...

Quote:

---

Originally Posted by 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.

---

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 ?

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

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.

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

http://apollo.cooltext.com/rendered/...t477710406.png
http://apollo.cooltext.com/rendered/...6MouseOver.png

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)

Quote:

---

Originally Posted by 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

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

Quote:

---

Originally Posted by 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

http://www.vbforums.com/
http://www.vbforums.com/

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 ?

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

Quote:

---

Originally Posted by baja_yu

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

---

With jpeg I can set a transparent background ? and that the vb recognise it ?

Just FYI. Never use JPGs with that window shaper class. In most cases, JPGs will not preserve your "transparency" color througout the image. The reason is that JPG does not use a lossless compression algorithm. Bitmaps & GIFs are ok, bitmaps preferred. Also, regarding size. JPGs in most cases only save size when added to your project's picture properties or resource file or saved to file. When all is said and done, the JPG is converted to bitmap for window's use when it is displayed.

I am continuing read all you provided and making some tests, here is what i noted till now :


The class of LaVolpe in post #36 work well, thanks a lot it was very helpfull and does what i need.


The suggestions of using a picture box provided by MarMan, LaVolpe and baja_yu
at posts #13 #19 #20 #33 #37

Seems to work well with less code, but i noticed some weird things , I don't know if any of you has an explication :

Using the same Photo.gif picture :


1st, I tried the

vb Code:

Picture1.PaintPicture Image1.Picture, 1, 1

, it gave white background arround the arrow which not nice at all !

2nd, I tried with an image controls all to do the following and worked well

vb Code:

Image2.Move Image2.Left + Screen.TwipsPerPixelX, Image2.Top + Screen.TwipsPerPixelY

3rd, I tried it with picturebox, with same Photo.gif, it showed me a white background arround the arrow !!

4th, I set FontTransparent property to False, suddenly the white background went and become transparent and got same effect as ImageBox, so I said it's coming from this property ! I put it again to true, then i noticed that the background didn't go back to white and stayed transparent !Thus it's not this property that caused the white background

5th, I tried to add more picture boxes to make tests and the white background never appeared again !

6th, I tried again the

vb Code:

Picture1.PaintPicture Image1.Picture, 1, 1

, and it always give white background !

LaVolpe, Please Can you explain me this note ? Should i put on autoredraw or not ? am confused !

Quote:

---

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.

---

by the way, if the class LaVolpe works well is it better to use it than the effect used by dealing with mouse move ?


Now i am reading the thread http://www.vbforums.com/showthread.php?t=553612 to see at the end what to use exactly.

I will keep you informed if I noticed more things

Quote:

---

Originally Posted by LaVolpe

Just FYI. Never use JPGs with that window shaper class. In most cases, JPGs will not preserve your "transparency" color througout the image. The reason is that JPG does not use a lossless compression algorithm. Bitmaps & GIFs are ok, bitmaps preferred. Also, regarding size. JPGs in most cases only save size when added to your project's picture properties or resource file or saved to file. When all is said and done, the JPG is converted to bitmap for window's use when it is displayed.

---

Can we have transparent background with bitmap ? i thought it's only doable with .gif and .png that's why i was trying to use .gif cuz vb doesn't recongnise png :(

Quote:

---

Originally Posted by LaVolpe

Just FYI. Never use JPGs with that window shaper class. In most cases, JPGs will not preserve your "transparency" color througout the image. The reason is that JPG does not use a lossless compression algorithm. Bitmaps & GIFs are ok, bitmaps preferred. Also, regarding size. JPGs in most cases only save size when added to your project's picture properties or resource file or saved to file. When all is said and done, the JPG is converted to bitmap for window's use when it is displayed.

---

Didn't know that. I mostly add them to the picture property when building GUI elements, and I'm aware of the lossless compression but I can set the quality to that is still acceptable without any noticeable degradation. As it packs it in the frx and compiles them to the exe I use them to save on final file size.

@baja_yu. Higher JPG quality is definitely a player, but higher quality results in larger file size; a trade-off. As a rule, I always recommend against converting to JPG if color values are very important.

@justgreat. Yes you can have transparency with a bitmap, however, VB on its own will never display the bitmap with transparency. Besides png & gif, other common formats use transparency too: ico, cur, tga, tif
Edited: Just so there is no confusion. When I used "transparency color" in my previous reply, I was refering to whatever color should be made transparent throughout the image.

LaVolpe, thanks, but if in vb he can see transparency of bmp i think it's better for my case to use .gif
Right ?


Anyone has an idea about the weird thing i noted above #43 when making my tests ?

Don't know what Photo.Gif is. I don't see it anywhere.

Regarding your question. Gif is far easier if you are using a image control. I mentioned some of the drawbacks of using a image control in post #29. I don't know what method(s) you are currently decided upon.

Photo.Gif i mean with it the photo of the red button ! But also got the same with the arrow pic

As for the method, yesterday i slept, so today i will read the second thread http://www.vbforums.com/showthread.php?t=553612 to see what you said in it and decide what to use, but for what was said in this current thread I tried all yesterday :)
I will make some tries, and If using the mouse move events will give same result i will use it and if not i will use ur class, but in both cases i will try to study your class to learn because it's really perfect, very good job

Ok, I see what you are talking about. PaintPicture is not ideal for transparent GIFs. If you want to learn more, see "stdPicture Render Usage" linked in my signature below.

To summarize. PaintPicture is taking the bitmap representation of the GIF. The GIF is a bitmap as far as windows is concerned. You'd get the same result if you tried to use BitBlt/SetDIBits. When VB displays the GIF in a picturebox/image control, it is performing a masking operation on the DC to create transparency; PaintPicture does not do that. The .Picture.Render method will do that. In post #43 you mentioned you got the GIF to render with transparency by using PaintPicture; a fluke maybe, does the picturebox backcolor/forecolor have anything to do with it? I don't know, but rendering it properly with PaintPicture would be unexpected IMO.

Thanks LaVolpe for explication.
I read the other thread, the problem is that there are lots of notions that i don't know so it's gonna take me time to understand , do you have any link for a tutorial about all these notions ?
I am not new to VB, i work on vb since 99, but I never focused on the graphical issue that's why I have no clue about graphics. By the way, your article about render is very usefull.


I will either use your class (without understanding it for the moment), or I will use the other suggestion of making effects with mouse move.

but i have a question please ! TO add a caption to the button what is best to do ? adding a label inside the picture box ? if yes, should I repeat also in the label mouse move event, the same code as the one i put for the button to make sure that even if the mouse is over the caption the button is pressed ?

A label is the easiest. Just forward the mouse events for the label to the picturebox

Code:

---

Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
  ' move the picbox down 1 by 1
End Sub

Private Sub Label1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
    Call Picture1_MouseDown(Button, Shift, X, Y)
End Sub

---

Note that the X,Y coords will be off because they are in relation to the label, not the picturebox. If they are important, you'll have to offset them...

Code:

---

Call Picture1_MouseDown(Button, Shift, X + Label1.Left, Y + Label1.Top)

---

Edited: Another easy option is to simply print the text. If done, ensure AutoRedraw=True for the picturebox

Code:

---

Picture1.CurrentX = 10 * Screen.TwipsPerPixelX ' if picbox scalemode is twips
Picture1.CurrentY = 70 * Screen.TwipsPerPixelY
Picture1.ForeColor = vbBlue
Picture1.Print "My Caption"

---

Thanks a lot LaVolpe, Once again you give clear and nice answers, I will try all you told me.

If i want to understand your class, what should i start looking for ? any tutorial or basic things that i should learn to be able to understand the nice class you provided, because I hope to understand it and not only to use it

A pixel in general terms is a rectangle on the screen, a small rectangle but still a rectangle (generally speaking). If you were to magnify an image 100x that uses a different color for each pixel, you should be able to clearly see the pixels as individual squares. This is the basis of the class.

The class builds rectangles that exclude "transparent" areas and only include the desired pixels. That's it in simple terms. Window's (O/S) requires its rectangles/squares to be the same size vertically for each row of rectangles. This means all rectangles on any single row must be the same height; can be different widths, but must be same height. The height of rectangles between different rows can be different sizes. Visualize the letter H. From top to bottom, each row of pixels have 2 pixels except the middle row which has pixels all the way across. Now imagine each pixel as a rectangle and the middle row as 1 long rectangle and you've got the general idea. The class simply creates rectangles only from the pixels in the picture that do not equal the pixel color that should be treated as transparent. The class picks the top left corner as the transparent color unless a color is passed explicitly.

When you apply a region to a window, the O/S cuts out the area not included in the region; thereby shaping the window. This is a nice way to shape windows but has limitations, mostly jaggies. You cannot create a smooth curve, circle, or diagonal with regions. Actually some diagonals can be rather smooth, but most will not be. By the way, regions apply to other things to, namely clip regions applied to an hDC to restrict drawing to a specific region of the DC.

You can see how this applies to your GIFs. The arrows will look nearly perfect, the pill button, not so much. Until Win2K came around, this was the best we could get. Now we have layered windows with alphablended edges, but they don't apply to controls, just to main-level windows.

Here's some reading/playing for you when you find the time. A project I designed that uses regions to locate a path between two points. Kind of similar to A* path finding algorithm
http://www.planet-source-code.com/vb...61062&lngWId=1

Thanks a lot LaVolpe, I will read all you said, but want to inform you that the code you provided didn't give any effect, am i missing something ? I put a picture box with autoredraw = true and picture (my .gif arrow pic)

vb Code:

Picture1.CurrentX = 10 * Screen.TwipsPerPixelX ' if picbox scalemode is twips
Picture1.CurrentY = 70 * Screen.TwipsPerPixelY
Picture1.ForeColor = vbBlue
Picture1.Print "My Caption"

It worked, just printed where you couldn't see it :)
If your image size is less than 70 pixels tall, adjust the CurrentY value. Also adjust the CurrentX as needed. And last but not least, if your picturebox scalemode is pixels remove the multiplication by TwipsPerPixelX/Y

Here's a tip.
1) In the picturebox, add a label with the captioin you want to use
2) Make the label's font the same as the picturebox's font: same size, name, boldness, etc
3) Position the label on the picturebox where you want the text to be displayed
4) Jot down the Left & Top coordinates of the label
5) Use those values as the CurrentX & CurrentY coordinates
6) Hide/delete your label and try running project again. Delete label when no longer needed

LaVolpe,

-Yes you were right, after following your recommandation your code works, but I shouldn't put current X and Current Y in twip values even if my Scale mode is Twip, i had to put the values of X, Y in Pixel, so for the 10, 70, i put 0, 38 , it worked.

VB Code:

Picture1.CurrentX = 0 * Screen.TwipsPerPixelX ' if picbox scalemode is twips
Picture1.CurrentY = 38 * Screen.TwipsPerPixelY
Picture1.ForeColor = vbBlue
Picture1.Print "My Caption

- Thanks a lot for your post #54 it was very usefull to understand theorically what is going on, but you said that :

Quote:

---

You cannot create a smooth curve, circle, or diagonal with regions

---

.


If So than how to do curves when I see some skinned forms that are not rectangles ?



- You said also above the limitation of the Picturebox, one of them is that we can't use Tab with them, I am curious to know/learn in case I need the Tab, what should I do in this case ?

To get the smooth curves of skinned forms, I mentioned earlier that layered windows are used & that became available with Win2K. Those apply to forms only, not controls.

The Tab limitation was with image controls, not pictureboxes.

Following your Recommandation MarMan, LaVolpe and baja_yu : I tried 3 differents style : very basic ones


Test 1 : move picture box down 1px : It worked fine

Test 2 : USING 2 different picture state 'normal and 'pressed

Test 3 : Combination of Both moving down the button and change the picture


The Test 2 and 3 are not working properly,

Test 2 : I see a kind of flashing color if I do fast clicks on the button


Test 3 : Wrong behavior

First all goes well,if i click one click and not so fast on the boutton... Then if I start clicking double clicks or fast clicks, the behaviors are weird, there is a kind of flashing color like test 2, but what is weird is that at the beginning the button moves down (normal behavior), but after making fast clicks and doubbles clicks on it, it starts moving up !
I showed in two textboxes the x and Y of the picture box and found that when i make simple clicks they are constants, but when i do fast clicks or double clicks they start changing that's why button moves weird way !

Please, Anyone can check the code and tell me what is wrong ?