PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
  • Overview
  • Images associated with a button in a window
  • Overview
  • Special case: the button states are managed via images
  • Animation
  • Image and text positioning
  • Customize the shape of button via the style
  • Images associated with a button in a page
  • Advanced configuration of images
  • Configuring the display mode (button in a window)
  • Image of multilingual button
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
Images and buttons
Overview
To optimize the appearance of your screens or sites, you have the ability to use images in your buttons.
Images associated with a button in a window
Universal Windows 10 AppAndroidAndroid Widget iPhone/iPad

Overview

In a window, two types of images can be used to define the image associated with a button:
  • image: this image will be stacked on the button regardless of its shape. Example: button with an image and without border:
    Tip: For better results, the image must be 5 pixels smaller than the button size (in width and in height).
  • image of button border: this image is used to easily redefine the button shape. For example:
These images are selected during the button description ("General" tab):
Remarks:
  • To choose images (border and pictos) among a library of images supplied with WINDEV or WINDEV Mobile, expand the Drop-down button button and select "Catalog".
  • To edit the image options (display mode, symmetry, ...), expand the Drop-down button button and select "Display options, transparency, symmetry" (see Configuring the display mode (button in a window)).
  • Android Widget Only the image of button border can be configured.
Universal Windows 10 AppAndroidiPhone/iPad

Special case: the button states are managed via images

WINDEV and WINDEV Mobile allow you to manage the different button states: normal, pressed, grayed out, focused and hover. For more details, see The states of a button.
If the states of the button are managed by images, you can:
  • use two images (a border image and an image) each containing 5 states . This solution allows you to stack the image on the border image and to re-use the border image with another image.
  • include the image in the border image. Only the border image will be specified in the description of image control.
Idle, pressed, grayed, selected, hovered button
Idle, pressed, grayed, selected, hovered button
If the image contains several states, WINDEV allows you to manage:
  • the image enlargement (if the button size is greater than the image for example). Several possibilities are available:
    • No stretching
    • Stretching in width (3 images). The dividing rule is as follows:
      • the image is divided into three sections
      • section 1 corresponds to the left area
      • section 3 corresponds to the right area
      • section 2 corresponds to the middle area. The size of this section is equal to 16 pixels. This part will be repeated as many times as necessary in order for the button image to have the requested size.
    • Stretching in width and in height.
    • Versions 16 and later
      Adaptation of image via the 9-slice scaling.
      New in version 16
      Adaptation of image via the 9-slice scaling.
      Adaptation of image via the 9-slice scaling.
AndroidAndroid Widget

Animation

You also have the ability to animate the images of buttons. To do so, the button can:
  • use an animated image. In this case, the image of the button corresponds to an animated image format (animated Gif for example). The animation is automatically managed.
  • use an image that will be animated by WINDEV or WINDEV Mobile. In this case, the image contains all animation drawings (the horizontal drawings represent the button states). The number of steps in the animation must be specified in the "General" tab of the description window of Button control.
AndroidAndroid Widget

Image and text positioning

When an image contains a caption and a picto (image), you have the ability to configure the relative position of image and text in the control style:
  1. Display the description window of Button control ("Description" in the context menu).
  2. Display the "Style" tab.
  3. Select the "Caption" element and configure the caption position via the "Position" option.
Universal Windows 10 AppAndroidAndroid Widget iPhone/iPad

Customize the shape of button via the style

You have the ability to configure the shape of button via the style options.
To configure the shape of button:
  1. Open the "Style" tab in the description window of button.
  2. Select the "Outside border" element.
  3. In the "Border" section, select the requested border.
  4. Use the arrow button to configure the border (the configuration options differ according to the type of selected border).
  5. Validate.
Remarks:
  • Some options are not visible if the button includes a border/background image.
  • Versions 21 and later
    The "Round" border is used to get a round button.
    In this case:
    • the transparency is automatically supported.
    • The click is adapted to the shape: if the user clicks the corner of control, outside the circle, the click is ignored.
    New in version 21
    The "Round" border is used to get a round button.
    In this case:
    • the transparency is automatically supported.
    • The click is adapted to the shape: if the user clicks the corner of control, outside the circle, the click is ignored.
    The "Round" border is used to get a round button.
    In this case:
    • the transparency is automatically supported.
    • The click is adapted to the shape: if the user clicks the corner of control, outside the circle, the click is ignored.
Images associated with a button in a page
Advanced configuration of images
Universal Windows 10 AppAndroidiPhone/iPad

Configuring the display mode (button in a window)

When describing the images of a button, you can configure the image display mode:
  1. Click Drop-down button.
  2. In the menu that is displayed, select "Display options, transparency, symmetry".
  3. In the window that is displayed, you can to configure:
    • the image display mode
    • its rotation
    • its transparency
    • its symmetry.
Remark: If the image is multilingual, this configuration applies to all languages.

Image of multilingual button

If your site or application is multilingual, a different button image can be selected for each language. This option is useful when the images associated with the button contain the caption of the button.
To manage multilingual images:
  1. Display the description of Button control.
  2. Click the Drop-down button button found beside the image path.
  3. Select the "Multilingual" option.
  4. The window for managing multilingual images is displayed. By default, the same file is associated with all the languages supported by the window or by the page.
  5. For each language, click the Drop-down button button. You can:
    • Select the image corresponding to the language on your computer ("Browse" option).
    • Select the image corresponding to the language in the image catalog ("Catalog" option).
    At runtime, the corresponding button image will be displayed depending on the language selected by Nation.
  6. Validate. The "Multilingual value" caption appears in the image name.
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment