Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Collapse]Ribbon, Bars and Menu
   [Expand]Bars
   [Expand]Ribbon
   [Expand]Popup Menus
    Radial Menu
   [Expand]Common Features
   [Expand]Examples
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Radial Menu

A RadialMenu is a fully customizable Microsoft OneNote 2013-inspired menu in which items are arranged along the circumference.

Expanded Online Video

At runtime, the Radial Menu can be opened using the RadialMenu.ShowPopup method. Initially, the menu is collapsed when opened.

An end-user can click this button to expand the menu. When the central button is clicked, the RadialMenu.CenterButtonClick event occurs.

Note

To automatically expand the menu when it is invoked, set the RadialMenu.AutoExpand property to true.

Clicking the central button again closes the menu. An end-user can also close the menu by clicking outside the menu's bounds. The RadialMenu.CloseOnOuterMouseClick and RadialMenu.CollapseOnOuterMouseClick options allow you to prevent the menu from being closed/collapsed when an area outside of the menu's bounds is clicked. To close the menu in code, use the PopupMenuBase.HidePopup inherited method.

You can also enable the BarButtonItem.CloseRadialMenuOnItemClick option to close the RadialMenu immediately after a button has been clicked.

Note

For the RadialMenu to work correctly, it must be placed on a form containing a BarManager or a RibbonControl. Ensure that the menu's PopupMenuBase.Manager or PopupMenuBase.Ribbon inherited property is initialized with a BarManager or RibbonControl.

Expanded Items

Buttons, check buttons, sub-menus and static text (represented by BarItem descendants) can be added as items to the RadialMenu. In code, items can be added using the RadialMenu.AddItem method. At design time, use the Customize or Run Designer command, which is available using the RadialMenu's smart tag menu.

Each BarItem can display an image and a caption. These are automatically taken from the item's properties.

To respond to item clicks, you can handle the BarItem.ItemClick event. If the RadialMenu is placed on a form containing a BarManager, you can also handle the BarManager.ItemClick event to process item click events. If the RadialMenu is placed on a form containing a RibbonControl, handle the RibbonControl.ItemClick event instead.

Expanded Appearance

The following settings affect the Radial Menu's appearance.

  • RadialMenu.Glyph - The image displayed in the central button.
  • RadialMenu.BackColor - The Radial Menu's background color.
  • RadialMenu.BorderColor - The color of the menu's thick outer border.
  • BarItem.ItemInMenuAppearance.Normal.BorderColor - The color of the border segment corresponding to an individual item.
  • BarItem.ItemInMenuAppearance.Normal.BackColor - Allows you to fill the inner circle segment of an individual item. (In the image above, four items have segments filled with shades of grey.)
  • RadialMenu.MenuColor - The color used to paint the menu's central button, item highlighting and border segments corresponding to sub-menus (BarSubItem).
  • RadialMenu.SubMenuHoverColor - The color used to paint a border segment corresponding to a sub-menu when it is hovered over.
  • RadialMenu.MenuRadius - Specifies the outer radius of the RadialMenu. By default, the menu's radius is automatically adjusted to fit all items. You can set the radius to a custom value, if required.
  • RadialMenu.InnerRadius - Gets or sets the starting radius of the inner circle segment that is filled with the color specified by an item's BackColor (BarItem.ItemInMenuAppearance.Normal.BackColor) property.

Expanded Example

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E4311.

This example shows how to create a Radial Menu displaying a sub-menu, buttons and check buttons.

How would you rate this topic?​​​​​​​