Edit this page

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.