ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
This content has been translated automatically.  Click here  to view the French version.
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
  • Which image to use?
  • Manage stretching of shutter button images
  • How to associate an image with a tab pane
  • Background color/Background image of tabs
  • Tabs in a window
  • Image formats
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
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:
  • Tab image: This image lets you redefine the shape and color of the tab.. Example:
  • Color of tab border. Example:
Remarks:
  • WINDEV To use a "Transparent" tab, simply select "Transparent" as the background color for the internal frame ("Style" tab in the field description, "Internal frame" item).
  • 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 To associate an image with the text of a tab:
  1. Open the tab description.
  2. On 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. In the "Image" field, select the image to be embedded next to the label using 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 "Project gallery" option lets you select an image from the project directory.
    • The "Catalog" option allows you to select an image from the image catalog.
  5. Validate.
Remarks:
  • The "Style" tab lets you set the image associated with the tab label using the "Active pane label" and "Inactive pane label" elements. You can define:
    • label font options,
    • the position of the label and image in the pane. Image position can be independent of label position.
    • New in version 2025
      a margin between image and text to prevent them from "sticking" together.
      Note: This parameter is only available from version 2025 Update 1.
    • a margin around the "Label + image" set in the.
  • New in version 2025
    In the "Style" tab, the "Force to monochrome" item can be used to force images in the Tab Control to be drawn in monochrome, using a defined color. This option is particularly useful when using palettes, so that tab images follow the color used in the current palette.
    Note: This parameter is only available from version 2025 Update 1.
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.

Which image to use?

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 Drawing of pressed status then drawing of normal status.
Please note If the shutter is displayed vertically, the shutter image must be vertical.

Manage stretching of shutter button images

To manage the resizing of tabs, it may be necessary to manage the enlargement of panel buttons. You can manage:
  • 3-frame automation stretching.
  • New in version 2025
    WINDEV A 9-frame stretch.
    Note: This parameter is only available from version 2025 Update 1.
3-frame automation stretching:
In this case, the shutter image is automatically split into 3 images by WINDEV/WEBDEV.
The following criteria are used:
  • 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 16 pixels. If the tab is proportional to the text, this section will be repeated as many times as necessary to fit the text.
Remarks:
  • If part 2 of your image is smaller than 16 pixels, it's advisable not to use a tab pane proportional to the label, and to integrate additional images and the label into the image if necessary.
  • 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.
New in version 2025
WINDEV Stretching with 9 images:
In this case, it is possible to configure image stretching by setting the various fixed and non-fixed zones. For more details on this setting, see 9-slice scaling. Note: This parameter is only available from version 2025 Update 1.
WINDEV

How to associate an image with a tab pane

To associate an image with the tab pane:
  1. Open the tab description.
  2. On the "Style" tab, select the "Images of panes" element.
  3. Unroll the "Shutter images" button. In the popup that appears:
    • Select the paths corresponding to the image paths to be used for tab panes. Several images may be required according to the position of the tab pane and according to its display mode.
      New in version 2025
      Note: If you specify only the first image, the other images will be automatically deducted.
    • Specify the stretching mode for shutter buttons.
      Linux Not available.
    • WINDEV Specify the number of steps in the animation.
      Linux Not available.
  4. New in version 2025
    If buttons are defined by an image, it is possible to use the button background color defined in the "Active panel" and "Inactive panel" elements.
  5. Validate.
Note: In some cases, it is not necessary to use an image to redefine the shape and color of a tab. In fact, the style of the "Active shutter" and "Inactive shutter" elements allows you to specify:
  • a background color,
  • a frame color,
  • a frame. Several options are available.
    New in version 2025
    Using a custom frame, you can define rounding, border, line thickness and color options for each edge of the frame.
Background color/Background image of tabs
WINDEV

Tabs in a window

You can specify a color for:
  • the bottom of the shutter.
  • the bottom of the tab.
To change the pane background color:
  • Go to the "Style" tab of the control description window.
  • Select the "Internal frame" element and specify the background color to be used.
To change the background color of tabs:
  • Go to the "Style" tab of the control description window.
  • Select the "Active pane" item and specify the background color to be used.
  • Select the "Inactive shutter" item and specify the background color to be used.
Remarks:
  • 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 "Frame" option lets you redefine the shape of the tabs button.
Image formats
WINDEV The following image formats are supported in Windows:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpg ; *.jpeg)
  • Kodak Photo CD (*.pcd)
  • PaintBrush (*.pcx)
  • Adobe Photoshop Format (*.psd)
  • TrueVision TARGA (*.tga)
  • Tagged Image File Format (*.tif ; *.tiff)
    Note: the "Tiled TIFF" option in TIFF 6.0 is not supported. In this case, we advise you to save the image in tiff 5.0 standard.
  • Portable Network Graphics (*.png)
  • Windows MetaFiles (*.emf ; *.wmf)
  • Icons (*.ico ; *.icw)
    Remarks:
    • HQ display (High Quality) available.
    • Management of sheets in transparent BMP format (32 bits).
  • Cursors (*.cur)
  • Portable Document Format (*.pdf)
  • Scalable Vector Graphics (*.svg)
  • WINDEV images (generated by the image editor, *.WDPIC).
  • New in version 2025
    Images in WebP format (*.webp).
See also
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 02/19/2025

Send a report | Local help