ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Switch control
  • Overview
  • Using a 5-state image for the cursor
  • Advanced style settings
  • Adding an image via gImage
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Customizing the Switch controls
Overview
The Switch control is a 2-state Check Box control (on/off, true/false, yes/no). WINDEV, WEBDEV and WINDEV Mobile offer many customization options.
Using a 5-state image for the cursor
By default, the cursor is defined by a border ("Cursor border" in the "Style" tab of the control description). This border can be customized for each state (normal, hover, etc.): background color, border type and color, etc.
It is also possible to use an image to define the cursor:
  1. Open the Switch control description window.
  2. In the "Style" tab, select "Cursor border".
  3. In the "Use" area, select "5-state image". A window is displayed to select the desired image for the cursor border.
    The image must be a 5-state image (or an image set) and not a "single" image.
    Remark: If you only have a "single" image, you can automatically convert it into 5-state mode thanks to the image editor in WINDEV, WEBDEV and WINDEV Mobile.
  4. Validate.
Advanced style settings
To obtain a very specific style, you can fine-tune the different options available in the "Style" tab of the Switch control description window.
You can modify the font, colors and images for each value (On/Off), for each state (normal, hover, etc.) and for each element (slide frame, cursor frame, cursor label, etc.), ... There are many combinations!
For example, you can customize the cursor border by changing its roundness. If the roundness is half the dimensions of the cursor, the latter will be "round".
For example, you can use the option "Caption of internal modes" to modify color of inactive captions (caption #B for the "OFF" value and caption #A for the "ON" value).
WEBDEV - Server code In WEBDEV, the caption options allow you to customize the control even more.
For instance, you can use a different font size for the current value. The "active" value size can be 20 px (while the second caption size is 12 px).
You can use emojis (specific Unicode characters) to obtain a "visual" switch and adapt its color.
Caution: the character displayed varies according to the system (the same character may not be displayed in the same way on Windows, iOS or Android).
Adding an image via gImage
You can add an image to the caption with gImage to quickly customize the text of the options and keep the same cursor. With this method, however, you must select the color of the images carefully, taking into account the color of the cursor.
To make images visible in all the states, simply swap the images through programming when the user clicks on the control ("Whenever modifying" event). For example:
// Adapt the image displayed in the captions
IF MySelf THEN
    MySelf[1].Caption = gImage(IMG_Name_Gray) + " Sort by name"
ELSE
    MySelf[1].Caption = gImage(IMG_Name_White) + " Sort by name"
END
Remark: all functions of type gXXX can be used in the value labels (gFontBold, gFontUnderlined, etc.).
WEBDEV - Server code In WEBDEV, the caption can be customized with the CaptionHTML property. The CaptionHTML property defines an HTML code as caption of the options. For example:
MySelf[1].CaptionHTML = "<img src=" + IMG_DATE_GRAY + ">" + " Sort by date"
Minimum version required
  • Version 24
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 05/26/2022

Send a report | Local help