TTMSFNCWXPDFThumbnailList

The TTMSFNCWXPDFThumbnailList component is a companion to TTMSFNCWXPDFViewer. It displays thumbnail images for every page in the loaded PDF and lets the user navigate by clicking a thumbnail. Assign the PDF viewer to its Viewer property and the component handles thumbnail generation and page synchronisation automatically.

Getting started

Drop a TTMSFNCWXPDFViewer and a TTMSFNCWXPDFThumbnailList on the same form. At design time the thumbnail list automatically detects a viewer on the same form and assigns it. At runtime, make the assignment explicitly:

procedure TForm1.FormCreate(Sender: TObject);
begin
  TMSFNCWXPDFThumbnailList1.Viewer := TMSFNCWXPDFViewer1;
end;

Once connected, load a PDF through the viewer. The thumbnail list listens to the viewer's OnLoaded, OnGenerateThumbnail, OnShowPage, and OnThumbnailProgress events internally and populates itself automatically.

procedure TForm1.Button1Click(Sender: TObject);
begin
  // Enable thumbnail generation before loading
  TMSFNCWXPDFViewer1.CalculateThumbnails := True;
  TMSFNCWXPDFViewer1.ThumbnailSize := 128;
  TMSFNCWXPDFViewer1.LoadFromFile('C:\Documents\report.pdf');
end;

Orientation

The list can scroll either vertically (default) or horizontally:

TMSFNCWXPDFThumbnailList1.Orientation := toVertical;   // default
TMSFNCWXPDFThumbnailList1.Orientation := toHorizontal;

The default component size is 200 × 500 pixels, which suits a vertical sidebar layout alongside the viewer.

Page label format

Each thumbnail shows a page label below the thumbnail image. The label text is controlled by Appearance.TextFormat, where %d is replaced with the 1-based page number:

TMSFNCWXPDFThumbnailList1.Appearance.TextFormat := 'Page %d';  // default
TMSFNCWXPDFThumbnailList1.Appearance.TextFormat := 'p.%d';

Handling item clicks

When the user clicks a thumbnail the viewer navigates to that page automatically. To respond to the click in code, handle OnItemClick or OnItemSelected:

procedure TForm1.TMSFNCWXPDFThumbnailList1ItemClick(Sender: TObject;
  AItemIndex: Integer);
begin
  // AItemIndex is 0-based; page number is AItemIndex + 1
  Label1.Caption := 'Page ' + IntToStr(AItemIndex + 1);
end;

Customising item appearance

The draw events allow you to paint over or replace any part of a thumbnail item. The item canvas is an TTMSFNCGraphics object.

procedure TForm1.TMSFNCWXPDFThumbnailList1ItemAfterDrawContent(
  Sender: TObject; AGraphics: TTMSFNCGraphics; ARect: TRectF;
  AItem: TTMSFNCCustomListItem; var ADefaultDraw: Boolean);
begin
  // Draw a custom overlay after the default bitmap is drawn
  AGraphics.DrawLine(PointF(ARect.Left, ARect.Top),
                     PointF(ARect.Right, ARect.Bottom));
end;

Properties

Property	Type	Default	Description
AntiAliasing	Boolean	True	Enables anti-aliased rendering of thumbnail images.
Appearance	TTMSFNCCustomListAppearance	—	Visual settings for items, including TextFormat ('Page %d') for page labels.
Items	TTMSFNCWXThumbnailListItems	—	Read-only collection of TTMSFNCWXThumbnailListItem objects. Populated automatically when a PDF is loaded.
Orientation	TTMSFNCCustomListOrientation	toVertical	Layout direction: toVertical (sidebar) or toHorizontal (filmstrip).
Version	string	—	Read-only. Component version string.
Viewer	TTMSFNCWXPDFViewer	nil	The linked PDF viewer. Assign to activate automatic thumbnail generation and page navigation.

TTMSFNCWXThumbnailListItem properties

Items in the Items collection are TTMSFNCWXThumbnailListItem objects. They are populated automatically and do not normally need to be modified directly.

Property	Type	Description
Bitmap	TTMSFNCBitmap	The thumbnail image for this page.
CanDeselect	Boolean	Whether the item can be deselected by clicking it again.
CanSelect	Boolean	Whether the item can be selected.
HorizontalTextAlign	TTMSFNCGraphicsTextAlign	Horizontal alignment of the page label text.
Text	string	The page label text (formatted from Appearance.TextFormat).
VerticalTextAlign	TTMSFNCGraphicsTextAlign	Vertical alignment of the page label text.

Events

Event	Description
OnAfterDraw	Fires after the entire list is drawn.
OnBeforeDraw	Fires before the entire list is drawn.
OnItemAfterDrawBackground	Fires after the background of each item is drawn.
OnItemAfterDrawContent	Fires after the thumbnail bitmap of each item is drawn.
OnItemAfterDrawText	Fires after the page label text of each item is drawn.
OnItemBeforeDrawBackground	Fires before the background of each item is drawn.
OnItemBeforeDrawContent	Fires before the thumbnail bitmap of each item is drawn.
OnItemBeforeDrawText	Fires before the page label text of each item is drawn.
OnItemClick	Fires when the user clicks a thumbnail item. Receives the 0-based item index.
OnItemSelected	Fires when a thumbnail item becomes selected.