|
|
|
|
|
|
|
|
|
|
- Overview
- Background image of a window
- Image control
- Button control
- Configuring 9-slice scaling
- Optimizing the 9-slice scaling
 Warning
From version 24, 9-image mode is kept for backward compatibility. This function has been replaced with 9-slice scaling.
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: - Open the window description.
- On the "Image" tab, select "Use 9-slice scaling" and click
 to configure this mode. - 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.
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.
To configure 9-slice scaling in an Image control: - Open the control description window.
- On the "General" tab, select "Use 9-slice scaling" and click 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. To configure 9-slice scaling in a Button control:- Open the control description window.
- In the "General" tab, select "Stretch: Custom 9-slice scaling" and click 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. 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: 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.
This page is also available for…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|