onenotetabs(ont) in visual foxpro


the techniques involved with making these tabs are simple and straight forward. since i use no api’s , to achieve the gradient effect requires a bitmap, one for each colour used. the techniques used here are my own. opinions may vary but this is how i do it. this only works in vfp9 since it has the memberclass property.


as mentioned in my previous blog entry, my philosophy is to program only as much as is needed. i don’t intend selling this control so i can decide what i put in and what i leave out. i have decided that my control will have a max of 8 tabs since i have never used more than 8 in any application. also i want to leave out the complexity of the scrolling of the tabs. so i have left it out.


step 1 is to create all the bitmaps and masks needed to achieve the effect. i use paint shop pro to do the gradient images but any application can be used that does this.


first the tab itself is created and coloured with a blue gradient. once that is done and saved i repaint this to the other 7 colours that i have decided i will use and create bitmapt for each. finally i create a mask (.msk) for each of the bitmaps.


next i create a bitmap of dimensions 2 pixels wide by 600 high. i paint this with a gradient by using the lightest and darkest 2 colours from my tab button. this can be seen by opening the bitmaps in the attached file. i do this 8 times for each of the colours i have selected. finally i create a small bitmap 15 x 15 for use on the tab, and its accompanying msk file.


i now have 8 gradient tabs, 8 thin long gradient bitmaps 1 tiny image and 17 msk files and i am ready to roll.


i have decided that the pageframe & pages to be used should also be part of my class since i can set certain default properties that the native vfp pageframe does not allow me to set. these are:






i also create a page class so that these pages can be added to my pageframe class by setting the memberclass and memberclasslibrary for my custom pageframe class to point to this page class.


for my tabs, they will sit above the custom pageframe class. they will do all the work of setup. the pageframe will not show the tabs and my tabs will activate the hidden tabs of the pageframe.


a couple of things i do is i use an invisible button over the whole tab and this is what captures all interaction – in this case the click(). also to get rid of the dotted rectangle of the focus i use a dummy button which is hidden away at left = -100. also i have noticed that mouse response to a button is better than other objects.


one technique i use for visually checking the results is i usually open a new form and create my objects there, run the form and see how they look. this is what i do in this case as well. i just create a single button and copy it to create the other buttons. when i am satisfied with the result, i select just 1 button and saveasclass to create my custom class. then i open this class and edit it, adding methods and properties as needed.


truthfully while prg classes have their place, i hate using them especially when the result is a visual effect. i prefer working with visual classes where i have pixel control on placement and size. but hey, that’s me.


basically the techniques used are the 2x600 bmps that are attached to an image with stretch = 2. this small size uses less resources and gives me the effect i need – gradient.


my class, i have decided should be as self contained as possible. so all i do is create a form, place my custom pageframe class on it and specify the number of tabs. now it behaves like a native vfp pageframe. objects as needed are placed on it. for all intents and purposes it can be manipulated like a normal vfp pageframe. i set the following properties for the pageframe as well:



then i drop my ont class and align it to the top as seen:




the following custom properties are set:


tabcaption1, tabcaption2, tabcaption3 are the captions that will appear in the tabs. i set 3 because my pageframe has pagecount = 3.


tab2control – the full path to the pageframe object




that is all.


when the form is run the ont class takes over and sets everything up and the result is as shown below.



download the attached file and examine the code to see how the thing is done. your comments will be greatly appreciated. and remember that with vfp almost anything is possible if you think outside the box and employ a little smoke & mirrors.


any guesses as to which control i am going to be working on in vfp next?



vladimir martinovski  has made some changes to the original class. his code gets rid of the focus rectangle but introduces another problem. you cannot use the keyboard since his change gets rid of the invisible commandbutton and uses a shape instead. check it out. it is the download below.



4 nov 2006 found a link to an application using the onenotetabs. looks real cool!



6 Responses to Recreating OneNoteTabs in VFP9

  • cesarchalom says:

    That’s really Awesome !

    Congratulations, and thanks for sharing.

    BTW the screenshots are not showing.


  • vladimirm says:


    What About minibar control from previous blog. Would you share that also with comunity. It also looks very nice.

  • bbout says:

    Give me some time mate. All will be revealed, including the Ribbon control.

  • rasoul says:

    very good

  • neo says:

    is it portable? the current trend now in software development is portability which means programs are configuration independent from windows which means it can run on a portable/removable drives such as usb flash drives on any computer without installing it..

    Is VFP Portable?  For that matter is .NET? Ask yourself that first.

  • Ghufran Hashmi says:

    What About minibar control from previous blog. Would you share that also with comunity. It also looks very nice.

    Kindly send these to my email

    “All good things come to him that waits” Check the blog and Foxite for updates.

Leave a Reply

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