important note:

gdiplusx uses the pictureval to load a png image into the imgcanvas object to get the transparent effect. vfp9sp1 does not support loading png images using the pictureval property. as such, you must have vfp9 sp2 to use these classes with the gdiplus classes v1.10.

alternately download the 1.20b version but change the rendermode property of my class  to 5. then these classes will work in vfp9 sp1.

i've been working on buttons recently using the gdi+x classes and there have been request for two things. 1. transparent buttons a la vista and taborder for the buttons.

as you all know the buttons are based on the gdiplus.vcx classlibrary - specifically the imgcanvas object which is a vfp image object with code in it. an image object cannot have a tab order so you cannot actually tab to a gdi+x button drawn using the imgcanvas. of course there are always workarounds and i have incorporated these into these transparent buttons.

the easiest way to use them is to drop an instance on a form and resize it to the desired size. then run the builder and set all settable properties as well as generate a live preview. however this preview does not show thetransparency.

if you need any help is using this builder please refer to this article where i have included a tutorial on how to start and use the builder.

the only additional property that may need mention is the hastaborder check box. if checked it sets a property on the button and at runtime the button is "given" the facility to be tabable.

the way i have done this is that if the property is .t., i add an invisible vfp commandbutton on top of the transparent button, size it to be the same, and use bindevents to bind some of its events to a method in the transbutton class to handle these events.

this is done from the setup() of the button class(remember that the init should not be used here)

* adds and links an invisible button

this.parent.addobject(this.name+"b","commandbutton")

obutt = evaluate("this.parent."+this.name+"b")

with obutt

.left = this.left

.top = this.top

.width = this.width

.height = this.height

.style = 1 && invisible

bindevent(obutt,"gotfocus",this,"handleevents")

bindevent(obutt,"lostfocus",this,"handleevents")

bindevent(obutt,"mouseenter",this,"handleevents")

bindevent(obutt,"mouseleave",this,"handleevents")

bindevent(obutt,"mousedown",this,"handleevents")

bindevent(obutt,"mouseup",this,"handleevents")

obutt.visible = .t.

endwith

i also added a gotfocus and lostfocus "event" to the class and because of binding, the methods get called when the invisible button loses or gets focus. the other bindings are for the effects of the transbutton since the invisible button now sits on top of it.

if you don't need a tab order just leave the property to .f. the default.

once you have set the properties, run the form and the button appears, with the transparency you have set. this type of button is best used with an image as the background to get the full effect.

you will need to experiment with the colour combinations and transparency to get the best results.

the button also has a "glow" when the mouse is moved over it. the colour of the glow can also be set from the builder.

when you click this button, you get feedback as the border becomes black.

and if you have set the property "hastaborder" = .t. you can tab between the buttons. place any code you need run in the gotfocus/lostfocus methods of teh class. note that this tabbing will occur in the order the buttons were instantiated.

finally here is a form showing off some of the different shapes, sizes, fonts colours, transparencies of this button class. there are so many variations that the sky's the limit. experiment in the builder till you get the mix that best suits your need.

also for those who want to use the glass buttons, you can easily add the taborder to those by copying the code above and making your own changes, if that is what you need.

experiment with the various settings and know that you can get a fairly good idea of the final look of the button by clicking the "apply" button in the builder.

the source code and sample form are in the attached zip file.

unfortunately because of the amount of junk mail being generated from the weblog i have switched off comments. please post your comments, if any, at www.foxite.com

3 Responses to See through your buttons with GDI+x

Leave a Reply

Your email address will not be published. Required fields are marked *