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

• Using the static RadialMenuCommands class

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

• XAML

<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

  • XAML

      <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

  • XAML

      <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

  • C#

      //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.