ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Window
  • 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/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
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.
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 9-slice scaling" and configure this mode using the button Setting.
  3. The following window is displayed:
    Display options of the 9-slice scaling mode
  4. Configure the 9-slice scaling according to your requirements. The "Preview" button allows you to see how the image will be displayed at runtime.
Remark: 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 9-slice scaling" and configure this mode via the button Settings.
Remark: it is not recommended to use a "Transparent GIF" image with 9-slice scaling, as the display may be slowed down.
Button control
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-slice scaling" and configure this mode with the Settings button.
Remark: 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.
9-slice scaling layout
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:
Resize in 9-slice scaling mode
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-slice scaling 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

Last update: 05/26/2022

Send a report | Local help