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.
- This reveals the smart stretching fields.
For example, here is an image of a generic application window:
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:
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.
Now, the component looks like this when resized:
By using smart stretching, the single source image can be used to create windows of many different sizes.