NextGrid & NextDBGrid








NextGrid .NET

NxPageControl and NxNotebook Quick Start

Related Articles:

  • Skill:
  • Version: 1.0.0
  • Author: Bojan Nikolic
  • Created:
  • Updated: 2008-05-19
In this article we will explain how to work with NxNotebook and NxPageControl.

1. Introduction

Both components are descendants from same ascendant class and share most of common properties (such as ActivePage property, or Pages property), but appearance is different.

1.1. NxNotebook

NxNotebook component is very similar to component Noteook from Delphi but it provide much better control of pages (with design-time pages buttons) and much less bugs.

It is ideal for making Wizard styles dialogs, page-based user interface... In design-time there are also buttons for changing pages easily.

1.2. NxPageControl

NxPageControl introduce Tab-s, on the top or on the bottom of the component. User may click on Tab and change the active page in run and design time very easy.

2. Placing components on form

Click on NxNotebook icon within "Next Collection" Palette (Category) within Components (Tool) Palette.

If you like to use NxPageControl, click on icon.

Click on form and component will be placed and ready to use.

3. Adding new page

To add new page in design-time, right click on component and choose the item "New Page".

If you want a few new pages, repeat the same procedure as many times you need.

To add new page in run-time use AddPage method. Example:

  NewPage: TNxTabSheet;
  NewPage := TNxTabSheet.Create(Self);
  NewPage.Caption := 'New Page';

When page is added it may be accessed via Pages array property. Example:


4. Deleting active page

To delete page in design-time right click on component and choose the option "Delete Page". You may also click on page to select it and then press "Delete" ("Del") key on keyboard.

In run-time, DeletePage method need to be used. Example:


5. Changing the active page

To change the active page in design-time everything you need to simply click on component, and then from property ActivePage choose one of pages from the list.

Every page is TNxTabSheet class descendant.

Active Page may be also changed with using ActivePageIndex property. After setting this property, page with specified Page Index will become active.

Changing the active page for NxPageControl component is possible on by clicking directly on tab.

In run-time, page may be changed by setting ActivePage

NxPageControl1.ActivePage := NxTabSheet3;

NxPageControl1->ActivePage = *NxTabSheet3;

or ActivePageIndex property

NxPageControl1.ActivePageIndex := 2;

NxPageControl1->ActivePageIndex = 2;

6. Changing a position of Tab

If you want to change a Tab position you need to click on NxPageControl component, and then, from TabPosition property choose one of the options.

This property may have 2 values:

1. tpTop - Tabs will be placed on top of control:

2. tpBottom - Tabs will be placed on bottom of control:

7. Customizing NxPageControl

Now, we will explain some of the most important properties of NxPageControl component.

1. If you want to change the color of Tab, then you can choose one of the 2 options of AdaptiveColors property:

1) True - the color will be same like in Windows or

2) False - then you can choose the color from the TabColor property.

2. If you want to change the color in header of the component, then you will do that by setting BackgroundColor property.

3. If you want to change a kind of header on the active page, then you can do that by simple click on BackgroundKind property, and choose one of the options.

This property has 4 options:

1) bkSolid

2) bkHorzGradient

3) bkVertGradient

4) bkInveseVertGradient

4. If you want to restrict the “child components” inside the panel, then you can do that by simple click on Margin property, and then, set the value.

5. If you want to hide or show Tab, then you can use ShowTabs property:

1) True – show tabs
2) False – hide tabs.

6. If you want to change the Tab height, then you can do that work by simple click on TabHeight property.

7. If you want to change the Tab style, then you can choose one of the options from TabStyle property.
This property has 4 options:

Name Example

8. Now, we will learn something about Options property. With this property you can additionaly customize the component.

This property has 5 options:

pgAlwaysShowTabsRect - Show/Hide Tabs Rect even if there is no tabs in PageControl

pgBoldActiveTab - Bold text on Active Tab

pgCloseButton - Show/Hide Close Button

pgScrollButtons - Show/Hide Scroll Buttons

pgTabsPopup - Show/Hide button with pop-up menu which may be used for changing active page.

pgTopBorder - Show/Hide Top Border line

8. Customizing page

1. If you want to make active tab visible or unvisible, then you must choose one of the options: 1) true or 2) false from PageVisible property.

2. If you want to display some glyph on Tab, then you can do that work with with simple click on Glyph property, and then, in Picture Editor choose Load, and choose a picture what you need.

Glyph could be and from ImageList, whose stick for the main component (Images property).

The glyph could be display from Glyph property, ImageList, or will be display TextOnly, and that depence from the value in DisplayMode property.

1) tdGlyph – the picture could be display from the Glyph property. If the Glyph property is empty, then the picture should be not displayed.

2) tdTextOnly – if you choose the TextOnly option from DisplayMode property, then the Tab will display the text only, ignored by picture.

3) tdImageIndex – Image will be taken from ImageList with index specified in ImageIndex property of TabSheet:

9. Methods and Events

9.1. Methods

MakeVisible(Index: Integer) - Scroll tabs to the tab with specified Index.

ScrollTabs(Delta: Integer) - Scroll tabs by specified amount of pixels.

9.2. Events

OnChange - Occur when ActivePage property is changed.

OnChanging - Occur when user try to change ActivePage. This event have PageIndex parameter which indicate new ActivePage (by clicking on tab, or within code). If parameter AllowChange is set to False, changing will be canceled.

OnPageClose - Occur when user click on close button. Closing page may be canceled with setting parameter Accept to False.

Was This Article Useful?


2008-05-15 05:00:32

NxPageControl problem:

1. place the component on form - OK
2. add a new page, by right click on component, and choose the option "New Page". - I don't have option "New Page" !

2008-05-15 08:13:56


It may be that component is not properly installed. There must be this item from component drop-down menu.

Best regards

2009-03-13 12:16:46


how to get a tab popup menu (like Eclipse, Close, Close other, Close all atc)?

2009-03-13 13:12:35


Unfortunatellly, this is not possible at the moment, but I will see to add one button and name it Custom. In this button user will be able to put any code.

Best regards
Only constructive comments, code contributions... will be publishes. Questions, non-official discussion will not be published.