Skip to main content
Table of Contents

Tiles, Layout, and Navigation

TTMSFNCTileList displays items as a grid of tiles with configurable rows, columns, orientation, and navigation modes.

TTMSFNCTileList default 3×3 grid

Grid layout

Grid layoutPascalC++
TMSFNCTileList1.Rows    := 2;
TMSFNCTileList1.Columns := 4;

TMSFNCTileList1->Rows    = 2;
TMSFNCTileList1->Columns = 4;

Default is 3×3. Single-row or single-column layouts are also supported.

Adding tiles

Tiles are TTMSFNCTileListItem objects in the Items collection:

Basic tile list setupPascalC++
// Basic tile list setup
procedure TForm1.FormCreate(Sender: TObject);
var
  itm: TTMSFNCTileListItem;
  I: Integer;
begin
  TMSFNCTileList1.BeginUpdate;
  TMSFNCTileList1.Items.Clear;
  TMSFNCTileList1.Rows    := 2;
  TMSFNCTileList1.Columns := 4;

  for I := 1 to 8 do
  begin
    itm             := TMSFNCTileList1.Items.Add;
    itm.Title       := 'Tile ' + IntToStr(I);
    itm.Description := 'Description ' + IntToStr(I);
  end;
  TMSFNCTileList1.EndUpdate;
end;

// Selection
TMSFNCTileList1.SelectItem(3);
TMSFNCTileList1.MultiSelect := True;
TMSFNCTileList1.SelectItems([0, 2, 4]);
TMSFNCTileList1.SelectItemsBetween(1, 5);
TMSFNCTileList1.DeselectAllItems;

// Filtering
TMSFNCTileList1.ApplyFilter('Tile 1');
TMSFNCTileList1.ClearFilter;

// React to selection
procedure TForm1.TMSFNCTileList1ItemSelected(Sender: TObject;
  AItemIndex: Integer);
begin
  ShowMessage('Selected: ' + TMSFNCTileList1.Items[AItemIndex].Title);
end;

// Custom background colour per tile
procedure TForm1.TMSFNCTileList1BeforeDrawItemBackground(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ARect: TRectF; AItemIndex: Integer;
  var ADefaultDraw: Boolean);
begin
  case AItemIndex mod 3 of
    0: AGraphics.Fill.Color := gcPowderblue;
    1: AGraphics.Fill.Color := gcSkyblue;
    2: AGraphics.Fill.Color := gcCornflowerblue;
  end;
end;

// Basic tile list setup
void __fastcall TForm1::FormCreate(TObject *Sender)
{
  TTMSFNCTileListItem *itm;
  TMSFNCTileList1->BeginUpdate();
  TMSFNCTileList1->Items->Clear();
  TMSFNCTileList1->Rows    = 2;
  TMSFNCTileList1->Columns = 4;

  for (int I = 1; I <= 8; I++)
  {
    itm             = TMSFNCTileList1->Items->Add();
    itm->Title       = "Tile " + IntToStr(I);
    itm->Description = "Description " + IntToStr(I);
  }
  TMSFNCTileList1->EndUpdate();
}

// Selection and filtering
void __fastcall TForm1::TileListOperations()
{
  // Selection
  TMSFNCTileList1->SelectItem(3);
  TMSFNCTileList1->MultiSelect = true;
  int selected[] = {0, 2, 4};
  TMSFNCTileList1->SelectItems(selected, 2);
  TMSFNCTileList1->SelectItemsBetween(1, 5);
  TMSFNCTileList1->DeselectAllItems();

  // Filtering
  TMSFNCTileList1->ApplyFilter("Tile 1");
  TMSFNCTileList1->ClearFilter();
}

// React to selection
void __fastcall TForm1::TMSFNCTileList1ItemSelected(TObject *Sender,
  int AItemIndex)
{
  ShowMessage("Selected: " + TMSFNCTileList1->Items->Items[AItemIndex]->Title);
}

// Custom background colour per tile
void __fastcall TForm1::TMSFNCTileList1BeforeDrawItemBackground(TObject *Sender,
  TTMSFNCGraphics *AGraphics, const TRectF &ARect, int AItemIndex,
  bool &ADefaultDraw)
{
  switch (AItemIndex % 3)
  {
    case 0: AGraphics->Fill->Color = gcPowderblue; break;
    case 1: AGraphics->Fill->Color = gcSkyblue; break;
    case 2: AGraphics->Fill->Color = gcCornflowerblue; break;
  }
}

Each tile item has:

Property Description
Title Title text — always top-aligned when set. Height is TitleHeight.
Description Remaining text area.
Control TControl placed inside the tile (position controlled by ControlPosition).
Image Bitmap or image reference. Position/size set via ImagePosition, ImageWidth, ImageHeight.
RowSpan / ColSpan How many rows/columns this tile spans.

NavigationMode controls how the tile list paginates:

Value Behaviour
tlnmPage One full page visible at a time. Navigation arrows move page by page.
tlnmScroll Continuous scroll bar.
Navigation modesPascalC++
TMSFNCTileList1.NavigationMode := tlnmPage;
TMSFNCTileList1.GoToPage(2);
TMSFNCTileList1.NextPage;
TMSFNCTileList1.PreviousPage;
TMSFNCTileList1.FirstPage;
TMSFNCTileList1.LastPage;

TMSFNCTileList1->NavigationMode = tlnmPage;
TMSFNCTileList1->GoToPage(2);
TMSFNCTileList1->NextPage();
TMSFNCTileList1->PreviousPage();
TMSFNCTileList1->FirstPage();
TMSFNCTileList1->LastPage();
TTMSFNCTileList with scroll navigation mode

Orientation

Orientation switches between horizontal pages and vertical pages:

OrientationPascalC++
TMSFNCTileList1.Orientation := tloVertical;   // or tloHorizontal (default)

TMSFNCTileList1->Orientation = TTMSFNCTileListOrientation::tloVertical;   // or TTMSFNCTileListOrientation::tloHorizontal (default)
TTMSFNCTileList with vertical orientation

Tile reordering

Enable drag-to-reorder via ReorderMode:

Mode Description
rmNone Dragging disabled (default).
rmRearrange Dragged tile is inserted at the drop position; others shift around.
rmShift Tiles between origin and destination shift toward the origin.
rmSwap Dragged tile swaps with the tile at the drop position.
Tile reorderingPascalC++
TMSFNCTileList1.ReorderMode := rmSwap;

TMSFNCTileList1->ReorderMode = rmSwap;

Selection

SelectionPascalC++
TMSFNCTileList1.SelectItem(3);
TMSFNCTileList1.MultiSelect := True;
TMSFNCTileList1.SelectItems([0, 2, 4]);
TMSFNCTileList1.SelectItemsBetween(0, 5);
TMSFNCTileList1.DeselectAllItems;

TMSFNCTileList1->SelectItem(3);
TMSFNCTileList1->MultiSelect = true;
int selected[] = {0, 2, 4};
TMSFNCTileList1->SelectItems(selected, 2);
TMSFNCTileList1->SelectItemsBetween(0, 5);
TMSFNCTileList1->DeselectAllItems();

Custom drawing

Override per-tile background or content with draw events:

Custom drawingPascalC++
procedure TForm1.TMSFNCTileList1BeforeDrawItemBackground(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ARect: TRectF; AItemIndex: Integer;
  var ADefaultDraw: Boolean);
begin
  case AItemIndex mod 3 of
    0: AGraphics.Fill.Color := gcPowderblue;
    1: AGraphics.Fill.Color := gcSkyblue;
    2: AGraphics.Fill.Color := gcCornflowerblue;
  end;
end;

void __fastcall TForm1::TMSFNCTileList1BeforeDrawItemBackground(TObject *Sender,
  TTMSFNCGraphics *AGraphics, const TRectF &ARect, int AItemIndex,
  bool &ADefaultDraw)
{
  switch (AItemIndex % 3)
  {
    case 0: AGraphics->Fill->Color = gcPowderblue; break;
    case 1: AGraphics->Fill->Color = gcSkyblue; break;
    case 2: AGraphics->Fill->Color = gcCornflowerblue; break;
  }
}
Tiles with different background colours per index

For more complex rendering, implement a custom visualizer by subclassing TTMSFNCTileListVisualizer and assigning it to TTMSFNCTileList.Visualizer (all tiles) or TTMSFNCTileListItem.Visualizer (one tile).

Filtering

FilteringPascalC++
TMSFNCTileList1.Filtering := tlfAny;       // match anywhere in title
// TMSFNCTileList1.Filtering := tlfStart;  // match start of title
TMSFNCTileList1.ApplyFilter('Tile 1');
TMSFNCTileList1.ClearFilter;

TMSFNCTileList1->Filtering = tlfAny;       // match anywhere in title
// TMSFNCTileList1->Filtering = tlfStart;  // match start of title
TMSFNCTileList1->ApplyFilter("Tile 1");
TMSFNCTileList1->ClearFilter();

Combining layout, reordering, selection and filtering

The tile list features are designed to be mixed. Rows and columns define how many tiles fit on a page, page navigation lets users browse the rest, reordering lets them arrange tiles by dragging, and selection and filtering help them find and mark what matters. Use the combination for dashboards, launchers or galleries with more tiles than fit on screen, where users personalise the order and narrow the list down by text. The sample creates twelve tiles in a paged 2 by 3 grid with swap reordering, selects the fourth tile and applies a text filter.

Combine layout, navigation, reordering, selection and filteringPascalC++
uses
  System.SysUtils, FMX.TMSFNCTileList;

procedure TForm1.SetupTilesCombined;
var
  itm: TTMSFNCTileListItem;
  I: Integer;
begin
  TMSFNCTileList1.BeginUpdate;
  TMSFNCTileList1.Items.Clear;

  // Grid layout, page navigation and drag-to-reorder
  TMSFNCTileList1.Rows := 2;
  TMSFNCTileList1.Columns := 3;
  TMSFNCTileList1.NavigationMode := tlnmPage;
  TMSFNCTileList1.ReorderMode := rmSwap;

  for I := 1 to 12 do
  begin
    itm := TMSFNCTileList1.Items.Add;
    itm.Title := 'Tile ' + IntToStr(I);
    itm.Description := 'Description ' + IntToStr(I);
  end;
  TMSFNCTileList1.EndUpdate;

  // Select a tile, then narrow the list down by text
  TMSFNCTileList1.SelectItem(3);
  TMSFNCTileList1.ApplyFilter('Tile 1');
end;

void __fastcall TForm1::SetupTilesCombined()
{
  TMSFNCTileList1->BeginUpdate();
  TMSFNCTileList1->Items->Clear();

  // Grid layout, page navigation and drag-to-reorder
  TMSFNCTileList1->Rows = 2;
  TMSFNCTileList1->Columns = 3;
  TMSFNCTileList1->NavigationMode = tlnmPage;
  TMSFNCTileList1->ReorderMode = rmSwap;

  for (int I = 1; I <= 12; I++)
  {
    TTMSFNCTileListItem *itm = TMSFNCTileList1->Items->Add();
    itm->Title = "Tile " + IntToStr(I);
    itm->Description = "Description " + IntToStr(I);
  }
  TMSFNCTileList1->EndUpdate();

  // Select a tile, then narrow the list down by text
  TMSFNCTileList1->SelectItem(3);
  TMSFNCTileList1->ApplyFilter("Tile 1");
}

See also