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
• FieldChooser Tutorial
• Using Editors in runtime
• 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

• NextInspector Advanced tutorial
• ToolbarItem tutorial
• NextDBInspector Tutorial
• NextInspector Item Types
• Map VCL property to item
• NextInspector Quick Start

NextSheet

• NextSheet Sample Project
• NextSheet Quick Start
• Formating in NextSheet
• NextSheet Print Method

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
• 32bit Bitmaps Tutorial
• Quick update
• Enable typing unicode characters in InplaceEditors
• Using NxColorScheme
• NxProgress Tutorial
• NxAutoCompletion Tutorial

Labs

• NxReport Project

NextGrid .NET

• Working with tree
• Custom Drawing in NextGrid dot NET
• NextGrid Dot Net
• NextGrid Dot Net Events
• NextGrid dot NET Quick Start

Related Articles:

Click on Next Collection Tab/Category and chose icon . Click on Form and component will be placed. The NxOutlookBar on the Form looks like this:



Like you can notice, the NxOutlookBar is composed of three parts: the panel, the splitter and the toolbar. The panel can be used for placement of other components.

It is possible to change height for each part.

Use the SplitterHeight property (Specifies the vertical size of the splitter in pixels.) to read or change the height of the splitter and the ToolbarHeight property (Specifies the vertical size of the toolbar in pixels.) to read or change the height of the toolbar.

The height of the panel will change with the change of the vertical size of the component (Use the Height property to read or change the height of the component.).

The most important properties

The very beginning of the work with NxOutlookBar is the adding items.

Items – First of all, provides adding items in the NxOutlookBar and, later, accessing them in the order to add new, delete or rearrange existing or change theirs properties.

To add item, click on the ellipsis (…) of the Item property. It will open the window named Editing NxOutlookBar1.Items.



There are four buttons in this window but, in this moment, just the first one is enabled. To add item, click on the first button. It is possible to add as much items as you need to.

When the items are added and one of them is marked, the rest of the buttons becomes enabled too.



To delete item, mark it and click on the second button and to rearrange item, mark it and click on the third or the forth button.


Using the Item property it is possible to access the items to set their own properties:

Caption - Specifies a text string that identifies the item to the user.

Color – Determines the color of the item.

Note: This property have effect only when the AdaptiveColors property of the NxOutlookBar is set to False.

ImageIndex – Specifies the index of the image that appears on the item.

Note: To set this property it is necessary to create the Image list and to set the LargeImages property.

Click on Win32 Tab/Category and chose icon and click on Form to place the component. Double click on the ImageList placed on the Form will open the following window:



Use the Add button to add images to the Image List.



Every image has its index. 0 is the index of the first image, 1 is the index of the second one, and so on.

When the creating of the image list is ended, select NxOutlookBar and in the property select ImageList1.

Finally, enter the index of image that is associated with the item into the ImageIndex property.

Visible – Determines whether the item is visible. When Visible set to True, the item is visible. When Visible set to False, the item is not visible.

Note: The added items will not be visible on the NxOutlookBar until the DisplayCount property is set.


DisplayCount - Specifies the number of items that are visible on the NxOutlookBar.

For example, when the DisplayCount property is set to 4, the NxOutlookBar looks like this:




ItemIndex - Indicates which item in the group is currently selected.

ItemIndex holds the index of the selected item from the items specified in the Item property. (The first item is 0.) The value of ItemIndex changes at runtime as the user selects items. If you want one of the items to appear selected when the application starts, assign that item to ItemIndex at design time; otherwise, leave ItemIndex set to the default value of -1, which means that no item is selected.

For example, when the ItemIndex property is set to 2, the NxOutlookBar looks like this:

The other properties that have an effect on the items

ItemHeigh - Specifies the vertical size of the buttons (items) in pixels.


TextIndent - Specifies the distance, in pixels, between the beginning of the button (item) and the text specified in the Caption property.


LargeImages - Provides a list of icon images to display for each item in the list when the value assigned in the DisplayCount property is equal to the total number of items.

Note: This property is already explained within ItemIndex property.


SmallImages - Provides a list of icon images to display for each item in the list when the value assigned in the DisplayCount property is smaller than the total number of items.

Note: You can use the same Image list that is used to set LargeImages property.

For example, when the total number of items is 4 and the DisplayCount property is 2 and in the SmallImages property is selected the ImageList1, the NxOutlookBar looks like this:

The common properties

Align - Determines how the component aligns within its container (parent control).

When Align is set to alBottom, alLeft, alRight or alTop, the component is align to the bottom, left, right or top of a form and have it remain there even if the size of the form or component that contains the NxOutlookBar changes. When the parent is resized, an aligned component also resizes so that it continues to span the top, bottom, left, or right edge of the parent.

When Align is set to alNone, the component remains where it is positioned on a form. Actually, alNone is the default value of Align.

When Align is set to alClient, the component fills the entire client area.

Note: Any number of bars within a single parent can have the same Align value, in which case they stack up along the edge of the parent. The bars stack up in z-order. To adjust the order in which the bars stack up, drag the bars into their desired positions.


Color - Specifies the background color of the panel part of component.

Use Color to read or change the background color of the control.

Note: If a control's ParentColor property is true, then changing the Color property of the control's parent automatically changes the Color property of the control. When the value of the Color property is changed, the control's ParentColor property is automatically set to false.


ColorScheme - Specifies the background color of component (everything accept the panel).

Value	Screenshot
csBlack
csBlue
csDefault
csSilver

Enabled - Controls whether the component responds to mouse and keyboard.

Use Enabled to change the availability of the component to the user. To disable a control, set Enabled to false. If Enabled is false, the component ignores mouse and keyboard. To re-enable a control, set Enabled to true and user can use the control again.


InnerMargins - Specifies the distance, in pixels, between the edge of the text area and the edge of the panel (it take effect only to the panel part of the component). This property allows you to set the size of each margin separately.


Style – Determines the style of the NxOutlookBar. The possible styles are osOffice2007 and osWindowsLive.




Visible - Determines whether the NxOutlookBar appears on screen during the runtime.

Use the Visible property to control the visibility of the control at runtime. If Visible is true, the control appears. If Visible is false, the control is not visible.