TMSFNCTileList

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.

Header and footer

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.

Navigation mode

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.

Orientation

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.

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);
var
  itm: TTMSFNCTileListItem;
  I: Integer;
begin
  TMSFNCTileList1.BeginUpdate;
  TMSFNCTileList1.Items.Clear;
  for I := 1 to 10 do
  begin
    itm := TMSFNCTileList1.Items.Add;
    itm.Title := 'Title ' + IntToStr(I);
    itm.Description := 'Description ' + IntToStr(I);
  end;
  TMSFNCTileList1.EndUpdate;
end;

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);
begin
  TMSFNCTileList1.SelectItem(3);
end;

Tile settings

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

Basics

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);
begin
  case AItemIndex of
    0, 1, 2: AGraphics.Fill.Color := gcPowderblue;
    3, 4, 5: AGraphics.Fill.Color := gcSkyblue;
    6, 7, 8: AGraphics.Fill.Color := gcCornflowerblue;
  end;
end;

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);
begin
  ADefaultDraw := False;
  //Do custom content drawing with AGraphics, ARect and Items[AItemIndex]
end;

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

Properties

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.

Methods

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.

Events

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.