Events in .NET MAUI Radial Menu (SfRadialMenu)

29 Jul 202618 minutes to read

.NET MAUI Radial Menu raises a set of events that you can subscribe to in order to react to user interaction, navigation, and life cycle changes. This document describes each event, the arguments it provides, and shows how to wire it up in both XAML and C#.

Event	Raised when	Cancelable	EventArgs
Navigating	Before the menu moves to the next or previous level.	Yes	NavigatingEventArgs
Navigated	After the menu has moved to a new level.	No	NavigatedEventArgs
Opening	When the menu begins to open.	No	OpeningEventArgs
Opened	When the menu has fully opened.	No	OpenedEventArgs
Closing	When the menu begins to close.	No	ClosingEventArgs
Closed	When the menu has fully closed.	No	ClosedEventArgs
CenterButtonBackTapped	When the center back button is tapped.	No	CenterButtonBackTappedEventArgs
ItemTapped (on SfRadialMenuItem)	When an item is tapped.	No	ItemTappedEventArgs
TouchDown (on SfRadialMenuItem)	When the user presses an item.	No	RadialMenuItemEventArgs
TouchUp (on SfRadialMenuItem)	When the user releases the press on an item.	No	RadialMenuItemEventArgs

The two ItemTapped, TouchDown, and TouchUp events are raised by SfRadialMenuItem, not by SfRadialMenu. Subscribe to them on the item instance, not on the menu.

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.

Perform an action while navigating to the next level

Use these events to react when the Radial Menu moves between levels. The Navigating event occurs when moving from one level to another (and is cancelable), and the Navigated event triggers after reaching the new level. Events fire in this order: Navigating → Navigated.

XAML

<radialMenu:SfRadialMenu Navigating="SfRadialMenu_Navigating" 
                         Navigated="SfRadialMenu_Navigated">
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    Items =  new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    },
};

radialMenu.Navigating += SfRadialMenu_Navigating;
radialMenu.Navigated += SfRadialMenu_Navigated;

The Navigating and Navigated events can be handled in C# as follows:

C#

private async void SfRadialMenu_Navigating(object sender, NavigatingEventArgs e)
{
    await DisplayAlert("Alert", "ItemNavigating", "Ok");
}

private async void SfRadialMenu_Navigated(object sender, NavigatedEventArgs e)
{
    await DisplayAlert("Alert", "ItemNavigated", "Ok");
}

NOTE

You can cancel navigation using the Cancel event argument.

Perform an action while opening the Radial Menu

You can react when the Radial Menu opens. The Opening event occurs when the Radial Menu begins to open, and the Opened event occurs once it is fully open.

XAML

<radialMenu:SfRadialMenu Opening ="SfRadialMenu_Opening" 
                         Opened="SfRadialMenu_Opened">
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    Items =  new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    },
};

radialMenu.Opening += SfRadialMenu_Opening;
radialMenu.Opened += SfRadialMenu_Opened;

The Opening and Opened events can be handled in C# as follows:

C#

private async void SfRadialMenu_Opening(object sender, OpeningEventArgs e)
{
    await DisplayAlert("Alert", "ItemOpening", "Ok");
}

private async void SfRadialMenu_Opened(object sender, OpenedEventArgs e)
{
    await DisplayAlert("Alert", "ItemOpened", "Ok");
}

Perform an action while closing the Radial Menu

You can perform an action when closing the Radial Menu. The Closing event occurs when the Radial Menu begins to close, and the Closed event occurs once it is completely closed.

XAML

<radialMenu:SfRadialMenu Closing ="SfRadialMenu_Closing" 
                         Closed="SfRadialMenu_Closed">
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    Items =  new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    },
};

radialMenu.Closing += SfRadialMenu_Closing;
radialMenu.Closed += SfRadialMenu_Closed;

The Closing and Closed events can be handled in C# as follows:

C#

private async void SfRadialMenu_Closing(object sender, ClosingEventArgs e)
{
    await DisplayAlert("Alert", "ItemClosing", "Ok");
}

private async void SfRadialMenu_Closed(object sender, ClosedEventArgs e)
{
    await DisplayAlert("Alert", "ItemClosed", "Ok");
}

Perform an action while tapping the center back button

You can react when the user taps the center back button of the Radial Menu. The CenterButtonBackTapped event occurs when the center back button is tapped. The event is raised only when the back button is visible (i.e. when the menu is on a sub-level).

XAML

<radialMenu:SfRadialMenu CenterButtonBackTapped="SfRadialMenu_CenterButtonBackTapped">
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    Items =  new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    },
};

radialMenu.CenterButtonBackTapped += SfRadialMenu_CenterButtonBackTapped;

The CenterButtonBackTapped event can be handled in C# as follows:

C#

private async void SfRadialMenu_CenterButtonBackTapped(object sender, CenterButtonBackTappedEventArgs e)
{
    await DisplayAlert("Alert", "CenterButtonTapped", "Ok");
}

Perform an action while tapping the Radial Menu item

You can react when the user taps an item in the Radial Menu. The ItemTapped event is an item-level event on SfRadialMenuItem and is triggered when any item in the Radial Menu is tapped. The ItemTappedEventArgs payload exposes the tapped item and its level.

XAML

<radialMenu:SfRadialMenu>
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12" 
                                     ItemTapped="SfRadialMenuItem_ItemTapped"/>
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    Items =  new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    },
};

radialMenu.Items[0].ItemTapped += SfRadialMenuItem_ItemTapped;

The ItemTapped event can be handled in C# as follows:

C#

private async void SfRadialMenuItem_ItemTapped(object sender, Syncfusion.Maui.RadialMenu.ItemTappedEventArgs e)
{
    await DisplayAlert("Alert", "ItemTapped", "Ok");
}

Perform an action while pressing and releasing the Radial Menu item

You can react to the user pressing and releasing an item. The TouchDown event occurs when the user presses the item, and the TouchUp event occurs when the user releases the press. Both events are item-level and are only raised while the menu is open.

XAML

<radialMenu:SfRadialMenu>
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12" 
                                     TouchDown="SfRadialMenuItemTouchDown" 
                                     TouchUp="SfRadialMenuItemTouchUp" />
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    Items =  new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    },
};

radialMenu.Items[0].TouchDown += SfRadialMenuItemTouchDown;
radialMenu.Items[0].TouchUp += SfRadialMenuItemTouchUp;

The TouchDown and TouchUp events can be handled in C# as follows:

C#

private async void SfRadialMenuItemTouchDown(object? sender, RadialMenuItemEventArgs e)
{
    await DisplayAlert("Alert", "The RadialMenuItem is pressed.", "Ok");
}

private async void SfRadialMenuItemTouchUp(object? sender, RadialMenuItemEventArgs e)
{
    await DisplayAlert("Alert", "The RadialMenuItem is released.", "Ok");
}

See also

• Radial Menu Item’s Customization in MAUI Radial Menu
• Segmenting and Placing Items in .NET MAUI Radial Menu
• Center Button Customization in MAUI Radial Menu