The Radial Menu is a circular menu that provides a fast navigation for users. This control is new in the 13.2 release of Windows UI and it is inspired by the Microsoft’s OneNote MX 2013 radial menu. This kinds of menus are very useful and  convenient for touch devices. Although the control is released as CTP it supports a wide range of features and has build in tools like numeric items and gauges, lists, color well and etc. . It’s design and functionalities are similar to those of the OneNote menu, so it is able to operates not only just like it but even it can be further customized based on your needs. In the 13.2 release of Infragistics this controls is build under more than one platforms. It is part of the Windows Forms package as well as WPF and Silverlight. You can read my post about Windows Forms radial menu to learn more about its functionalities.

Overview and features

The radial menu can be separated in three main parts – outer ring, inner area with items and center button. It supports unlimited levels of hierarchy. When you create an item with children  you will have an outer ring button automatically generated above that item. As we said there are few build in tools for this control and we will take a look at some of them. Creating a OneNote like menu means that it should have text edit tools like size, font type, list, font color and other. To start with we will need the Infragistics references. Once you have installed the Infragistics package you will find a list of its controls in the toolbox in Visual Studio. Drag the xamRadialMenu to the designers view an the needed references will be added automatically.

Now that we have our radial menu we can add as many items in it as we need. Pay attention that there is a slight difference in this control compared to the one for Windows Forms. In Win Forms we always have a fixed number of items, while here we have the minWedgeCount property which allows you to specify the  minimum number of items for the entire menu.

If you want to create a numeric item you have to add RadialMenuNumericItem which will act as a button to the numeric gauge. Visually the slice will contain a custom image or header if any and an associated numeric value above them. The child item should be a RadialMenuNumericGauge which will allow to select a numeric value.

When it comes to colors the situation is similar. First you have to add a RadialMenuColorItem which will display custom image and header if any and an associated color. The child items should be RadialMenuColorWell. This item is specialized item that displays associated color in the item area and the outer ring. If you navigate to a child item of a color well item you will see a palette of hues of the selected color. To create the whole palette of colors you need to add a hierarchy of  color well children. The snippet below demonstrates how to do that for the yellow color.

Another type of items is the RadialMenuList that represents a list of strings in an appropriate UI list box. We use it to make a fonts type selector.  

You can also have normal RadialMenuItem slices which wont have a build in functionality but can be customized according to your needs. The radial menu is build in such a way that you can style it as you like. You can change the center button icon, the brushes of the outer ring, the brushes of the inner item area. You can also add images and header text for the items. Another thing that you can control is the rotation of the main gauge. Using the RotationInDegrees property you can specify from which degree should it start to rotate.

This control is optimized for touch but it works as well with mouse and keyboard interaction. It even supports key tips. If you want to see what key tips are active for your menu and use them you should first press the Alt button of your keyboard. Then you will see all of the tips visualized and you can manipulate the menu by using them. By default if the center icon’s key tip is “0”. If you haven’t assigned a header to the items their key tips will be numbers, but if you have headers then the key tips will be the first letter of the header. You can always use the KeyTip property and make your own shortcuts. To dismiss the key tips and enter keyboard navigation mode you can press the escape key or a navigation key.

 

Functionality

There is no doubt that the control’s design is attractive and desirable but we should make it functional to become a completed application. As we are making a menu that looks  and acts like the OneNote one, we need to add interaction between the selection of a particular item of the menu and the text that we are going to change. To do that we are going to use the header property of the control to distinguish the different items. Then we will take the selected text and apply a custom function to it. Using this pattern you can make all of the items interactive.

Summary

The main idea behind the radial menu is to be simple and easy to work with. It should present small numbers of items and distribute them in a circular arrangement. It provides fast access to the inner – child items and it is perfect for a touch based applications.  Although it is designed to look and behave like OneNote’s radial menu, you can customize it and make your own creation.

A Win UI xamRadialMenu sample.

 

 

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!