Placing and Dragging in .NET MAUI Radial Menu

5 Aug 202610 minutes to read

You can place the Radial Menu anywhere on its parent layout and drag it within that layout. The default position is the center of the parent; set the Point property to override that. Enable dragging with the IsDragEnabled property and react to drag start / end with the DragBegin and DragEnd events.

Prerequisites

Before using the SfRadialMenu, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.RadialMenu

For step-by-step setup, refer to the Getting Started documentation.

Dragging Radial Menu

You can enable or disable dragging by using the IsDragEnabled property. When dragging is enabled, the user can grab the rim and move the menu within its parent layout.

<radialMenu:SfRadialMenu x:Name="radialMenu"
                         IsDragEnabled="true"
                         CenterButtonText="&#xe710;"
                         CenterButtonFontFamily="Maui Material Assets"
                         CenterButtonRadius="30"
                         CenterButtonFontSize="26"
                         CenterButtonBorderThickness="3">
</radialMenu:SfRadialMenu>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    IsDragEnabled = true,
    CenterButtonText = "\ue710",
    CenterButtonFontFamily = "Maui Material Assets",
    CenterButtonRadius = 30,
    CenterButtonFontSize = 26,
    CenterButtonBorderThickness = 3
};

Dragging Radial Menu

Rotation

The rim of the Radial Menu can rotate as the user drags around the center button. Use the EnableRotation property to enable or disable this visual behavior.

<radialMenu:SfRadialMenu x:Name="radialMenu"
                         EnableRotation="False" />
SfRadialMenu radialMenu = new SfRadialMenu()
{
    EnableRotation = false
};

Handle drag events

Radial Menu raises two events while the user drags the menu: DragBegin fires when the drag starts, and DragEnd fires when it ends. Both events are only raised when IsDragEnabled is true.

DragBegin event

This event is raised when the user starts to drag the Radial Menu. The handler receives a DragBeginEventArgs instance.

  • Position - Gets the starting position of the Radial Menu.

  • Handled - Gets and sets a boolean value for enabling or disabling the dragging of the Radial Menu.

The following sample shows how to read the start position and cancel the drag.

<radialMenu:SfRadialMenu x:Name="radialMenu"
                         DragBegin="RadialMenu_DragBegin"
                         IsDragEnabled="true"
                         CenterButtonText="&#xe710;"
                         CenterButtonFontFamily="Maui Material Assets"
                         CenterButtonRadius="30"
                         CenterButtonFontSize="26"
                         CenterButtonBorderThickness="3">
</radialMenu:SfRadialMenu>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    IsDragEnabled = true,
    CenterButtonText = "\ue710",
    CenterButtonFontFamily = "Maui Material Assets",
    CenterButtonRadius = 30,
    CenterButtonFontSize = 26,
    CenterButtonBorderThickness = 3
};

radialMenu.DragBegin += RadialMenu_DragBegin;

The DragBegin events can be handled in C# as follows:

private void RadialMenu_DragBegin(object sender, DragBeginEventArgs e)
{
    // e.Position is the start position; e.Handled = true cancels the drag.
    System.Diagnostics.Debug.WriteLine($"Drag started at {e.Position}");
    if (e.Position.X < 0)
    {
        e.Handled = true;
    }
}

DragEnd event

This event is raised when the drag ends. The handler receives a DragEndEventArgs instance.

  • OldValue - Gets the start position of the Radial Menu.

  • NewValue - Gets the end position of the Radial Menu.

  • Handled - Gets and sets a boolean value to restrict the Radial Menu from moving to another position.

The following sample shows how to read both positions and reject moves outside a target rectangle.

<radialMenu:SfRadialMenu x:Name="radialMenu"
                         IsDragEnabled="true"
                         DragEnd="RadialMenu_DragEnd"
                         CenterButtonText="&#xe710;"
                         CenterButtonFontFamily="Maui Material Assets"
                         CenterButtonRadius="30"
                         CenterButtonFontSize="26"
                         CenterButtonTextColor="White"
                         CenterButtonStroke="White"
                         CenterButtonStrokeThickness="3">
</radialMenu:SfRadialMenu>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    IsDragEnabled = true,
    CenterButtonText = "\ue710",
    CenterButtonFontFamily = "Maui Material Assets",
    CenterButtonRadius = 30,
    CenterButtonFontSize = 26,
    CenterButtonBorderThickness = 3
};

radialMenu.DragEnd += RadialMenu_DragEnd;

The DragEnd events can be handled in C# as follows:

private void RadialMenu_DragEnd(object sender, DragEndEventArgs e)
{
    // e.OldValue is the start point; e.NewValue is the end point.
    // e.Handled = true keeps the menu at e.OldValue.
    System.Diagnostics.Debug.WriteLine($"Dragged from {e.OldValue} to {e.NewValue}");
    if (e.NewValue.X < 0 || e.NewValue.Y < 0)
    {
        e.Handled = true;
    }
}

Placing the Radial Menu

You can place the Radial Menu at a specific position on its parent layout by setting the Point property. The position of the Radial Menu is calculated based on the parent layout’s center point.

<radialMenu:SfRadialMenu x:Name="radialMenu"
                         Point="100,150"
                         CenterButtonText="&#xe710;"
                         CenterButtonFontFamily="Maui Material Assets"
                         CenterButtonRadius="30"
                         CenterButtonFontSize="26"
                         CenterButtonTextColor="White"
                         CenterButtonStroke="White"
                         CenterButtonStrokeThickness="3">
</radialMenu:SfRadialMenu>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonText = "\ue710",
    CenterButtonFontFamily = "Maui Material Assets",
    CenterButtonRadius = 30,
    CenterButtonFontSize = 26,
    CenterButtonTextColor = Colors.White,
    CenterButtonStroke = Colors.White,
    CenterButtonStrokeThickness = 3,
    Point = new Point(100, 150)
};

See also