← Back to Index

TFlexFMXAdvancedImage

Enhanced image control with rounded corners, shadows, borders, and click effects.

Key Properties

Bitmap / MultiResBitmap: TBitmap / TFixedMultiResBitmap
Image source (use MultiResBitmap for high-DPI support).

ScaleMode: TScaleMode
How image scales: isFit (preserve aspect ratio), isStretch (fill container), isCrop, isCenter.

CornerRadius: Single
Rounded corner radius (0 = square, large value = circle).

Shadow: Boolean
Enable drop shadow effect.

BorderWidth: Single
Border thickness in pixels.

BorderColor: TAlphaColor
Border color.

Clickable: Boolean
Enable click interaction with visual feedback.

HoverEffect: Boolean
Show hover effect on mouse over (desktop).

CSS Classes

img-fluid - Responsive image (fills container)
rounded - Rounded corners
rounded-circle - Circular image (equal width/height)
img-thumbnail - Thumbnail style with border
shadow - Drop shadow

Usage Examples

Profile Picture (Circular)

Image1.FlexFMXCSS.Text := 'rounded-circle shadow';
Image1.Width := 100;
Image1.Height := 100;
Image1.ScaleMode := isFit;

Photo Thumbnail

Image1.FlexFMXCSS.Text := 'img-thumbnail';
Image1.BorderWidth := 2;
Image1.BorderColor := TAlphaColors.Lightgray;
Image1.CornerRadius := 5;

Clickable Image

Image1.Clickable := True;
Image1.OnClick := ImageClickHandler;

High-DPI Image

// Add multiple resolutions for crisp display on all devices
Image1.MultiResBitmap.LoadItemFromFile('icon@1x.png', 1.0);
Image1.MultiResBitmap.LoadItemFromFile('icon@2x.png', 2.0);
Image1.MultiResBitmap.LoadItemFromFile('icon@3x.png', 3.0);

Events

OnClick - Image clicked (when Clickable = True)
OnMouseEnter / OnMouseLeave - Hover events

Notes

Use isFit scale mode to preserve aspect ratio and prevent distortion
Images are automatically centered when using isFit mode
MultiResBitmap automatically selects appropriate resolution for screen density
Supports transparent PNGs and other common formats
For best quality on mobile, provide @2x and @3x versions

← Back to Index