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
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.
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
