Skip to content


TTMSFNCTileList is a visual control to show customizable tiles in various layouts. It allows vetical and horizontal navigation, as well as different navigation modes and optional tile rearrangement by dragging.

TileList configuration

Rows and columns

The TTMSFNCTileList has a layout defined by Rows and Columns. The default value for Rows and Columns is set to 3. It can also be used to create a layout with a single row or column.

TTMSNFCTileList default

In TTMSFNCTileList the Header and Footer is optional and both are visible by default. The Header and Footer can be separately cusomized via their Fill and Stroke properties. Both allow further customization of their left and right arrows via the ArrowLeft and ArrowRight properties.

TTMSFNCTileList has a NavigationMode property that allows two navigation modes: pagination and scrolling.

When the navigation mode is set to tlnmPage, always one page is visible at a time. If it's set to tlmnScroll, a scroll bar will appear and allows a more continuous look at the list.

TTMSNFCTileList scrolling


The TTMSFNCTileList.Orientation property allows switching between a vertical and horizontal navigation. By switching the orientation mode, the position of the header/footer and scrollbar changes as well.

TTMSNFCTileList vertical orientation

Dragging items

The tiles in TTMSFNCTileList can be optionally dragged to a new position. By default this behavior is disabled. To enable tile dragging, set the ReorderMode property to something else other than rmNone.

Reorder modes:

  • rmRearrange: The dragged tile is inserted to the index it has been dragged to. This can cause visible tile rearrangements if the tiles don't have the same row and column span.
  • rmShift: The tiles between the original position and the new position of the dragged tile will be shifted vertically or horizontally in the direction of the original position.
  • rmSwap: The dragged tile will swap places with the tile that is in its new position. The tiles between will not change their positions.

Adding tiles

Tiles to the TTMSFNCTileList can be added via the Items collection at designtime or programmatically.

procedure TForm1.FormCreate(Sender: TObject);
  itm: TTMSFNCTileListItem;
  I: Integer;
  for I := 1 to 10 do
    itm := TMSFNCTileList1.Items.Add;
    itm.Title := 'Title ' + IntToStr(I);
    itm.Description := 'Description ' + IntToStr(I);

Selecting tiles

Selecting a tile (or multiple tiles) can be either done via the mouse and keyboard interaction or programmatically.

Optionally, multi selection can be enabled by setting the MultiSelect property. Only when MultiSelect is enabled multiple items can be selected. With the mouse/keyboard the Ctrl key needs to be pressed for selecting multiple single items. If the Shift key is pressed, all items are selected between the last selected item and the newly selected item.

To select items programmatically, please refer to the selection and deselection methods from the Methods part below.

An example of selecting with SelectItem(AIndex: Integer):

procedure TForm1.Button1Click(Sender: TObject);

Tile settings

Each tile can be customized. Below you can see various ways to customize the look and feel of the tiles.


A uniform look is provided by the Appearance property. Via the Appearance property you can set the tile colors, badge colors, fonts and general spacing between the tiles.

In addition to the Appearance property, each tile item has it's own settings for some configurability: column and row spans, vertical and horizontal text alignment as well as image and control support.

Each tile is built up from the following elements:

  • Title: A string property to set the title of the tile. This is always top aligned if the value is set. The height is determined by the TitleHeight property.
  • Control: A TControl that is assigned to this property will be placed automatically in the tile area defined by the rectangle of the tile minus the Title area. If the ControlPosition is bottom it will use the ControlHeight property to calculate its rectangle. If it's left or right aligned it will use the ControlWidth property. If it's set to custom the ControlHeight and ControlWidth will both be applied as well as ControlLeft and ControlTop for custom positioning.
  • Image: The area for the image is defined by the title and control areas. Same as the Control, depending on the ImagePosition the ImageLeft, ImageTop, ImageWidth and ImageHeight will determine the area where the image will be painted.
  • Description: A string property that takes up the remainig space depending on the Title, Control and Image alignments.

Custom drawing and Visualizer

If you wish to customize a single tile or multiple tiles that is different from what the Appearance and the rest of the options provide, you can rely on the custom drawing events.

For example, giving tiles different colors:

procedure TForm1.TMSFNCTileList1BeforeDrawItemBackground(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ARect: TRectF; AItemIndex: Integer;
  var ADefaultDraw: Boolean);
  case AItemIndex of
    0, 1, 2: AGraphics.Fill.Color := gcPowderblue;
    3, 4, 5: AGraphics.Fill.Color := gcSkyblue;
    6, 7, 8: AGraphics.Fill.Color := gcCornflowerblue;

TTMSNFCTileList different background

It's also possible to skip the content drawing and do a custom drawing for each tile by overriding the OnBeforeDrawItemContent:

procedure TForm1.TMSFNCTileList1BeforeDrawItemContent(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ARect: TRectF; AItemIndex: Integer;
  var ADefaultDraw: Boolean);
  ADefaultDraw := False;
  //Do custom content drawing with AGraphics, ARect and Items[AItemIndex]

If a more complex tile rendering is needed or mouse events need to be handled per tile differently, you can implement your own visualizer by inheriting from TTMSFNCTileListVisualizer. It has various virtual methods that can be overriden to modify the default rendering and mouse events. Then the newly created visualizer can be assigned to either the TTMSFNCTileList.Visualizer property so that it applies to all tile items or it can also be assigned to a single tile item if needed by using the TTMSFNCTileListItem.Visualizer property.

Important methods, properties and events


Name Description
Appearance Various settings related to the tiles' look.
Columns Gets and sets the number of the columns of the tile list.
Filtering Gets and sets the filtering mode.
-tlfAny: Filter for results from any position in the title.
-tlStart: Filter for results from the start of the title string.
Footer Various settings related to the footer.
Header Various settings related to the header.
Items Collection of tile list items.
MultiSelect Allow or block multiselection.
NavigationMode Gets and sets the navigation mode.
Orientation Gets and sets the orientation.
PageCount Gets the page count.
PageIndex Gets and sets the page index.
ReorderMode Gets and sets the reordering mode.
Rows Get and set the number of the rows of the tile list.
SelectedItemIndex Gets the last selected item index.
Visualizer Gets and sets the custom visualizer for the tile list. If you want to set a visualizer for a given tile, you can do that by using the TTMSNFCTileListItem.Visualizer property.


Name Description
ApplyFilter(AFilter: string) Applies a filter to the tiles.
ClearFilter Clears the filter.
DeselectAllItems Deselects all tiles that can be deselected.
DeselectItem(AIndex: Integer) Deselects a tile if it can be deselected at AIndex.
FindTileIndexBy(ARow, AColumn: Integer): Integer Get the currently visible tile at the ARow and AColumn position.
FirstPage Navigates to the first page.
GoToPage(APageIndex: Integer) Navigates to APageIndex.
LastPage Navigates to the last page.
NextPage Navigates to the next page.
SelectAllItems Selects all tiles that can be selected.
SelectItem(AIndex: Integer) Selects a single tile at AIndex if it can be selected.
SelectItems(AIndexes: array of Integer) Selects multiple tiles determined by AIndexes. It will only work if MultiSelect is enabled.
SelectItemsBetween(AFromIndex, AToIndex: Integer) Selects all tiles that can be selected between AFromIndex and AToIndex. It will only work if MultiSelect is enabled.
PreviousPage Navigates to the previous page.
XYToItem(X, Y: Single): TTMSFNCTileListItem Gets the currently visible tile at X and Y coordinates.
XYToItemIndex(X, Y: Single): Integer Gets the index of the currently visible tile at X and Y coordinates.


Name Description
OnAfterDraw Event triggered after drawing the control is finished.
OnAfterDrawArrow Event triggered after the navigation arrow drawing is finished.
OnAfterDrawBadge Event triggered after the badge drawing is finished.
OnAfterDrawBullet Event triggered after the bullet drawing is finished.
OnAfterDrawFooter Event triggered after the footer drawing is finished.
OnAfterDrawHeader Event triggered after the header drawing is finished.
OnAfterDrawItemBackground Event triggered after the tile background drawing is finished.
OnAfterDrawItemContent Event triggered after the tile content drawing is finished.
OnAfterDrawItemControl Event triggered after the tile control drawing/positioning is finished.
OnAfterDrawItemDescription Event triggered after the tile description drawing is finished.
OnAfterDrawItemImage Event triggered after the tile image drawing is finished.
OnAfterDrawItemTitle Event triggered after the tile title drawing is finished.
OnBeforeDraw Event triggered before drawing the control.
OnBeforeDrawArrow Event triggered before drawing the navigation arrow.
OnBeforeDrawItemBackground Event triggered before drawing the tile background.
OnBeforeDrawBadge Event triggered before drawing the badge.
OnBeforeDrawBullet Event triggered before drawing the bullet.
OnBeforeDrawFooter Event triggered before drawing the footer.
OnBeforeDrawHeader Event triggered before drawing the header.
OnBeforeDrawItemContent Event triggered before drawing the tile content.
OnBeforeDrawItemControl Event triggered before drawing/positioning the tile control.
OnBeforeDrawItemDescription Event triggered before drawing the tile description.
OnBeforeDrawItemImage Event triggered before drawing the tile image.
OnBeforeDrawItemTitle Event triggered before drawing the tile title.
OnBulletClick Event triggered when a bullet is clicked.
OnFilter Event triggered on filtering to allow the filter to be modified before applying it.
OnItemAnchorClick Event triggered when an anchor is clicked.
OnItemClick Event triggered when a tile item is clicked.
OnItemDeselected Event triggered when a tile is deselected.
OnItemSelected Event triggered when a tile is selected.
OnNextPageClick Event triggered when the corresponding navigation arrow is clicked.
OnPreviousPageClick Event triggered when the corresponding navigation arrow is clicked.