PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview
  • Background image of a window
  • Image control
  • Button control
  • Configuring the 9-slice scaling
  • Optimizing the 9-slice scaling
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
Warning
From version 24, 9-image mode is kept for backward compatibility. This function is replaced by 9-slice scaling.
Overview
The 9-slice scaling allows you to resize the images harmoniously. The 9-slice scaling can be used on images in an Image control or on the background image of a window.
The principle of 9-slice scaling is simple: 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-slice scaling is available in Android.
New in version 16
Android The 9-slice scaling is available in Android.
Android The 9-slice scaling is available in Android.
Background image of a window
To define the 9-slice scaling for the background image of a window:
  1. Open the window description.
  2. In the "Image" tab, select "Use the 9-image mode" and configure this mode via the button.In the "Image" tab, select "Use 9-slice scaling" and configure this mode using the button .
  3. The following screen is displayed:
  4. Configure the 9-slice scaling according to your requirements. The "Preview" button is used to see how the image will be displayed at runtime.
Note: Some tips for optimizing the display speed of the windows that use 9-slice scaling:
  • do not use a "Transparent GIF" image with 9-slice scaling
  • 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-slice scaling on an Image control:
  1. Open the control description window.
  2. In the "General" tab, select "Use the 9-image mode" and configure this mode via the button.In the "General" tab, select "Use 9-slice scaling" and configure this mode via the button .
Note: it is not recommended to use a "Transparent GIF" image with 9-slice scaling, as the display may be slowed down.
Button control
Versions 16 and later
To define the 9-slice scaling on a Button control:
  1. Open the control description window.
  2. In the "General" tab, select "Stretch: Custom 9-image mode" and configure this mode with the button.In the "General" tab, select "Stretch: Custom 9-slice scaling" and configure this mode with the button.
Note: it is not recommended to use a "Transparent GIF" image with 9-slice scaling, as the display may be slowed down.
New in version 16
To define the 9-slice scaling on a Button control:
  1. Open the control description window.
  2. In the "General" tab, select "Stretch: Custom 9-image mode" and configure this mode with the button.In the "General" tab, select "Stretch: Custom 9-slice scaling" and configure this mode with the button.
Note: it is not recommended to use a "Transparent GIF" image with 9-slice scaling, as the display may be slowed down.
To define the 9-slice scaling on a Button control:
  1. Open the control description window.
  2. In the "General" tab, select "Stretch: Custom 9-image mode" and configure this mode with the button.In the "General" tab, select "Stretch: Custom 9-slice scaling" and configure this mode with the button.
Note: it is not recommended to use a "Transparent GIF" image with 9-slice scaling, as the display may be slowed down.
Configuring the 9-slice scaling
The 9-slice scaling method 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: simply 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-slice scaling method is used to manage the behavior 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-slice scaling
Some tips optimize the 9-slice scaling:
  • Use multiples of 8 for the margins in width.
  • The width of the middle area must be at least equal to 32 pixels.
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment