← Back to Index

TFlexFMXTileList

Responsive tile/card grid with automatic layout, perfect for image galleries, product catalogs, and dashboards.

Key Properties

Items: TTileItems
Collection of tile items.
TileWidth / TileHeight: Single
Default tile dimensions.
ColumnsCount: Integer
Number of columns (0 = auto-calculate based on width).
Spacing: Single
Gap between tiles.
AutoHeight: Boolean
Automatically adjust tile heights to fit content.
SelectionMode: TSelectionMode
smNone, smSingle, smMultiple.
ShowHeaders: Boolean
Display tile header area.
ShowFooters: Boolean
Display tile footer area.

Tile Item Properties

Title: string
Tile title text.
Description: string
Tile description/subtitle.
ImageBitmap: TBitmap
Tile image.
FooterText: string
Footer text.
BadgeText: string
Optional badge on tile.
Selected: Boolean
Selection state.
Tag: NativeInt
Custom data tag.

Usage Examples

Photo Gallery

TileList1.TileWidth := 200;
TileList1.TileHeight := 200;
TileList1.ColumnsCount := 0; // Auto
TileList1.Spacing := 10;

with TileList1.Items.Add do
begin
  Title := 'Sunset';
  ImageBitmap.LoadFromFile('photo1.jpg');
  FooterText := 'July 2024';
end;

with TileList1.Items.Add do
begin
  Title := 'Mountain';
  ImageBitmap.LoadFromFile('photo2.jpg');
  FooterText := 'August 2024';
end;

Product Catalog

TileList1.SelectionMode := smSingle;
TileList1.ShowFooters := True;

with TileList1.Items.Add do
begin
  Title := 'Laptop Pro';
  Description := 'High-performance laptop';
  ImageBitmap.LoadFromFile('laptop.png');
  FooterText := '$1,299';
  BadgeText := 'NEW';
end;

with TileList1.Items.Add do
begin
  Title := 'Wireless Mouse';
  Description := 'Ergonomic design';
  ImageBitmap.LoadFromFile('mouse.png');
  FooterText := '$49';
end;

Dashboard Cards

TileList1.TileWidth := 150;
TileList1.TileHeight := 150;
TileList1.ColumnsCount := 3;

with TileList1.Items.Add do
begin
  Title := 'Sales';
  Description := '$45,320';
  BadgeText := '+12%';
end;

with TileList1.Items.Add do
begin
  Title := 'Orders';
  Description := '234';
  BadgeText := '+5%';
end;

Methods

Events

Notes

← Back to Index