|
|
|
|
|
|
|
|
|
|
- Overview
- Background image of a window
- Image control
- Button control
- Configuring the 9-slice scaling
- Optimizing the 9-slice scaling
 Warning
From version 24, 9-image mode is kept for backward compatibility. This function is replaced by 9-slice scaling.
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: - Open the window description.
- In the "Image" tab, select "Use 9-slice scaling" and configure this mode using the button
 . - The following window is displayed:
- 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.
To define the 9-slice scaling on an Image control: - Open the control description window.
- In the "General" tab, select "Use 9-slice scaling" and configure this mode via the button .
Remark: 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:- Open the control description window.
- In the "General" tab, select "Stretch: Custom 9-slice scaling" and configure this mode with the 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. 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-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.
This page is also available for…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|