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 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:
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.
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
/>
<
TextBlock
Text
=
"Some text"
>
<
telerikPrimitives:RadRadialContextMenu.Behavior
>
<
telerikPrimitives:RadialMenuTriggerBehavior
AttachTriggers
=
"PointerOver"
/>
</
telerikPrimitives:RadRadialContextMenu.Behavior
>
<
telerikPrimitives:RadRadialContextMenu.Menu
>
<
telerikPrimitives:RadRadialMenu
/>
</
telerikPrimitives:RadRadialContextMenu.Menu
>
</
TextBlock
>
<
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
>
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;
}
public
class
RadialMenuProvider
{
public
RadRadialMenu Menu {
get
;
set
; }
}
<
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
>
<
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
>