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 9-slice scaling
  • Optimizing the 9-slice scaling
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Warning
From version 24, 9-image mode is kept for backward compatibility. This function has been replaced with 9-slice scaling.
Overview
9-slice scaling allows you to resize images without any distortion. 9-slice scaling can be used on images in an Image control or on the background image of a window.
This mode simply splits the image into 9 sections. Then, you can define how each section will react when the window or Image control is resized.
Background image of a window
To configure 9-slice scaling in the background image of a window:
  1. Open the window description.
  2. On the "Image" tab, select "Use 9-slice scaling" and click Setting to configure this mode.
  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.
Note: Recommendations to seamlessly display 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 configure 9-slice scaling in an Image control:
  1. Open the control description window.
  2. On the "General" tab, select "Use 9-slice scaling" and click Setting to configure this mode.
Note: It is not recommended to use a "Transparent GIF" image with 9-slice scaling, as the display may be slowed down.
Button control
To configure 9-slice scaling in a Button control:
  1. Open the control description window.
  2. In the "General" tab, select "Stretch: Custom 9-slice scaling" and click Setting to configure this mode.
Note: It is not recommended to use a "Transparent GIF" image with 9-slice scaling, as the display may be slowed down.
Configuring 9-slice scaling
9-slice scaling consists in dividing the background image into 9 section.
9-slice scaling layout
You can choose to show or hide individual sections of the image. To do so, simply click the desired section. If the part of the image is not displayed, it will be replaced by the background color of the window or control.
Margins are used to define the size of each section. You can enter values directly or drag the lines that represent the margins.
When the window is resized, only sections 2, 4, 6, 8 and 5 are resized to occupy the entire space:
Resize in 9-slice scaling mode
9-slice scaling allows you to define how each section reacts as the window is resized. For each section, the image will be enlarged:
  • by repeating the image that constitutes the section,
  • by stretching the image that constitutes the section.
In the 9-slice scaling mode settings window:
  • "Width mode" defines how sections 2 and 8 (Top and Bottom) are resized.
  • "Height mode" defines how sections 4 and 6 (Left and Right) are resized.
  • "Center mode" defines how section 5 (Center) is resized.
Optimizing the 9-slice scaling
Here are some recommendations to optimize 9-slice scaling:
  • Use multiples of 8 for horizontal margins.
  • The central section must be at least 32 pixels wide.
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 08/21/2024

Send a report | Local help