Radial Menu
- 4 minutes to read
The ExpressBars Suite includes a radial menu (the TdxRibbonRadialMenu component) – a menu inspired by Microsoft Office OneNote 2013, in which commands (bar items) are arranged into a wheel. With its ergonomic and compact design, a radial menu is a natural choice for Touch-enabled applications.
A radial menu can simultaneously display up to eight commands, each represented by an icon and/or caption. A command is either of the following:
A bar button. Selecting this command with a tap or click executes it.
A subitem providing access to a submenu. This command displays an arrow on the outer edge of a radial menu. Selecting this arrow opens a submenu inside a radial menu, updating it with submenu commands.
Note that a radial menu accepts any bar item as its command. However, only the TdxBarButton, TdxBarLargeButton, and TdxBarSubItem items support the menu command functionality described above, by default.
Central Button
The central button is another way to interact with a radial menu. Initially (at the main level), the central button displays the icon provided via a radial menu’s Glyph property. Based on a menu’s display mode (see below), selecting the button with a tap or click at this level either closes or expands/collapses the menu. Within submenus, the button’s icon is automatically replaced with a back arrow, which when selected, allows an end-user to go back from a submenu to the previous menu. The central button can also be selected by pressing the Esc or Left Arrow key.
The central button and menu are stationary – they cannot be moved using drag and drop.
Display Modes
The method you use to invoke a radial menu designates its display mode: collapsible or popup. In collapsible mode (invoked via the menu Show method), a radial menu always persists on screen until its Hide method is called. The menu is initially collapsed, displaying only the central button. An end-user can click or tap the button to expand the menu to display its main level commands.
While the menu is expanded, selecting the central button, executing a command, or clicking or tapping outside menu bounds in this mode, exits to the main level and collapses the menu into the central button.
In popup mode (invoked via the menu Popup or PopupFromCursorPos method), a radial menu is always expanded to display its commands. Selecting the central button, executing a command, or clicking or tapping outside the menu bounds in this mode closes a menu (as with a popup menu).
To programmatically close a radial menu in any display mode, call the menu Hide method. You can handle the radial menu’s OnPopup, OnCloseUp, OnExpand, and OnCollapse events to track changes made to the menu’s visibility and expanded state.
Run the RibbonNotepadDemo and NotesDemo shipped with the ExpressBars Suite to see the display modes in action.
Menu Customization
As with other popup menu components shipped with the ExpressBars Suite, you can populate a radial menu via its ItemLinks collection. At design time, you can accomplish this using the Customization Form and the menu designer. To invoke them, do one of the following:
Double-click the TdxRibbonRadialMenu component;
Click the TdxRibbonRadialMenu component to display its properties within the Object Inspector and then click the ellipsis button next to the ItemLinks property.
Then, you can create item links using drag-and-drop operations and the customizing popup menu.
Alternatively, you can populate a radial menu with items from any popup menu (a TdxBarCustomPopupMenu descendant) residing on a form using the “Assign ItemLinks From” item within the TdxRibbonRadialMenu component menu.
Note that if more than eight commands (bar items) exist on any radial menu level, a radial menu will automatically create an auxiliary subitem labeled More Buttons at this level and move any extra items to this subitem. We introduced this capability for backward compatibility only. We recommend that you design your new radial menus (or redesign the converted radial menus) to meet the “eight commands maximum per level” requirement. This will make them consistent with Microsoft Office OneNote 2013 menus.
Paint Styles
A radial menu is painted using its own appearance settings by default. When linked to the Ribbon, a radial menu is painted using the currently applied Ribbon skin and color scheme accent settings.
KeyTips
When linked to the Ribbon, a radial menu provides support for Ribbon KeyTips. Refer to the corresponding topic to learn about this capability.
Important
Radial menus can only be used with a form that contains a bar manager.