RadRadialMenu as a ContextMenu

RadRadialMenu can be used as a context menu for another FrameworkElement. This can be done by using the RadialContextMenu attached property defined in the RadRadialMenu class. Additionally, you will need to set the events/actions of the target element on which the menu will be displayed and closed.

In this topic we will go through the different ways of setting RadialMenu as a context menu such as:

Using ShowEventName/HideEventName properties

When RadRadialMenu is used as a context menu, you can set its ShowEventName / HideEventName to define the events of the target element on which it will be shown / closed.

Example 1 show how these properties can be used when the RadialContextMenu is attached to a TextBox:

Example 1: Setting ShowEventName/HideEventName properties

<TextBox Text="Some Text"> 
    <telerik:RadRadialMenu.RadialContextMenu> 
        <telerik:RadRadialMenu ShowEventName="GotFocus" HideEventName="LostFocus"> 
            <telerik:RadRadialMenuItem Header="Item 1" /> 
            <telerik:RadRadialMenuItem Header="Item 2" /> 
            <telerik:RadRadialMenuItem Header="Item 3" /> 
        </telerik:RadRadialMenu> 
    </telerik:RadRadialMenu.RadialContextMenu> 
</TextBox> 

The values set to ShowEventName/HideEventName should be valid event names of the target element.

Using the static RadialMenuCommands class

The other option to define when the RadialContextMenu is shown/closed is through the static RadialMenuCommands class and its Show and Hide commands.

RadialMenuCommands class can be used in the following ways:

  • With the Telerik EventToCommandBehavior: Example 2 shows how you can use EventToCommandBehavior to bind the Show/Hide commands to any of the target element's events:

    Example 2: Using EventToCommandBehavior

        <TextBox Text="Some Text"> 
            <telerik:EventToCommandBehavior.EventBindings> 
                <telerik:EventBinding EventName="GotFocus" Command="{x:Static telerik:RadialMenuCommands.Show}" /> 
                <telerik:EventBinding EventName="LostFocus" Command="{x:Static telerik:RadialMenuCommands.Hide}" /> 
            </telerik:EventToCommandBehavior.EventBindings> 
            <telerik:RadRadialMenu.RadialContextMenu> 
                <telerik:RadRadialMenu> 
                    <!--...--> 
                </telerik:RadRadialMenu> 
            </telerik:RadRadialMenu.RadialContextMenu> 
        </TextBox> 
    
  • With InputBindings - you can add KeyBinding, for example, to the InputBindings collection of the target element in order to show/hide the RadialContextMenu when pressing a certain key. Example 3 demonstrates how to define showing it on clicking Ctrl+M and hiding it on clicking Escape key.

    Example 3: Using InputBindings

        <TextBox Text="Some Text"> 
            <TextBox.InputBindings> 
                <KeyBinding Modifiers="Control" Key="M" Command="{x:Static telerik:RadialMenuCommands.Show}" /> 
                <KeyBinding Key="Escape" Command="{x:Static telerik:RadialMenuCommands.Hide}" /> 
            </TextBox.InputBindings> 
            <telerik:RadRadialMenu.RadialContextMenu> 
                <telerik:RadRadialMenu> 
                    <!--...--> 
                </telerik:RadRadialMenu> 
            </telerik:RadRadialMenu.RadialContextMenu> 
        </TextBox> 
    
  • In code-behind - Example 4 shows how you can explicitly call Show/Hide commands in code-behind.

    Example 4: In code-behind

        //show the RadialContextMenu 
        RadialMenuCommands.Show.Execute(null, textBox1); 
     
        //hide the RadialContextMenu 
        RadialMenuCommands.Hide.Execute(null, textBox1); 
    
    where textBox1 is the name of the target element to which the RadialContextMenu is attached.
In this article