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:
<telerikPrimitives:RadRadialMenu/>
The basic control definition when used as an empty context menu for a TextBlock control:
<TextBlock Text="Some text">
<telerikPrimitives:RadRadialContextMenu.Behavior>
<telerikPrimitives:RadialMenuTriggerBehavior AttachTriggers="PointerOver"/>
</telerikPrimitives:RadRadialContextMenu.Behavior>
<telerikPrimitives:RadRadialContextMenu.Menu>
<telerikPrimitives:RadRadialMenu/>
</telerikPrimitives:RadRadialContextMenu.Menu>
</TextBlock>
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:
<TextBox Text="Some text">
<telerikPrimitives:RadRadialContextMenu.Behavior>
<telerikPrimitives:RadialMenuTriggerBehavior AttachTriggers="PointerOver"/>
</telerikPrimitives:RadRadialContextMenu.Behavior>
<telerikPrimitives:RadRadialContextMenu.Menu>
<telerikPrimitives:RadRadialMenu>
<telerikPrimitives:RadialMenuItem Header="Color" Selectable="False" IconContent="" Command="{StaticResource ForegroundCommand}">
<telerikPrimitives:RadialMenuItem ContentSectorBackground="#EA5E0F" GroupName="Colors" Command="{StaticResource ForegroundCommand}"/>
<telerikPrimitives:RadialMenuItem ContentSectorBackground="#DD011B" GroupName="Colors" Command="{StaticResource ForegroundCommand}"/>
<telerikPrimitives:RadialMenuItem ContentSectorBackground="#7C2B87" GroupName="Colors" Command="{StaticResource ForegroundCommand}"/>
</telerikPrimitives:RadialMenuItem>
<telerikPrimitives:RadialMenuItem Header="Bold" IconContent="" Command="{StaticResource BoldCommand}">
<telerikPrimitives:RadialMenuItem Header="Bold" IconContent="" Command="{StaticResource BoldCommand}"/>
<telerikPrimitives:RadialMenuItem Header="Italic" IconContent="" Command="{StaticResource ItalicCommand}"/>
</telerikPrimitives:RadialMenuItem>
</telerikPrimitives:RadRadialMenu>
</telerikPrimitives:RadRadialContextMenu.Menu>
</TextBox>
C# commands definition:
public class ForegroundCommand : ICommand
{
public bool CanExecute(object parameter)
{
var context = parameter as RadialMenuItemContext;
return context != null;
}
public void Execute(object parameter)
{
var context = parameter as RadialMenuItemContext;
var textBox = context.TargetElement as TextBox;
var newColor = context.MenuItem.ContentSectorBackground;
textBox.Foreground = newColor;
}
public event EventHandler CanExecuteChanged;
}
public class BoldCommand : ICommand
{
public bool CanExecute(object parameter)
{
var context = parameter as RadialMenuItemContext;
return context != null;
}
public void Execute(object parameter)
{
var context = parameter as RadialMenuItemContext;
var textBox = context.TargetElement as TextBox;
var newFontWeight = FontWeights.Bold;
textBox.FontWeight = newFontWeight;
}
public event EventHandler CanExecuteChanged;
}
public class ItalicCommand : ICommand
{
public bool CanExecute(object parameter)
{
var context = parameter as RadialMenuItemContext;
return context != null;
}
public void Execute(object parameter)
{
var context = parameter as RadialMenuItemContext;
var textBox = context.TargetElement as TextBox;
var newFontStyle = FontStyle.Italic;
textBox.FontStyle = newFontStyle;
}
public event EventHandler CanExecuteChanged;
}
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#:
public class RadialMenuProvider
{
public RadRadialMenu Menu { get; set; }
}
Adding new RadialMenuProvider to the resource dictionary from the previous example:
<local:RadialMenuProvider x:Key="TextMenu">
<local:RadialMenuProvider.Menu>
<telerikPrimitives:RadRadialMenu>
<telerikPrimitives:RadialMenuItem Header="Color" Selectable="False" IconContent="" Command="{StaticResource ForegroundCommand}">
<telerikPrimitives:RadialMenuItem ContentSectorBackground="#EA5E0F" GroupName="Colors" Command="{StaticResource ForegroundCommand}"/>
<telerikPrimitives:RadialMenuItem ContentSectorBackground="#DD011B" GroupName="Colors" Command="{StaticResource ForegroundCommand}"/>
<telerikPrimitives:RadialMenuItem ContentSectorBackground="#7C2B87" GroupName="Colors" Command="{StaticResource ForegroundCommand}"/>
</telerikPrimitives:RadialMenuItem>
<telerikPrimitives:RadialMenuItem Header="Bold" IconContent="" Command="{StaticResource BoldCommand}">
<telerikPrimitives:RadialMenuItem Header="Bold" IconContent="" Command="{StaticResource BoldCommand}"/>
<telerikPrimitives:RadialMenuItem Header="Italic" IconContent="" Command="{StaticResource ItalicCommand}"/>
</telerikPrimitives:RadialMenuItem>
</telerikPrimitives:RadRadialMenu>
</local:RadialMenuProvider.Menu>
</local:RadialMenuProvider>
The next step is to add the context menu as an attached property on as many controls as you want:
<TextBox Text="Some text" telerikPrimitives:RadRadialContextMenu.Menu="{Binding Menu,Source={StaticResource TextMenu}}">
<telerikPrimitives:RadRadialContextMenu.Behavior>
<telerikPrimitives:RadialMenuTriggerBehavior/>
</telerikPrimitives:RadRadialContextMenu.Behavior>
</TextBox>
<TextBox Text="Another text" telerikPrimitives:RadRadialContextMenu.Menu="{Binding Menu,Source={StaticResource TextMenu}}">
<telerikPrimitives:RadRadialContextMenu.Behavior>
<telerikPrimitives:RadialMenuTriggerBehavior/>
</telerikPrimitives:RadRadialContextMenu.Behavior>
</TextBox>
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.
