Skip to content


TTMSFNCPageSlider is a drill down page control that holds and animates multiple pages sliding from left to right and vice versa as drill down is happening. Pages can hold any controls.

Add a new page

Adding a new page at design time can be done by right-clicking the component and choosing “New page” from the context menu.

To create a new page at runtime the following code can be used:

procedure TForm1.Button1Click(Sender: TObject);
  pc: TTMSFNCPageSliderContainer;
  TMSFNCPageSlider1.AddPage('Header text');
  TMSFNCPageSlider1.AddPage('Header text 2');
  pc := TMSFNCPageSlider1.AddPage('Header text 3');
  pc := TMSFNCPageSlider1.AddPage('Header text 3');
  pc.Header.Fill.Color := gcRed;

procedure TForm1.Button2Click(Sender: TObject);
  pc: TTMSFNCPageSliderContainer;
  pc := TMSFNCPageSlider1.Pages.Add.Container;
  pc.Header.Text := 'Header text';

Renove a page

Removing an existing page at design time can be done by right-clicking the component and choosing “Remove page” from the context menu.

To remove a page at runtime, you can use the RemovePage method:

procedure TForm1.Button1Click(Sender: TObject);
  TMSFNCPageSlider1.RemovePage(0); //0 = index of page to be removed

Pages slide in from the right and are animated. To change a page simply set the ActivePageIndex to the correct page. You will notice that pages with an index that occur before the ActivePageIndex will automatically slide along the active Page.

Navigation through pages can also be done with the keyboard and the mouse. Click on a page and slide it from right to left to increase the ActivePageIndex or vice versa to decrease. This all happens with animation that can optionally be set faster or slower or be turned off with the AnimationFactor property. The scrolling animation can also be disabled via the AnimateScroll property.

When a page is active, you will notice that the page leaves a minimum amount of width to the left, this is necessary to interact with and show the previous page. This is set with the MinimumWidth property.


Property name Description
ActivePage The page control that is currently active.
ActivePageIndex: Integer The index of the page that is currently active. This property is used to switch between pages at designtime and runtime.
AnimateScroll: Boolean
AnimationFactor: Integer The speed of the animation, the higher the factor the slower the animation.
Footer Footer settings for a page.
Header Header settings for a page.
KeyboardInteraction: Boolean Enables the keyboard interaction.
PageContainers A collection of the available page controls.
PageCount: Integer Returns the page count.


Method name Description
AddPage(APageCaption: string): TTMSFNCPageSliderContainer Adds a new page with APageCaption as the Header text.
FindNextPage(ACurPage: TTMSFNCPageSliderContainer; AGoForward: Boolean): TTMSFNCPageSliderContainer Returns the next page control relative to ACurPage.
IndexOfPage(APage: TTMSFNCPageSliderContainer): Integer Returns the index of a given page control.
MovePage(AFromPageIndex, AToPageIndex: Integer) Moves a page from AFromPageIndex to AToPageIndex.
NextPage Navigates to the next page.
PreviousPage Navigates to the previous page.
RemovePage(AIndex: Integer) Removes a page at AIndex.


Event name Description
OnFooterAnchorClick Event called when an anchor is clicked in the footer.
OnHeaderAnchorClick Event called when an anchor is clicked in the header.
OnPageChange Event called when a page has changed.
OnPageChanging Event called when a page is about to change. With this event page changing can be blocked with the AllowChange parameter.
OnPageMoved Event triggered when a page is moved to another page index.