ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Tab control
  • Overview
  • Image associated with the text of the tab
  • Image of the tab pane
  • Associating an image with the tab pane
  • Background color/Background image of tabs
  • Image formats
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
Overview
To optimize the appearance of your screens, WINDEV, WEBDEV and WINDEV Mobile allows you to use images or colors in your Tab controls. For example:
  • Image associated with the text of the tab. This image is displayed next to the text of the tab. Example:
  • Image of the tab: This image allows you to redefine the shape and color of the tab. Example:
  • Color of tab border. Example:
Remarks:
  • WINDEV Mobile To use a "Transparent" tab, simply select "Transparent" for the background of the outside border ("Style" tab of the control description, "Outside border").
  • You can also modify the appearance of the tabs by modifying display mode of tabs.
Image associated with the text of the tab
The image associated with the text of the tab appears next to the text.
WINDEV Mobile To associate an image with the text of a tab:
  1. Open the tab description.
  2. In the "General" tab, select the desired pane in the list of panes on the left.
  3. The description of the selected pane appears in the area on the right.
  4. Select the image that will be displayed beside the caption via the Drop-down button button:
    • The "Browse" option allows you to select a file from your computer. You have the ability to specify the number of states for the image.
    • The "Catalog" option allows you to select an image from the image catalog.
  5. Validate.
Image of the tab pane
The image associated with the tab pane replaces the existing tab pane. This gives you the ability to redefine the shape and color of the tab pane.
The image associated with the tab pane must contain two drawings:
  • the drawing corresponding to the normal status of the pane
  • the drawing corresponding to the pressed status of the pane
The drawings must be organized in the following order:
  • WINDEV Mobile Drawing of pressed status then drawing of normal status.
Caution: If the pane is displayed vertically, the image of the pane must be vertical.
Special case: image of 3-image panes
In this case, the image of the panes will be automatically divided into 3 images by WINDEV/WEBDEV.
The dividing rule is as follows:
  • the image is divided into three sections
  • part 1 corresponds to the left area.
  • part 3 corresponds to the right area.
  • section 2 corresponds to the middle area. The size of this section is equal to 16 pixels. If the tab is proportional to the text, this part will be repeated as many times as necessary to fit the text.
Remarks:
  • If the part 2 of your image is less than 16 pixels, you should not use a tab pane proportional to the caption and you should include (if necessary) the additional images and the caption in the image.
  • If the tabs have different states, the image associated with the tab must contain all the images that correspond to the different states of the tab.
WINDEV Mobile

Associating an image with the tab pane

To associate an image with the tab pane:
  1. Open the tab description.
  2. In the "Style" tab, select the "Images of panes" element. Expand the "Images of panes" button and select the paths corresponding to the paths of the images that will be used for the tab panes. Several images may be required according to the position of the tab pane and according to its display mode.
  3. If necessary:
    • Check "Image of panes with three images".

  4. Validate.
Background color/Background image of tabs
WINDEV Mobile To modify the background color of tabs (also called external border), simply modify the style of tabs ("Style" tab in the description window). The element whose style must be modified is "External Border".
  • The "Background color" option is used to define the background color of all the tab panes. You have the ability to choose a "Transparent" color.
  • The "Border" option is used to define the background image for all the tab panes.
Remark: The style allows you to customize several parameters of the tabs.
Image formats
Android The following image formats can be displayed:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpeg)
  • Portable Network Graphics (*.png)
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 04/06/2023

Send a report | Local help