New to Telerik UI for WinUI? Download free 30-day trial

Change the Menu Position

When used as a context menu, the default position of the RadRadialMenu is determined by the Point returned by the GetMenuPosition method of the RadialMenuTriggerBehavior class. To change the menu position you have to create a class that inherits from the RadialMenuTriggerBehavior class and override its methods to implement custom logic defining where the context menu will appear.

This example demonstrates how you can position the menu at custom location.

First, create a class that inherits from the RadialMenuTriggerBehavior class and override its GetMenuPosition method. You also have to set the AttachTriggers property to specify what event will attach the menu to the target element.

You can access the RadRadialMenu control through an alias pointing to the Telerik.UI.Xaml.Controls.Navigation namespace: xmlns:navigation="using:Telerik.UI.Xaml.Controls.Navigation"

Example 1: Custom RadialMenuTriggerBehavior

public class CustomPositionTriggerBehavior : RadialMenuTriggerBehavior 
{ 
    public CustomPositionTriggerBehavior() 
    { 
        this.AttachTriggers = RadialMenuAttachTriggers.PointerPressed; 
    } 
 
    protected override Windows.Foundation.Point GetMenuPosition(RadRadialMenu menu) 
    { 
        //get the left top point of the target element 
        var targetPosition = this.Owner.TransformToVisual(null).TransformPoint(new Point(this.Owner.ActualWidth, 0)); 
 
        //calulate the desired menu position 
        var position = new Point(targetPosition.X - 120 + this.Owner.ActualWidth / 2, targetPosition.Y - 120); 
 
        return position; 
    } 
} 
Then set the attached RadRadialContextMenu properties to the target element.

Example 2: Set the Behavior Property

<TextBlock Text="Some text"> 
    <navigation:RadRadialContextMenu.Menu> 
        <navigation:RadRadialMenu Width="240"/> 
    </navigation:RadRadialContextMenu.Menu> 
    <navigation:RadRadialContextMenu.Behavior> 
        <local:CustomPositionTriggerBehavior/> 
    </navigation:RadRadialContextMenu.Behavior> 
</TextBlock> 
This is the result:

Radial Menu-Positioning

See Also

In this article
Not finding the help you need?