PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Background image of a window
  • Image control
  • Button control
  • Configuring the 9-image mode
  • Optimizing the 9-image mode
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
The 9-image mode allows you to resize the images harmoniously. The 9-image mode can be used on the images found in an Image control or on the background image of a window.
The principle of 9-image mode is straightforward: the image is divided into 9 sections. Then, you have the ability to define how each section will behave when the image control or the window is resized.
Versions 16 and later
Android The 9-image mode is available in Android.
New in version 16
Android The 9-image mode is available in Android.
Android The 9-image mode is available in Android.
Background image of a window
To define the 9-image mode for the background image of a window:
  1. Display the description window of window.
  2. In the "Image" tab, select "Use the 9-image mode" and configure this mode via the button.
  3. The following screen is displayed:
  4. Configure the 9-image mode according to your requirements. The "Preview" button is used to see how the image will be displayed at run time.
Note: Some tips for optimizing the display speed of the windows that use the 9-image mode:
  • do not use a "Transparent GIF" image with the 9-image mode
  • use a plain background for the image and for the background color of window.
  • try to define margins that are multiple of 4.
Image control
To define the 9-image mode of an Image control:
  1. Display the description window of control.
  2. In the "General" tab, select "Use the 9-image mode" and configure this mode via the button.
Note: no "Transparent GIF" image should be used with the 9-image mode otherwise the display may be slowed down.
Button control
Versions 16 and later
To define the 9-image mode of a Button control:
  1. Display the description window of the control.
  2. In the "General" tab, select "Stretch: Custom 9-image mode" and configure this mode with the button.
Note: no "Transparent GIF" image should be used with the 9-image mode otherwise the display may be slowed down.
New in version 16
To define the 9-image mode of a Button control:
  1. Display the description window of the control.
  2. In the "General" tab, select "Stretch: Custom 9-image mode" and configure this mode with the button.
Note: no "Transparent GIF" image should be used with the 9-image mode otherwise the display may be slowed down.
To define the 9-image mode of a Button control:
  1. Display the description window of the control.
  2. In the "General" tab, select "Stretch: Custom 9-image mode" and configure this mode with the button.
Note: no "Transparent GIF" image should be used with the 9-image mode otherwise the display may be slowed down.
Configuring the 9-image mode
The 9-image mode consists in dividing the background image into 9 areas.
For each area, you can define whether the section of the image corresponding to the area must be displayed or not: all you have to do is click the area to make it visible or invisible. If the image section is not displayed, it will be replaced by the background color of the window or control.
The margins are used to define the size of each area. You have the ability to enter the values of the different areas or to move the line corresponding to the margin.
When resizing the window, only the areas 2, 4, 6, 8 and 5 are resized to occupy the entire space:
The 9-image mode is used to manage the operating mode of each area when resizing the window. For each area, the image will be enlarged:
  • By repeating the image that constitutes the area
  • By stretching the image that constitutes the area
In the window for configuring the 9-image mode:
  • The "Width mode" option is used to manage the resize operation for the areas 2 and 8 (Top area and Bottom area)
  • The "Height mode" option is used to manage the resize operation for the areas 4 and 6 (Left area and Right area)
  • The "Center mode" option is used to manage the resize operation for the area 5 (Center area)
Optimizing the 9-image mode
Some tips for optimizing the 9-image mode:
  • Use multiples of 8 for the margins in width.
  • The width of the middle area must be at least equal to 32 pixels.
Minimum required version
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment