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;
// 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;
TTMSFNCPageSliderContainer *Page;
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();
}
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
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
TMSFNCPageSlider1->AnimateScroll = true;
TMSFNCPageSlider1->AnimationFactor = 8; // 1 = slowest, higher = faster
To disable animation and switch pages instantly:
TMSFNCPageSlider1.AnimateScroll := False;
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;
TTMSFNCPageSliderContainer *Page = TMSFNCPageSlider1->AddPage("Summary");
Page->Header->Text = "Order summary";
Page->Header->Size = 56;
Page->Header->Font->Size = 16;
Page->Footer->Visible = false;
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->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;
// Intercept a page change - for example to validate the current page
void __fastcall TForm1::TMSFNCPageSlider1PageChanging(TObject *Sender,
int AFromPos, int AToPos, bool &AAllowChange)
{
// Prevent moving forward if the current page has unsaved data
if ((AToPos > AFromPos) && !PageIsValid(AFromPos))
AAllowChange = false;
}
// React after the active page has changed
void __fastcall TForm1::TMSFNCPageSlider1PageChange(TObject *Sender)
{
UpdateStepIndicator(TMSFNCPageSlider1->ActivePageIndex);
}
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;
// Build a three-step wizard with validation guards and styled headers
void __fastcall TForm1::FormCreate(TObject *Sender)
{
TTMSFNCPageSliderContainer *Page;
TTMSFNCPageSlider *s = TMSFNCPageSlider1;
s->BeginUpdate();
try
{
s->AnimateScroll = true;
s->AnimationFactor = 6;
s->KeyboardInteraction = false; // wizard controls navigation explicitly
Page = s->AddPage("Personal details", "Step 1 of 3");
Page->Header->Size = 52;
Page->MinimumWidth = 320;
Page = s->AddPage("Address", "Step 2 of 3");
Page->Header->Size = 52;
Page->MinimumWidth = 320;
Page = s->AddPage("Confirmation", "Step 3 of 3");
Page->Header->Size = 52;
Page->MinimumWidth = 320;
s->ActivePageIndex = 0;
}
__finally
{
s->EndUpdate();
}
}
// Next-button click - validate before advancing
void __fastcall TForm1::BtnNextClick(TObject *Sender)
{
if (ValidateStep(TMSFNCPageSlider1->ActivePageIndex))
TMSFNCPageSlider1->NextPage();
}
// Prevent swipe-based navigation past unvalidated steps
void __fastcall TForm1::TMSFNCPageSlider1PageChanging(TObject *Sender,
int AFromPos, int AToPos, bool &AAllowChange)
{
if ((AToPos > AFromPos) && !ValidateStep(AFromPos))
AAllowChange = false;
}
// Update the external step-indicator after every page transition
void __fastcall TForm1::TMSFNCPageSlider1PageChange(TObject *Sender)
{
int Idx = TMSFNCPageSlider1->ActivePageIndex;
StepLabel->Text = Format("Step %d of %d", ARRAYOFCONST((Idx + 1,
TMSFNCPageSlider1->PageCount)));
BtnBack->Enabled = Idx > 0;
BtnNext->Enabled = Idx < TMSFNCPageSlider1->PageCount - 1;
BtnFinish->Visible = Idx == TMSFNCPageSlider1->PageCount - 1;
}