Edit this page

ImageShape

RadImageShape implements the so called "Segmented Image" semantic, which in general allows a small image (pattern) to be stretched to larger bounds without quality loss. This effect is achieved by dividing the image into 9 logical parts (segments) and providing advanced paint logic for each part.

tpf-primitives-imageshape 001

RadImageShape.Margins

RadImageShape  

tpf-primitives-imageshape 002

Using the Margins property, an image is divided into 9 segments. Following is a brief overview of each segment and how it is stretched:

  1. TopLeft – not stretched

  2. Top – stretched horizontally

  3. TopRight – not stretched

  4. Right – stretched vertically

  5. BottomRight – not stretched

  6. Bottom – stretched horizontally

  7. BottomLeft – not stretched

  8. Left – stretched vertically

  9. Inner – stretched horizontally and vertically

Advanced Settings

RadImageShape exposes some advanced settings that allow any complex rendering logic to be easily described. Such settings are:

  • PaintMode – available are 14 different modes, where each one defines custom paint logic of the 9 segments.

tpf-primitives-imageshape 003

PaintMode.StretchYTileX

  • InterpolationMode – defines the interpolation passed to the underlying GDI+ Graphics used to paint the each image part.

  • RotateFlip – additional option, which allows the source image to be rotated/flipped before segmentation.

Editing RadImageShape in Visual Style Builder

Each RadElement exposes a property named BackgroundShape which is of type RadImageShape. Complete Visual Style Builder support is provided and you can either create a RadImageShape repository item or edit the BackgroundShape property directly in the advanced view of each element.

tpf-primitives-imageshape 004

See Also