|
|
|
|
- Overview
- Using a 5-state image for the cursor
- Advanced style settings
- Adding an image via gImage
Customizing the Switch controls
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: - Open the Switch control description window.
- In the "Style" tab, select "Cursor border".
- 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. - Validate.
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).
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.).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|