Radial Menu
- 6 minutes to read
A RadialMenu is a fully customizable Microsoft OneNote 2013-inspired menu in which items are arranged along the circumference.
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.
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.
- BarItem.Caption - Specifies a display caption. Set this property to an empty string to hide the caption.
- BarItem.Glyph or BarItem.ImageIndex - Allows you to assign a small image to an item.
- BarItem.LargeGlyph or BarItem.LargeImageIndex - Allows you to assign a large image to an item.
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.
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.
Example
This example shows how to create a Radial Menu displaying a sub-menu, buttons and check buttons.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using DevExpress.XtraBars.Ribbon;
using DevExpress.XtraBars;
namespace CreateRadialMenu {
public partial class Form1 : Form {
public Form1() {
InitializeComponent();
barManager = barManager1;
barManager.ItemClick += new ItemClickEventHandler(barManager_ItemClick);
// Create Radial Menu
radialMenu = new RadialMenu(barManager);
radialMenu.AddItems(GetRadialMenuItems(barManager));
}
BarManager barManager;
RadialMenu radialMenu;
private void btnShowRadialMenu_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
// Display Radial Menu
if (radialMenu == null) return;
Point pt = this.Location;
pt.Offset(this.Width / 2, this.Height / 2);
radialMenu.ShowPopup(pt);
}
BarItem[] GetRadialMenuItems(BarManager barManager) {
// Create bar items to display in Radial Menu
BarItem btnCopy = new BarButtonItem(barManager, "Copy");
btnCopy.ImageOptions.ImageUri.Uri = "Copy;Size16x16";
BarItem btnCut = new BarButtonItem(barManager, "Cut");
btnCut.ImageOptions.ImageUri.Uri = "Cut;Size16x16";
BarItem btnDelete = new BarButtonItem(barManager, "Delete");
btnDelete.ImageOptions.ImageUri.Uri = "Delete;Size16x16";
BarItem btnPaste = new BarButtonItem(barManager, "Paste");
btnPaste.ImageOptions.ImageUri.Uri = "Paste;Size16x16";
// Sub-menu with 3 check buttons
BarSubItem btnMenuFormat = new BarSubItem(barManager, "Format");
BarCheckItem btnCheckBold = new BarCheckItem(barManager, false);
btnCheckBold.Caption = "Bold";
btnCheckBold.ImageOptions.ImageUri.Uri = "Bold;Size16x16";
BarCheckItem btnCheckItalic = new BarCheckItem(barManager, true);
btnCheckItalic.Caption = "Italic";
btnCheckItalic.ImageOptions.ImageUri.Uri = "Italic;Size16x16";
BarCheckItem btnCheckUnderline = new BarCheckItem(barManager, false);
btnCheckUnderline.Caption = "Underline";
btnCheckUnderline.ImageOptions.ImageUri.Uri = "Underline;Size16x16";
BarItem[] subMenuItems = new BarItem[] { btnCheckBold, btnCheckItalic, btnCheckUnderline };
btnMenuFormat.AddItems(subMenuItems);
BarItem btnFind = new BarButtonItem(barManager, "Find");
btnFind.ImageOptions.ImageUri.Uri = "Find;Size16x16";
BarItem btnUndo = new BarButtonItem(barManager, "Undo");
btnUndo.ImageOptions.ImageUri.Uri = "Undo;Size16x16";
BarItem btnRedo = new BarButtonItem(barManager, "Redo");
btnRedo.ImageOptions.ImageUri.Uri = "Redo;Size16x16";
return new BarItem[] {btnCopy, btnCut, btnDelete, btnPaste, btnMenuFormat, btnFind, btnUndo, btnRedo};
}
void barManager_ItemClick(object sender, ItemClickEventArgs e) {
//...
Text = "Item clicked: " + e.Item.Caption;
}
}
}