Unicode button icons in Visual FoxPro

A big difficulty foxers have is to update their user interfaces. Since we lost MS support, we need to do almost all UI changes by our own. The Win10 UI today is based in monochrome icons - the ones from the SEGOE UI family - SEGOE UI SYMBOL and SEGOE MDL2 ASSETS. These are true type fonts, that bring tons of icons - the ones that we see all over in Win10.

Unfortunately we can't access those icons directly in VFP, because they use a range higher than the CHR(255) supported by VFP. We still have some options:

1 - Use an ACTIVE-X that supports unicodes

2 - Use "Real Window buttons", that support unicodes - https://github.com/VFPX/Win32API/blob/master/samples/sample_274.md

3 - Get some help from GDI+ - gdiplus.dll and do the drawings for us.

The 3rd option is really nice, but demands a lot, really a lot of work. Fortunately, I did almost all the hard work before, back in 2005, in the GradObjects class, that originally was created to bring gradient backgrounds and buttons to our forms. It recreated every button from the form, and redrawn it to an image file, allowing cool gradient, mouse over and disabled effects.

Having this, I just needed to adapt it, leaving the almost abandoned gradients behind, adding support to unicodes and some adaptations for the mouse over effects.

Here's an updated version of the good and old GRADOBJECTS class, that was intended to generate gradient buttons and backgrounds to our forms back in 2005, in the WinXP times. It's still the same GradObjects, but with some new properties and features. 

The usage is really very simple:

• Open the GradObjects project
• Create a form, add some buttons
• Toss an instance of Gradobjects to your form
• Set your command button FontName property to "SEGOE MDL2 ASSETS" or any other that you desire.
• Set the caption property of the button to accept unicodes, by introducing the unicodes between the <UC> </UC> tags, for instance:
        greek <UC>03b5 03b9 03c1 03ae 03bd 03b7</UC> - This will show the word "Peace" in greek characters, in any regular font, like Arial, Tahoma, Segoe UI, etc
        To get the Printer icon from the SEGOE MDL2 ASSETS, set the commandbutton font to it, and add the following to its caption property: "<UC>E749</UC>"

The default "GradObjects" properties will bring you a gradient look, but all you need is to change just 5:

• BackColor1: Numeric, the RGB of the backcolor
• BackColor2: Set it to .F. (false), because we don't need gradients here, do we?
• CaptionForeColor: Numeric, the RGB of the forecolor
• GradientMode: 0 - We don't need gradients!
• SelBackColor: Numeric, the RGB of the backcolor when a button is focused or mouse over it
• SelForeColor: Numeric, the RGB of the forecolor when a button is focused or mouse over it

That's it!

The Unicodes can be obtained directly by the CharMap.EXE or all over the web. Here's an excellent starting point: https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font

For a more detailed information, please refer to the original post for GradObjects: http://vfpimaging.blogspot.com/2006/07/gradient-objects-with-gdi-revisited_48.html

The "GradObjects" object will transform all CommandButtons, Graphical OptionButtons from the same parent object. Use containers, if you need different effects (or none) to some individual controls in your forms.

Start playing with the sample form "TESTUNICODEBTNS.SCX"

 Unicode Buttons Download 

See Also:
Drawing Unicode Texts with GDI+

GRADIENT OBJECTS WITH GDI+ REVISITED

Here's the latest version of the GradientObjects class.

Many thanks to: Craig Boyd, Bo Durban, Emerson Reed, Malcolm Greene, Keith Gordijn, Luis Navas, Ana Bisbe, Ailsom Heringer, and all others that have tested the class, providing valuable suggestions and feedback.
The main modification from the previous version is the creation of a new class, as Craig Boyd suggested:

“... create a custom class that provides this functionality rather than have the code directly in the button class. A class that uses bindevents to link itself to the buttons (or whatever ui element is being used) would provide an additional level of abstraction. this would allow developers to use the class with other ui elements (such as a container) and also provide a quick and easy way to add this cool functionality to existing applications where they have their own button subclasses (or are using vfp base class) already existing. Toss the class on the form and set some properties.”

Another important modification was to “turn any optionbutton or checkbox with its style property set to graphical to a gradient button.” as Bo Durban suggested.
Emerson Reed also provided many images showing the desired behavior of the class.

Features :

• drop one instance of the class in the form or container, and all buttons will be converted to gradient. applies to commandbuttons, graphical checkboxes and graphical listboxes

• 9 kinds of gradients
• choose different backcolors when object has the focus and not.
• create greyscale images for disabled buttons
• picture position
• converts picture borders to transparent (no matter what color is used)
• hotkeys (\<) specified in the caption property display normally, and remain functional.

How it was created:

• the class creates a new picture image file that will imitate the original appearance of the button, using all text properties, like caption, fontbold, fontitalic and the original picture, all redrawn in a specified gradient background.
• extensive usage of gdi+ to create images, 100% with direct api calls, to obtain the maximum speed in the creation of the images that will be substituted in the buttons.
• in the first moment, only the main images from the buttons are created. only when the mouse or focus is over a specific object that the class creates the “selected image”. the same happens with the “greyscale disabled pictures”
• many events are controlled using bindevents, such as : mousemove, mouseenter, gotfocus, lostfocus
• three different kinds of gradients were created using different functions.
• for gradientmodes 1 to 4, i used gdipcreatelinebrushfromrecti, to create a simple linear gradient brush with 2 colors.
• for gradientmodes 5 to 8, gdipcreatelinebrushfromrecti was again used in combination of gdipsetlinepresetblend, that according to MSDN "defines arrays of colors and positions used for interpolating color blending in a multicolor gradient". it was used to create a 3 color gradient, starting with backcolor1 property, with backcolor2 in the center and again backcolor1 in the other edge.
• for gradientmode 9, i created a PathGradientBrush, using gdipcreatepath, gdipaddpathrectangle, gdipcreatepathgradientfrompath, gdipsetpathgradientcentercolor and gdipsetpathgradientsurroundcolor. there is a very cool example of this usage in last Craig Boyd's article published in foxtalk 2.0. the surround color is defined by backcolor1 property. The center color is backcolor2.
• the gdi+ imageattributes class is used to apply a color matrix to create the greyscale images for the disabled buttons. It is also used to create the transparent background of the pictures using the remap table function.
• the hotkeys are enabled using the StringFormatHotkeyPrefix
  
  

Properties of the class to be set

Check the favorites tab in the properties window.
         

• BackColor1 - numeric, the RGB value of the starting color of the gradient background when the object does not have the focus and the mouse is not over it.

• BackColor2 - numeric, the RGB value of the destination color of the gradient background when the object does not have the focus or the mouse is not over it.

• SelbackColor1 - numeric, the rgb value of the starting color of the gradient background when the object has the focus or the mouse is over it.

• SelbackColor2 - numeric, the rgb value of the destination color of the gradient background when the object has the focus or the mouse is over it.

• CaptionForeColor - numeric, if set, overrides the forecolor originally set in the controls

• Captionbold - logical, if set, overrides the captionbold originally set in the controls

• CreateBorder - logical, sets the border with the color background1 color

createborder = .T.

          

createborder = .F.

           

• GradientMode - numeric, from 1 to 9, determines the gradient type to be applied to the buttons.

1 - horizontal 2 - vertical 3 - diagonal 1 4 - diagonal 2 using linear gradient brushes with 2 colors
5 - horizontal 6 - vertical 7 - diagonal 1 8 - diagonal 2 using linear gradient brushes with 3 colors, where the surrounding color is backcolor1 and the center color is backcolor2
9 - rectangular pathgradient, where the surrounding color is backcolor1 and the center color is backcolor2

          
         
          

• ReduceColorLevel - numeric, automatically sets the destination color of the gradient (BackColor2 and SelBackColor2) ranging from 0 (no change) to 100 (white). if left to .f., then no change is applied and the original values of BackColor2 and SelBackColor2 will be used.

• CreateDisabledPicture - logical, .t. = create a grayscale picture of buttons to be used when one or more controls are disabled.

         

• MouseDownEffect - logical, determines if the button will become darker or brighter when mouse is down
• MouseDownBrightness - numeric, brightness in percentage. -100 = black; 0 = no change ; +100 = white

• TranspImgBack - logical, determines if the picture will have its background converted to transparent (alpha = 0). by default, the class will admit that the color of the 1st pixel, coordinate (0,0) has the background color, and will substitute all pixel colors that match that color to transparent.

         

Redrawing a specific object

In many cases, we need to change programatically some properties of some buttons, like the caption. When using this class, you need to call the updatecontrol method of the class, like in the example below:

Thisform.CmdButton1.Caption = "new caption"
Thisform.CmdButton1.FontItalic = .t.
Thisform.GradObjects1.UpdateControl(Thisform.CmdButton1)

Assigning different effects to some specific buttons

That's very easy to accomplish. Put the CommandButtons in a separate container, and drop an instance of the class, setting the properties as needed.

Below you can see a form in development mode and the resulting when the form is executed.

         

         

 GradObjects Download - Release 2020 

Disclaimer

This class is totally free. The information provided on this page and the source code related to this article comes without any warranty whatsoever. Use it at your own risk.

New version of GradObjects

I've just posted a new version of the GradObjects class.
Nhanks to Nigel for reporting a bug that occured when using graphical OptionGroups.
Here's the updated version.

GradObjects Download - Release 2020

More info can be obtained at the original post:
GradObjects Revisited - 2020