Documents
NextGrid & NextDBGrid
- Html Column Tutorial
- Upgrade existing projects for loading changes
- Edit events in NextGrid
- NextGrid Vista Style
- NextGrid How To
- Integrating Inplace Editors
- NextGrid Slide Style Tutorial
- InputLine Tutorial
- Using Editors in runtime
- FieldChooser Tutorial
- Grid Report Tutorial
NextGrid
- TreeColumn Tutorial
- NextGrid Quick Start
- Custom Draw in NextGrid
- Export to XML from NextGrid
- Optimize NextGrid
- NextGrid Custom Sorting
- VirtualColumn Tutorial
- Graphic Column Tutorial
NextDBGrid
- NextDBGrid Quick Start
- NextDBGrid Events
- NextDBGrid How To
- Sorting records in NextDBGrid
- LookupColumn Tutorial
NextInspector
- ToolbarItem tutorial
- NextInspector Advanced tutorial
- NextDBInspector Tutorial
- NextInspector Item Types
- Map VCL property to item
- NextInspector Quick Start
NextSheet
NextCollection
- NxAlertWindow Tutorial
- NxInfoPanel Tutorial
- Vista Styled Panels
- NxPathControl and NxNotebook tutorial
- NxPathControl Quick Start
- NxFlipPanel and NxHeaderPanel Quick Start
- NxOutlookBar Tutorial
- NxPageControl and NxNotebook Quick Start
- NxButton Tutorial
Misc
- Component Names Change
- NxComboBox styles
- Numeric FormatMask
- NxVirtualDataSet tutorial
- DateTime FormatMask
- NxPreview Quick Start
- Quick update
- 32bit Bitmaps Tutorial
- Enable typing unicode characters in InplaceEditors
- Using NxColorScheme
- NxProgress Tutorial
- NxAutoCompletion Tutorial
Labs
NextGrid .NET
NxPageControl and NxNotebook Quick Start
Related Articles:
Info
- Skill:
- Version: 1.0.0
- Author: Bojan Nikolic
- Created:
- Updated: 2008-05-19
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

If you like to use NxPageControl, click on

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:
var NewPage: TNxTabSheet; begin NewPage := TNxTabSheet.Create(Self); NewPage.Caption := 'New Page'; NxPageControl1.AddPage(NewPage); end;
When page is added it may be accessed via Pages array property. Example:
ShowMessage(NxPageControl1.Pages[0].Caption);
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:
NxPageControl1.DeletePage(NxPageControl1.Pages[0]);
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 |
---|---|
tsClassic | ![]() |
tsFlat | ![]() |
tsOneNote | ![]() |
tsWhidbey | ![]() |
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.
Comments
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" !
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
Hello,
It may be that component is not properly installed. There must be this item from component drop-down menu.
Best regards
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
Hello,
how to get a tab popup menu (like Eclipse, Close, Close other, Close all atc)?
how to get a tab popup menu (like Eclipse, Close, Close other, Close all atc)?
2009-03-13 13:12:35
Hi,
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
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