PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Image associated with the caption of tab pane
  • Image of the tab pane
  • Associating an image with the tab pane
  • Associating an image with the tab pane
  • Background color/Background image of tabs
  • Formats of images
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
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. Some examples:
  • Image associated with the caption of tab pane. This image is displayed beside the caption of the tab. Example:
  • Image of the tab pane: This image is used to redefine the color and shape of tab pane. Example:
  • Color of tab border. Example:
Notes:
  • WINDEVWINDEV Mobile To use a "Transparent" tab, all you have to do is choose the "Transparent" color for the background of outside border ("Style" tab of control description, "Outside border" element).
  • You also have the ability to modify the style of tabs by modifying the display mode of tabs.
Image associated with the caption of tab pane
The image associated with the caption of tab pane is displayed beside the tab caption.
To associate an image with the caption of tab pane:
  1. Display the tab description.
  2. In the "General" tab, select "Details (pane)".
  3. Select the image that will be displayed beside the caption:
    • WINDEVWINDEV Mobile The image is selected via the [...] button found beside the "Image" control. You have the ability to specify the number of states for the image.
    • WEBDEV - Server code The image is selected via the [...] button found beside the "Pane icon" control.
  4. Validate.
WINDEVWINDEV Mobile To associate an image with the caption of tab pane:
  1. Display the tab description.
  2. In the "General" tab, select the requested tab in the list of panes on the left.
  3. The description of selected pane appears in the area on the right.
  4. Select the image that will be displayed beside the caption:
    • The image is selected via the [...] button found beside the "Image" control. You have the ability to specify the number of states for the image.
    • Click (if necessary) the "Catalog" button to select an image in the image catalog.
    Select the image that will be displayed beside the caption via the Drop-down button button:
    • The "Browse" option is used to select a file accessible from your computer. You have the ability to specify the number of states for the image.
    • The "Catalog" option is used to select an image in the image catalog.
  5. Validate.
WEBDEV - Server code To associate an image with the caption of tab pane:
  1. Display the tab description.
  2. In the "General" tab, select "Details (pane)".
  3. Select the image that will be displayed beside the caption:
    • The image is selected via the [...] button found beside the "Pane icon" control.
    • Click (if necessary) the "Catalog" button to select an image in the image catalog.
    Select the image that will be displayed beside the caption via the Drop-down button button near the "Pane icon " control:
    • The "Browse" option is used to select a file accessible from your computer.
    • The "Catalog" option is used to select an image in the image catalog.
  4. 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:
  • WINDEVWINDEV Mobile Drawing of pressed status then drawing of normal status.
  • WEBDEV - Server code Drawing of normal status then drawing of pressed 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
  • the section 1 corresponds to the left area
  • the section 3 corresponds to the right area
  • the section 2 corresponds to the middle area. The size of this section is equal to 16 pixels. If the tab pane is proportional to the caption, this section will be repeated as many times as necessary to contain the caption.
Note: 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.
WINDEVWINDEV Mobile

Associating an image with the tab pane

To associate an image with the tab pane:
  1. Display the tab description.
  2. In the "Details" tab, select the path of the image that will be used for the tab panes ("Image of panes" option). 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".
    • WINDEV Specify the number of steps in the animation.
      Linux These options are not available in Linux.
  4. Validate.
To associate an image with the tab pane:
  1. Display 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".
    • WINDEV Specify the number of steps in the animation.
      Linux These options are not available in Linux.
  4. Validate.
WEBDEV - Server codePHP

Associating an image with the tab pane

To associate an image with the tab pane:
  1. Display the tab description.
  2. In the "Style" tab, select the "Image of tab buttons" element.
  3. Specify the path of the image that will be used for the tab panes.
  4. Check "3-image mode" if necessary.
  5. Validate.
Background color/Background image of tabs
WINDEVWINDEV Mobile To modify the background color of tabs (also called external border), all you have to do is 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.
Note: The style allows you to customize several parameters of the tabs.
WEBDEV - Server code WEBDEV allows you to modify the background color and the background image used for each tab pane. To do so:
  1. Display the tab description.
  2. In the "General" tab, select "Border, Background (pane)".
  3. Modify the requested element:
    • the "Background color" control is used to define the background color of the selected tab pane.
    • the "Background image" control is used to define the background image used for the selected tab pane.
Notes:
  • The color of the tab border can be modified in the "Style" tab. This element is called "Separator" because it is used to separate the different panes.
  • The style allows you to customize several parameters of the tabs.
Notes:
  • The color for the border of the tabs can be modified in the "Style" tab, "Buttons of tab panes" element. This element is called "Separator" because it is used to separate the different panes.
  • The style allows you to customize several parameters of the tabs.
Formats of images
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 of the tiff 6.0 standard 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)
    Versions 22 and later
    Notes:
    • HQ display (High Quality) available.
    • Management of sheets in transparent BMP format (32 bits).
    New in version 22
    Notes:
    • HQ display (High Quality) available.
    • Management of sheets in transparent BMP format (32 bits).
    Notes:
    • HQ display (High Quality) available.
    • Management of sheets in transparent BMP format (32 bits).
  • Cursors (*.cur)
  • Portable Document Format (*.pdf)
  • Versions 15 and later
    Scalable Vector Graphics (*.svg)
    New in version 15
    Scalable Vector Graphics (*.svg)
    Scalable Vector Graphics (*.svg)
  • Versions 22 and later
    WINDEV images (generated by the image editor, *.WDPIC).
    New in version 22
    WINDEV images (generated by the image editor, *.WDPIC).
    WINDEV images (generated by the image editor, *.WDPIC).
Note: To manage the pdf and svg formats, GDIPLUS.DLL must be installed for the computers running Windows 2000 and earlier. For the later versions, this DLL is supplied with Windows. See GDI+ framework for more details.
Windows Mobile The following image formats can be displayed:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpg ; *.jpeg)
  • Icons (*.ico ; *.icw)
Android The following image formats can be displayed:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpeg)
  • Portable Network Graphics (*.png)
iPhone/iPad The following image formats can be displayed:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpeg)
  • Portable Network Graphics (*.png)
  • Icons (*.ico ; *.icw)
Minimum required version
  • Version 9
This page is also available for…
Comments
Example Download Control TAB
Working with Screen TABs and Wizards

a) switch between tab via code
b) condition the change from one tab to another
c) make a screen wizard only with a button
d) have a local variable to know the current tab that is on the screen

DOWNLOAD
https://repository.windev.com/publish.awp?file_id=281474976710748;example-alter-tab
BOLLER
Jul. 27 2018