a reader on my blog posted - why don't i create other base controls with gdi+x so i thought i'd give it a shot. this post is about recreating the vfp base classes using pure gdi+ and the gdi+x classes to achieve neat looking base classes.

when i say "base class" i mean with vfp intrinsic ability to bind fields to controls. so while not all pem's available in the checkbox have been implemented the two most important have been - databinding using the controlsource and of course sprucing up the ui experience.

after a day and a half, this is what i have come up with. this classes can be improved in a number of ways, including improving the ui but that will have to be in later versions.

please note that to get translucency you need vfp9sp2.

here is a form (included in the download) that displays some of the pem's of the new control and also allows you to play a bit with the properties.

i have added most changeable properties to the favourites tab for easy access. this class has the following properties that can be set. note that some are dependant on others.

1. background - solid, gradient or none.
2. border or no border.
3. colour of background (colours for gradient)
4. caption
5. 4 background shapes - rectangular, curver top and bottom and all rounded corners
6. ability to change the font, colour and actual displayed icon in the check box (tick, circle etc)
7. square or circular checkbox.
8. size of the check box
9. ability to vary the direction of the gradient.
10. transparent background and ability to vary the alpha channel.
11.vary the amount of curvature of the background.
12. ability to change the colour and font of the caption.
13. visual feedback when the control has the mouse over
14. as mentioned earlier, this control can be bound to your data the same as the original vfp checkbox control. so it will read and display the bound value as well as set the value in the table for the bound field.

as you can see above, by comparing my control to vfp's native, it does make a big difference to your ui

to make it even easier to use i have also included a builder that will allow you to change most custom properties easily.

to use this class, just drop it on a form the usual way and resize it to what you require.

in the properties window, select the favourites tab and select the item - aacheckboxbuilder. when you do, a button will appear above as in the picture. click this button to open the builder.

the builder is very easy to use and most properties will update live so you can preview them. i have made some notes about some settings as marked in the image below which require some additional comment.

1. this item is what is displayed in the check box. the character above is the tick in the wingdings font. the easiest is to open the character map from the system tools and preview the characters available. once selected this can be copied to the clipboard and pasted here. make sure you add the correct font.(2)

3. if no gradient is selected the control will use the colour on the left. there are 4 modes of gradient and by switching your colours you will get 4 more..

another point i need to make that is important. with a number of these controls on the form you will notice that the form first appears, then the class with an x in the middle then the controls draw the image. this is a problem with the gdi+x. specifically the imgcanvas class, but can easily be fixed. here's how.

open the imgcanvas class in vfp and open the init method. scroll down and after the last line in the method add this:

this.draw()

close and save the class. what this will do is that it will draw your controls before the form.show. the effect will be a slight delay in the form appearing, but that is much better than having the empty controls with the x.

please let me know of any problem or errors in the code. also i am welcome to suggestions for improving this class both in functionality as well as in ui appearance, with the emphasis on the latter.

enjoy

update:

following feedback received, the class has now been updated to v1.1 with:

1. disabled textboxes in builder now enabled.

2. enabled property added to favourites so the control can now be enabled/disabled at runtime.

future improvements...?

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

6 Responses to Creating the VFP Base Classes with GDI+x – The Checkbox

  • Hi Bernard

    Nice work as always you do ! thank you.

    loading time is important in form,maybe lockscreen can disable this effect or making temporisation
    to appear.
    the controls appear one after one and take a laps of time.

    I have already mentioned this and a solution:
    Another point I need to make. With a number of these controls on the
    form you will notice that the form first appears, then the class with
    an X in the middle then the controls draw the image. This is a problem
    with the GDI+x. specifically the imgCanvas class, but can easily be
    fixed. Here’s how.

    Open the imgCanvas class in VFP and open the INIT method. Scroll down and after the last line in the method add this:

    This.Draw()

    Close
    and save the class. What this will do is that it will draw your
    controls before the Form.Show. The effect will be a slight delay in the
    form appearing, but that is much better than having the empty controls
    with the X.

    in the builder why the font of caption is disabled ? its not allow to choice a font(pb fontsize  but can extract only the fontname. ?)

    Now fixed. Thanks for pointing that out. Please download v1.01

    in a form with this property class, its enabled to write manually(no dialog box)

    the caption can not appear on form control for a category of fonts or if the font is error.

    True. No error checking is built in. So please use correct fonts. I forgot to include the Disabled property, but that is achievable by disabling the container. I will update the class to change the UI for diaabled.

    *The native checkbox have already a caption property.Why dont use it in the class(xcaption ?) 
    I actually added a Caption property. xCaption is not used and will be removed.

    Have you thought the checkbox autosize property ?

    Nope. Don’t have the time to implement everything.

    Thanks for your comments.

  • Anil says:

    Aha nice one! Can we give those effect to vfp menu?

    Not the same effect but there is an Owner Drawn Menu project on VFPX that is quite good. Check it out

  • edison says:

    good thanks

  • Steve W says:

    Wow!!

    I never thought you would come back with a post like this – especially in such a short space of time!

    I think most of the above could be achieved with a shape class (which allows for curvature, gradient, gradient direction, transpancy) and the developer can do the rest – i.e. Place a standard checkbox control on top of a “bbShape”.

    Perhaps a shape class could be next?

    The intention was to add things like 3d shapes as the last image. This cannot be done with a simple shape. See last image above.

    However, I do like the idea of using Windings to determine the shape of the actual checkbox and your approach definately gives more scope for personalisation.

    I am only sorry I have such a high workload to be able to offer some time to assist with this. Having said that, I promise I will download your class and give it a good test.

    Don’t forget to change GDI+x as described. And download the newer V1.01

    What I will say though is that I have some ideas for a diary control using the gdi+x classes which when I have chance to implement I would appreciate your feedback on.
    Let’s see your ideas. Remember a picture is worth a 1000 words!

    Comming back to this post though; I think the real tough part will be things like list boxes, and grids…..
    Grids are too much to reprogram. I have a blogpost about decorating Grids here:
    http://weblogs.foxite.com/bernardbout/archive/2009/03/03/7829.aspx

    I want to stick to the “easier” controls. What would you suggest as enhancements for list boxes?

    Thank you for your efforts.

    Steve W.

  • Kevin says:

    I would love to use this in a grid with no back ground

Leave a Reply

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