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:

[XAML] 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:

    [XAML] 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.

    [XAML] 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.

    [C#] 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.