Bring the OneNote Native Menuing Experience to Your Windows Store Apps

RadControls for Windows 8 XAML Q3 2013 came with several new controls and one of them is RadRadialMenu. Its highly customizable nature makes it the perfect menu assistant for any Windows Store application. While developed with touch-first scenarios in mind, our UX Designers made sure that RadRadialMenu applies perfectly on both desktop and touch environments.

What is RadRadialMenu used for?

Contextual menus are a powerful and irreplaceable tool in every user oriented application. They enable you to interact with application components in numerous ways. A contextual menu can support text editing, formatting, navigation, or custom context-specific actions depending on the location of the user focus.

Figure 1: RadRadialMenu

Following the Microsoft Windows 8 UI paradigm for contextual menus, RadRadialMenu is represented as a circular menu with a high level of interactivity. The component is also loaded with smooth and eye pleasing navigation animations, which gives your application additional style and interaction usability.

RadRadialMenu Features

RadRadialMenu can be used as a context menu for a specific app part or as an independent standalone component. The control design covers the full set of features expected of a modern context menu:

• Programmatic and declarative items definition along with nested child items.
• Ability to define custom commands on all menu items.
• Toggle and exclusive item selection.
• Triggers for actions (Tap/Focus/Hover e.g.) along with the ability to specify custom trigger actions.
• Custom control positioning.
• 100% (Full) visual customization.

RadRadialMenu follows the styling rules applicable to all members of the RadControls for Windows 8 XAML suite. The control visual appearance can be restyled either by setting specific control properties or by defining the named brushes associated with the desired visual parts.

How to use RadRadialMenu?

Note: There are two ways to setup the component – as context and standalone menu.

All that sounds pretty much easy and useful, but how exactly can you unleash the full potential of the RadRadialMenu? Some hands-on experience always provides a greater degree of understanding: 

Following is the basic control definition when used as an empty standalone menu:

The basic control definition when used as an empty context menu for a TextBlock control:


Note: Adding trigger behavior is an essential step when using the component as a context menu. The AttachTriggers property defines the action that shows the RadRadialMenu.

Now let’s continue with a real use case where RadRadialMenu is used to apply some text formatting. Let’s assume that we are going to edit the text style and foreground color. The first step is to define context menu with custom menu items:


C# commands definition:


The output of the above code shows a RadRadialMenu with 2 menu items that have child items. Navigating and clicking an item will execute the command bound to it:


Figure 2: Applying custom color on text

Then applying some bold and italic font styles:


Figure 3: Text formatting

The previous example was a typical solution of context menu for a specific component. What if there are a few similar components that need the same context menu? Normally you would go ahead and define the context menu in a resource dictionary but WinRT does not allow a UIElement defined in resource dictionary to be shared as a child of multiple elements. To address this limitation you can create a helper class (not UIElement!) that holds a reference to the context menu and add the helper class to the page resources.

Helper class definition in C#:


Adding new RadialMenuProvider to the resource dictionary from the previous example:


The next step is to add the context menu as an attached property on as many controls as you want:


Now both of the TextBox controls have a reference to RadRadialMenu defined in page resources:



Figure 4: Formatting different text fields using single RadRadialMenu

So grab your copy of RadControls for Windows 8 XAML and explore the full potential of the component. As always, any feedback is highly appreciated, so feel free to share it.

---