Pages and animation

TTMSFNCPageSlider arranges a set of pages in a horizontal strip and lets users move between them by swiping, pressing arrow keys, or calling navigation methods. Each page is a TTMSFNCPageSliderContainer that owns an optional header and footer and can host any child controls.

Adding and removing pages

Call AddPage to append a new page at runtime. The overloaded form accepts separate caption strings for the header and footer:

// Header caption only
TMSFNCPageSlider1.AddPage('Overview');

// Header and footer captions
TMSFNCPageSlider1.AddPage('Details', 'Step 2 of 3');

// Blank page with no header or footer text
TMSFNCPageSlider1.AddSimplePage;

AddPage returns the new TTMSFNCPageSliderContainer so you can configure it immediately:

var
  Page: TTMSFNCPageSliderContainer;
begin
  TMSFNCPageSlider1.BeginUpdate;
  try
    Page := TMSFNCPageSlider1.AddPage('Welcome');
    Page.Header.Size := 48;

    TMSFNCPageSlider1.AddPage('Details', 'Step 2 of 3');
    TMSFNCPageSlider1.AddPage('Summary', 'Step 3 of 3');

    TMSFNCPageSlider1.ActivePageIndex := 0;
  finally
    TMSFNCPageSlider1.EndUpdate;
  end;
end;

Remove a page by index with RemovePage(AIndex). Reorder pages with MovePage(AFromPageIndex, AToPageIndex).

Navigating between pages

Set ActivePageIndex to jump directly to any page. Use NextPage and PreviousPage for sequential navigation:

TMSFNCPageSlider1.ActivePageIndex := 0;    // go to the first page
TMSFNCPageSlider1.NextPage;                // advance one page
TMSFNCPageSlider1.PreviousPage;            // go back one page

PageCount returns the total number of pages. FindNextPage returns the index of the next page without navigating.

When KeyboardInteraction is True (the default), the left and right arrow keys also move between pages.

Scroll animation

By default AnimateScroll is True and page transitions use a smooth slide. Set AnimationFactor to control the speed — higher values produce a faster transition:

TMSFNCPageSlider1.AnimateScroll := True;
TMSFNCPageSlider1.AnimationFactor := 8;  // 1 = slowest, higher = faster

To disable animation and switch pages instantly:

TMSFNCPageSlider1.AnimateScroll := False;

Page headers and footers

Each TTMSFNCPageSliderContainer has a Header and a Footer of type TTMSFNCPageSliderContainerHeaderFooter. Both are visible by default; hide the footer when you only need a title bar:

var
  Page: TTMSFNCPageSliderContainer;
begin
  Page := TMSFNCPageSlider1.AddPage('Summary');
  Page.Header.Text := 'Order summary';
  Page.Header.Size := 56;
  Page.Header.Font.Size := 16;
  Page.Footer.Visible := False;
end;

Fill and Stroke on each element control background colour and border.

Minimum page width

MinimumWidth on a TTMSFNCPageSliderContainer (default 200) sets the smallest width that page will occupy. Increase it when a page hosts content that requires a wider layout:

Page.MinimumWidth := 360;

Page-change events

OnPageChanging fires before the active page changes and lets you cancel the transition by setting AAllowChange to False. OnPageChange fires after the transition completes. OnPageMoved fires when MovePage reorders pages:

// Intercept a page change — for example to validate the current page
procedure TForm1.TMSFNCPageSlider1PageChanging(Sender: TObject;
  AFromPos, AToPos: Integer; var AAllowChange: Boolean);
begin
  // Prevent moving forward if the current page has unsaved data
  if (AToPos > AFromPos) and not PageIsValid(AFromPos) then
    AAllowChange := False;
end;

// React after the active page has changed
procedure TForm1.TMSFNCPageSlider1PageChange(Sender: TObject);
begin
  UpdateStepIndicator(TMSFNCPageSlider1.ActivePageIndex);
end;

Combining pages, validation, and animation

The example below builds a three-step wizard. OnPageChanging blocks forward navigation if the current step fails validation; OnPageChange updates an external step indicator and button states:

// Build a three-step wizard with validation guards and styled headers
procedure TForm1.FormCreate(Sender: TObject);
var
  Page: TTMSFNCPageSliderContainer;
begin
  with TMSFNCPageSlider1 do
  begin
    BeginUpdate;
    try
      AnimateScroll := True;
      AnimationFactor := 6;
      KeyboardInteraction := False; // wizard controls navigation explicitly

      Page := AddPage('Personal details', 'Step 1 of 3');
      Page.Header.Size := 52;
      Page.MinimumWidth := 320;

      Page := AddPage('Address', 'Step 2 of 3');
      Page.Header.Size := 52;
      Page.MinimumWidth := 320;

      Page := AddPage('Confirmation', 'Step 3 of 3');
      Page.Header.Size := 52;
      Page.MinimumWidth := 320;

      ActivePageIndex := 0;
    finally
      EndUpdate;
    end;
  end;
end;

// Next-button click — validate before advancing
procedure TForm1.BtnNextClick(Sender: TObject);
begin
  if ValidateStep(TMSFNCPageSlider1.ActivePageIndex) then
    TMSFNCPageSlider1.NextPage;
end;

// Prevent swipe-based navigation past unvalidated steps
procedure TForm1.TMSFNCPageSlider1PageChanging(Sender: TObject;
  AFromPos, AToPos: Integer; var AAllowChange: Boolean);
begin
  if (AToPos > AFromPos) and not ValidateStep(AFromPos) then
    AAllowChange := False;
end;

// Update the external step-indicator after every page transition
procedure TForm1.TMSFNCPageSlider1PageChange(Sender: TObject);
var
  Idx: Integer;
begin
  Idx := TMSFNCPageSlider1.ActivePageIndex;
  StepLabel.Text := Format('Step %d of %d', [Idx + 1,
    TMSFNCPageSlider1.PageCount]);
  BtnBack.Enabled := Idx > 0;
  BtnNext.Enabled := Idx < TMSFNCPageSlider1.PageCount - 1;
  BtnFinish.Visible := Idx = TMSFNCPageSlider1.PageCount - 1;
end;

Table of Contents