Smart stretching allows the center of an image to stretch independently from the edges when it is resized. This is useful when you have an image with borders around a solid center, as it allows you to resize the image without distorting it.
To enable smart stretching for an image component:
- Right-click the image component and choose Inspect Component from the menu.
- This opens the Component Inspector window.
- In the Image section of the inspector, click Turn On Smart Stretching.
- This reveals the smart stretching fields.
- Set the Top, Right, Bottom and Left edges as needed.
For example, here is an image of a generic application window:
Image Component at Native Size
This image has a titlebar across the top, a gray stroke on all sides, and the corners are rounded equally. The image looks good at its native size, but when it is resized, it looks like this:
Resized Image Component
The uniform stretching of the image makes the titlebar, stroke and corners look out of proportion. Smart stretching can fix this by allowing the center to stretch independently of the sides.
For this image, at its native size, we can set the edges to to 25 (top), 5 (right), 5 (bottom) and 5 (left). The edges are identified on the canvas by bright blue lines.
Image Component with Smart Stretching
Now, the component looks like this when resized:
Resized Image Component with Smart Stretching
By using smart stretching, the single source image can be used to create windows of many different sizes.