NextGrid & NextDBGrid








NextGrid .NET

NxOutlookBar Tutorial

Related Articles:

  • Skill:
  • Version: 1.0.0
  • Author: Gordana Milinkovic
  • Created: 2008-06-29
  • Updated: 2008-07-05
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

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.

Was This Article Useful?


2009-03-07 07:48:47


So there is no 'pages' property?

I'm assuming you have to put a pagecontrol (with no tabs showing) and handle the page changes yourself (via the onchange event)? Can you confirm this is the normal behaviour and if so, this should be in the tutorial!

2009-03-07 09:24:08


Unfortunatelly there is no such behaviour. I suggest that you simply put one NxNotebook component and then change pages very easy in run or design time. I also suggest that you check source of MainDemo:

Best Regards
Boki (BergSoft)

2009-04-02 05:46:29

Why can't we change the buttons position?

I'd prefer them coming down from the top... Outlook is old news... let's innovate a little.

2009-04-02 06:15:18

What's its purpose?

Am I missing something here or this bar does... nothing?!

2009-04-02 17:32:03


Main job is to write caption and/or image for each item and then in run-time each button will do something. Best idea is to use NxNotebook and then when first button is pressed, open first page of NxNotebook. All you need to write in OnSelect something like

procedure TForm1.NxOutlookBar1Select(Sender: TObject);
if NxOutlookBar1.ItemIndex = 1 then ... open page ...
Only constructive comments, code contributions... will be publishes. Questions, non-official discussion will not be published.