ONLINE HELP
 WINDEVWEBDEV 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 / Image control
  • Overview
  • Options of the description window
  • "General" tab
  • "UI" tab
  • "Details" tab
  • "Style" tab
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview
This help page presents the characteristics of an Image control found in a window.
Reminder: To create an Image field:
  1. On the "Creation" tab, in the "Usual controls" group, click "Image".
  2. Click at the desired location to create the control. The control appears in the editor.
To view the control characteristics, select "Description" in the context menu of the control.
Options of the description window

"General" tab

The "General" tab is used to define the displayed image and its characteristics.
Choosing the image displayed in the control:
The image displayed by the control is selected via the button, "Browse" option.
AndroidAndroid Widget Remark: Images in SVG format with CSS styling are not supported.
WINDEVAndroidAndroid Widget iPhone/iPad If the Image control allows displaying a PDF file, simply select the file to display. The following WLanguage properties are used to configure the displayed PDF page:
Used to find out and change the display mode of an image.
NumberPageUsed to find out the number of pages in a PDF file displayed in an Image control.
PageNumberUsed to find out and change the page number of a PDF file displayed in an Image control.
WINDEV Caution: Displaying a PDF file in an image requires GDI+ framework.
AndroidiPhone/iPad To manage the DPIs of different devices, the name of image file must follow a specific format. For more details, see Android/iOS: Provide one image per DPI.
Other options: It is possible to define:

"UI" tab

On the "UI" tab, you can define:
  • the initial state of the control,
  • whether or not a representation symbol is displayed in the control. This symbol is a thumbnail displayed by default to represent the Image control in the editor.
    Image with representation symbol
    Image with representation symbol
    Image without representation symbol
    Image without representation symbol
    This option can also be enabled/disabled for all Image controls in the options of window editor. For more details, see Window editor options.
  • the action performed during a right click,
  • the context menu associated with the control,
  • ...

"Details" tab

The "Details" tab allows you to define:
  • The display parameters
    • Load in the background: This option prevents the application from being blocked if the image is to be loaded from a website.. An animation is automatically displayed in the Image control if necessary.
      Note: If the Image field is present in a RepeatString field, the image is always loaded in the background (whether the option is enabled or not).
    • WINDEVAndroidAndroid Widget iPhone/iPadIOS WidgetMac CatalystJava Oriente selon les données Exif de l'image: If this option is enabled, a photo will automatically be displayed in the appropriate direction (portrait or landscape) according to the photo's Exif data..
    • WINDEV Automatic scrollbars and zoom: This option is required to display PDFs in Image fields.. If the PDF file cannot be entirely displayed in the Image control, scrollbars are displayed and the zoom is available by pressing Ctrl + mouse wheel. The zoom can also be handled through programming with Zoom.
    • AndroidAndroid Widget iPhone/iPad Finger-operated zoom and scroll: Multi-touch support for mobile applications. For more details, see Multi-touch in an Image control.
  • The animation options
    For more details, see Animating an image.
  • Click options
    For more details, see Clickable image in a window.

"Style" tab

The "Style" tab is used to define the style of different elements found in the Image control. You can define:
  • An animation when changing the image displayed in the control ("Control animation" element). The "Parameters" button is used to define the duration of animation.
  • A border ("Outside border" element).
  • A blurred shadow ("blurred shadow" element).
To define the image frame:
  1. Select the "Outside border" element.
  2. Expand the "Border" list. The available borders are displayed.
    • The "Round xxx" options are used to define a round border. If these options are selected, a blue arrow allows you to open the window for style configuration in the "Style" tab.
    • The "Image (9-slice scaling)" option allows you to choose an image for the border and to configure it via 9-slice scaling.
    • The "Custom" option is used to define a custom border. If this option is selected, a blue arrow allows you to open the custom shape settings.
    • The "Round" option is used to create a round image. If these options are selected, a blue arrow allows you to open the configuration window (line thickness and style)
      Caution: To avoid distortion, the image must be displayed in a homothetic mode.
Note: The icon (to the right of the "Frame" option) lets you configure the shadow of the field's frame.. If a shadow is used, you can choose:
  • the X and Y offset of the shadow,
  • the percentage of opacity,
  • the blur radius,
  • the color of the shadow.
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 09/19/2024

Send a report | Local help