The Stretch property controls how an image or visual content fills the space of its area.

It determines whether the visual keeps its original proportions, stretches to fill all available space, or scales in a way that might crop or distort it.

Stretch #

None #

The image stays at its original size and does not stretch to fill the area.

If the visual is smaller than the area, there will be empty space around it.

If it’s larger, only part of the visual may be visible.

Use this when you want the visual to appear exactly as imported.

Uniform #

The visual is scaled up or down so that the entire visual fits inside the area.

Its aspect ratio (shape) is preserved, meaning it won’t look stretched or distorted.

However, if the area’s proportions don’t match the visual, you might see empty margins on two sides.

Use this when you want to preserve the visual’s proportions and make sure nothing is cropped.

Uniform To Fill #

The visual is scaled until it completely fills the area, while still keeping its original proportions.

This means the area will be filled, but some parts of the visual might be cropped if the aspect ratios differ.

Use this when you want full coverage, such as for background images or banners.

Fill #

The visual is stretched independently along width and height so it completely fills the area.

This guarantees no blank space, but the visual may look stretched or squashed if the area’s shape doesn’t match.

Use this when you care more about covering the entire area than about keeping the visual’s exact proportions.

Stretch Direction #

The Stretch Direction property works together with Stretch to control when and how the visual is allowed to scale.

Options #

• Both:
  • The visual can stretch in both directions (width and height). This is the default.
• UpOnly:
  • The visual can grow larger, but will not shrink smaller than its original size.
• DownOnly:
  • The visual can shrink smaller, but will not grow beyond its original size.

Stretch Direction doesn’t change the Stretch mode itself, it simply limits whether scaling happens in one or both directions.

For example:

• If Stretch is set to Uniform and Stretch Direction is DownOnly, the visual can shrink to fit smaller spaces, but won’t get enlarged.
• If Stretch is Fill and Stretch Direction is UpOnly, the visual will expand to fill larger areas but won’t shrink when the area gets smaller.