TTMSFNCToolBar

The TTMSFNCToolBar is a component to display a group of toolbar buttons / pickers with optional separators. Each toolbar button is highly configurable and has the ability to show a dropdownbutton with a dropdowncontrol. There are also built-in font name, font size, bitmap and color pickers.

Set of components

• TTMSFNCToolBar
• TTMSFNCDockPanel
• TTMSFNCToolBarSeparator
• TTMSFNCToolBarButton
• TTMSFNCToolBarFontNamePicker
• TTMSFNCToolBarFontSizePicker
• TTMSFNCToolBarColorPicker
• TTMSFNCFontToolbar
• TTMSFNCParagraphToolbar
• TTMSFNCInsertToolbar
• TTMSFNCFileIOToolbar
• TTMSFNCClipboardToolbar

Properties

Property name	Description
Appearance	The appearance of the toolbar which includes margins for automatic alignment of the controls inside the toolbar.
AutoAlign	Automatically aligns the controls inside the toolbar.
AutoSize	Automatically resizes the Toolbar according to the displayed buttons.
CustomOptionsMenu	A custom options menu, displayed when clicking the button at the right side of the toolbar. The options menu displays a list of controls that are available, and the controls can be hidden when clicking the appropriate item.
OptionsMenu	Configure the options menu at the right side of the toolbar.
State	The state of the toolbar. By default the state is esNormal, but when developing for mobile forms, the state can optionally be set to esLarge to allow larger buttons and sharper graphics.

Methods

Method name	Description
AddControl(AControl: TControl; AIndex: Integer = -1);	Adds an existing control to the toolbar, optionally at a specified index.
AddControlClass(AControlClass: TControlClass; AIndex: Integer = -1): TControl;	Adds a new control based on the AControlClass parameter, optionally at a specified index.
AddButton(AWidth: Single = -1; AHeight: Single = -1; AResource: String = ''; AResourceLarge: String = ''; AText: String = ''; AIndex: Integer = -1): TTMSFNCToolBarButton;	Adds a new TTMSFNCToolBarButton with the ability to configure the button size, normal bitmap and large bitmap resources, text and position within the toolbar.
AddSeparator(AIndex: Integer = -1): TTMSFNCToolBarSeparator;	Adds a new separator to the toolbar.
AddFontNamePicker(AIndex: Integer = -1): TTMSFNCToolBarFontNamePicker;	Adds a new TTMSFNCToolBarFontNamePicker control, which inherits from TTMSFNCToolBarButton.
AddFontSizePicker(AIndex: Integer = -1): TTMSFNCToolBarFontSizePicker;	Adds a new TTMSFNCToolBarFontSizePicker control, which inherits from TTMSFNCToolBarButton.
AddColorPicker(AIndex: Integer = -1): TTMSFNCToolBarColorPicker;	Adds a new TTMSFNCToolBarColorPicker control, which inherits from TTMSFNCToolBarButton.
AddBitmapPicker(AIndex: Integer = -1): TTMSFNCToolBarBitmapPicker;	Adds a new TTMSFNCToolBarBitmapPicker control, which inherits from TTMSFNCToolBarButton.
GetOptionsMenuButtonControl: TTMSFNCToolBarButton;	Returns the right-most options menu button for further customization

Events

Event name	Description
OnOptionsMenuButtonClick	Event called when the menu button at the right side of the Toolbar is clicked.
OnOptionsMenuCustomize	Event called after the options menu is initialized and further customizations need to be applied.
OnOptionsMenuItemApplyStyle	Event called when the menu item style is applied.
OnOptionsMenuItemCanShow	Event called when showing
OnOptionsMenuItemClick	Event called when a menu item is clicked.
OnOptionsMenuItemCustomize	Event called when a menu item is initialized and further customization is necessary.

Adding new components at designtime

When dropping a TTMSFNCToolBar on the form, right-clicking it will give you a context menu with options to add controls. Adding a Button will create an instance of TTMSFNCToolBarButton and add it to the TTMSFNCToolBar. By default the AutoSize and AutoAlign is true which will align the button according to the properties set in the appearance and the width/height of the control.

The TTMSFNCToolBarButton can be further customized through the object inspector. The TTMSFNCToolBarButton has a few descendants that are listed in the beginning of this chapter, each inherit all properties from the TTMSFNCToolBarButton and already configure some properties to suit their purpose. The most important properties, methods and events are listed below.

Adding new components at runtime

For this sample we are taking the previous sample of adding a new TTMSFNCToolBarButton at designtime. The toolbar has a few helper methods of adding a new or existing control programmatically.

var
 b: TTMSFNCToolBarButton;
begin
 b := TMSFNCToolBar1.AddButton(100, 30);
 b.Text := 'Hello World !';

We can also add other non-built in type of controls, such as a TEdit.

var
 e: TEdit;
begin
 e := TMSFNCToolBar1.AddControlClass(TEdit) as TEdit;
 e.Text := 'Hello World !';

Toolbar button

Below are the most important properties, methods and events for the TTMSFNCToolBarButton.

Properties

Property name	Description
Appearance	The appearance of the button, which includes fill and stroke for all states of the button including a optional transparent mode and the ability to change the corners and rounding.
AutoOptionsMenuText	The text that is displayed when clicking the options menu button in the toolbar.
Bitmap	The bitmap for normal state.
BitmapContainer	A container of bitmaps defined by a name property.
BitmapLarge	The bitmap for large state.
BitmapName	The name of the bitmap in normal state used in combination with the BitmapContainer.
BitmapNameLarge	The name of the bitmap in large state used in combination with the BitmapContainer.
DropDownControl	A reference to the control displayed inside the dropdown area.
DropDownHeight	The height of the dropdown area where the dropdown control will be displayed.
DropDownKind	The kind of dropdown button configured inside the toolbar button. When setting the DropDownKind to ddkDropDownButton a separate button is added to the toolbar button which takes care of displaying the dropdown. When specifying ddkDropDown, the whole toolbar button area will trigger a dropdown.
DropDownPosition	The position of the dropdown button
DropDownWidth	The width of the dropdown area where the dropdown control will be displayed.
State	The state of the button, used to show the difference between normal and large states for desktop and mobile applications.

Methods

Method name	Description
GetDropDownButtonControl: TTMSFNCToolBarDropDownButton;	Returns the internally created dropdown control button for further customization.
GetBitmapControl: TTMSFNCBitmap;	Returns the internally created instance of TTMSFNCBitmap used to display a bitmap inside the toolbar button.
GetTextControl: TTMSFNCHTMLText;	Returns the internally created instance of TTMSFNCHTMLText used to display the text inside the toolbar button.
DropDown;	Shows the dropdown area.
CloseDropDown;	Closes the dropdown area.
GetPopupControl: TPopup;	A reference to the popup control used to display the dropdown area.
DownState: Boolean	A special state that forces the downstate on the toolbar button.
PopupPlacement: TPlacement	The placement of the dropdown area. By default the dropdown area is shown with the direction set to bottom.

Normal State vs Large State

The button implements a state property, which is also available on the toolbar and dock panel. When setting the state property, the buttons are switched to a larger state, and will display a larger font size, larger size and larger bitmap. The bitmap is the most important because the bitmap will be loaded from the BitmapLarge properties. When you configure your application to include large states, you should also include a large state variant for the Bitmap and / or BitmapName properties.

Below is a sample that includes a bitmap for normal and large state.

Normal state

Large state