Placing and Dragging RadialMenu in MAUI Radial Menu (SfRadialMenu)

22 Mar 202415 minutes to read

You can place radial menu anywhere on its parent layout, and drag it with in the parent layout.

Dragging RadialMenu

You can enable/disable dragging by using the IsDragEnabled property.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RadialSample"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.RadialMenu;assembly=Syncfusion.Maui.RadialMenu"
             x:Class="RadialSample.MainPage">
    <ContentPage.Content>
        <syncfusion:SfRadialMenu x:Name="radialMenu" 
                                 IsDragEnabled="true" 
                                 CenterButtonText="&#xe710;"
                                 CenterButtonFontFamily="Maui Material Assets" 
                                 CenterButtonRadius="30"
                                 CenterButtonFontSize="26"
                                 CenterButtonBorderThickness="3">
        </syncfusion:SfRadialMenu>
    </ContentPage.Content>
</ContentPage>

C#

using Syncfusion.Maui.RadialMenu;

namespace RadialSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            SfRadialMenu radialMenu = new SfRadialMenu()
            {
                IsDragEnabled = true,
                CenterButtonText="",
                CenterButtonFontFamily="Maui Material Assets" ,
                CenterButtonRadius = 30,
                CenterButtonFontSize = 26,
                CenterButtonBorderThickness = 3
            };
            this.Content = radialMenu;
        }
    }
}

DragEvents

SfRadialMenu provides for event for DragBegin in which the event get hooked when the RadialMenu is get dragged.

DragBegin event

This event get triggered when RadialMenu is start to drag with DragBeginEventArgs.

• Position - Gets the Start position of the RadialMenu.

• Handled - Gets and Sets the boolean value for enabling and disabling the dragging of RadialMenu.

To hook the DragBegin event, and to get the start position and restricts the dragging, follow the code example:

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RadialSample"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.RadialMenu;assembly=Syncfusion.Maui.RadialMenu"
             x:Class="RadialSample.MainPage">
    <radialMenu:SfRadialMenu x:Name="radialMenu"
                             DragBegin="RadialMenu_DragBegin"
                             IsDragEnabled = "True",
                             CenterButtonText="&#xe710;",
                             CenterButtonFontFamily="Maui Material Assets" ,
                             CenterButtonRadius = "30",
                             CenterButtonFontSize = "26",
                             CenterButtonBorderThickness = "3">
    </radialMenu:SfRadialMenu>
</ContentPage>

C#

using Syncfusion.Maui.RadialMenu;

namespace RadialSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            SfRadialMenu radialMenu = new SfRadialMenu()
            {
                IsDragEnabled = true,
                CenterButtonText="",
                CenterButtonFontFamily="Maui Material Assets" ,
                CenterButtonRadius = 30,
                CenterButtonFontSize = 26,
                CenterButtonBorderThickness = 3
            };

            radialMenu.DragBegin += RadialMenu_DragBegin;
            this.Content = radialMenu;
        }

        private void RadialMenu_DragBegin(object sender, DragBeginEventArgs e)
        {
            e.Handled = true;
        }
    }
}

Drag End

This event get triggered when dragging is ended in RadialMenu with DragEndEventArgs.

• OldValue - Gets the Start position of the RadialMenu.

• NewValue - Gets the end position of the RadialMenu.

• Handled - Gets and Sets the boolean value for restricting the RadialMenu to move another position.

To hook the DragEnd event, and to get the start position, end position and restricts the movement of the RadialMenu, follow the code example:

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RadialSample"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.RadialMenu;assembly=Syncfusion.Maui.RadialMenu"
             x:Class="RadialSample.MainPage">
    <radialMenu:SfRadialMenu x:Name="radialMenu" 
                             IsDragEnabled="true" 
                             DragEnd="radialMenu_DragEnd"
                             CenterButtonText="&#xe713;"
                             CenterButtonFontFamily="{StaticResource customfontfamily}" 
                             CenterButtonRadius="30"
                             CenterButtonFontSize="26" 
                             CenterButtonTextColor="White"
                             CenterButtonBorderColor="White" 
                             CenterButtonBorderThickness="3">
    </radialMenu:SfRadialMenu>
</ContentPage>

C#

using Syncfusion.Maui.RadialMenu;

namespace RadialSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            SfRadialMenu radialMenu = new SfRadialMenu()
            {
                IsDragEnabled = true,
                CenterButtonText="",
                CenterButtonFontFamily="Maui Material Assets",
                CenterButtonRadius = 30,
                CenterButtonFontSize = 26,
                CenterButtonBorderThickness = 3
            };

            radialMenu.DragEnd += radialMenu_DragEnd;
            this.Content = radialMenu;
        }

        private void radialMenu_DragEnd(object sender, DragEndEventArgs e)
        {
            e.Handled = true;
        }
    }
}

Placing RadialMenu

You can place radial menu anywhere on its parent layout. Radial Menu’s position is calculated based on parent layout’s center point.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RadialSample"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.RadialMenu;assembly=Syncfusion.Maui.RadialMenu"
             x:Class="RadialSample.MainPage">
    <radialMenu:SfRadialMenu x:Name="radialMenu" 
                             Point="100, 150"
                             CenterButtonText="&#xe710;"
                             CenterButtonFontFamily="Maui Material Assets"
                             CenterButtonRadius="30"
                             CenterButtonFontSize="26" 
                             CenterButtonTextColor="White"
                             CenterButtonBorderColor="White" 
                             CenterButtonBorderThickness="3">
    </radialMenu:SfRadialMenu>
</ContentPage>

C#

using Syncfusion.Maui.RadialMenu;

namespace RadialSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            SfRadialMenu radialMenu = new SfRadialMenu()
            {
                CenterButtonText="",
                CenterButtonFontFamily="Maui Material Assets",
                CenterButtonRadius = 30,
                CenterButtonFontSize = 26,
                CenterButtonBorderThickness = 3,
                Point = new Point(100, 150)
            };

            this.Content = radialMenu;
        }
    }
}