How to implement ItemTapped in .NET MAUI Radial Menu with custom templates?

To implement the ItemTapped behavior in a .NET MAUI Radial Menu while using custom templates, follow these steps:

Step 1: Prepare the ViewModel
Define the view model with properties for the items to be displayed in the Radial Menu and a command for handling item taps.

C#

public class EmployeeModel : INotifyPropertyChanged 
{  
    public string Icon { get; set; }
    public string EmployeeName { get; set; }
    public event PropertyChangedEventHandler PropertyChanged;
}

public class EmployeeViewModel 
{
    public ICommand RadialMenuCommand { get; private set; }
    private ObservableCollection<EmployeeModel> employeeCollection = new ObservableCollection<EmployeeModel>();
    public ObservableCollection<EmployeeModel> EmployeeCollection 
    {
        get { return employeeCollection; }
        set { employeeCollection = value; }
    }
        public EmployeeViewModel() {
        RadialMenuCommand = new Command(RadialItemTapped);

        EmployeeCollection.Add(new EmployeeModel() { Icon = "\uE700", EmployeeName = "Alex" });
        EmployeeCollection.Add(new EmployeeModel() { Icon = "\uE715", EmployeeName = "Lee" });
        EmployeeCollection.Add(new EmployeeModel() { Icon = "\uE70A", EmployeeName = "Ben" });
        EmployeeCollection.Add(new EmployeeModel() { Icon = "\uE716", EmployeeName = "Carl" });
        EmployeeCollection.Add(new EmployeeModel() { Icon = "\uE77E", EmployeeName = "Yang" });
    }

    void RadialItemTapped(object obj)
    {
        var alertResult = Application.Current.MainPage.DisplayAlert("Message", (obj as EmployeeModel)?.EmployeeName, null, "OK");
    }
}

Step 2: Define the ItemTemplate in XAML
Create a DataTemplate for the Radial Menu items. Use a TapGestureRecognizer to handle item taps and bind them to the RadialMenuCommand from the view model.

XAML

 <radialMenu:SfRadialMenu x:Name="radial_Menu"
                          CenterButtonRadius="20"
                          CenterButtonBackFontFamily="MauiMaterialAssets"
                          CenterButtonFontFamily="MauiMaterialAssets"
                          CenterButtonFontSize="28"
                          CenterButtonText=""
                          ItemsSource="{Binding EmployeeCollection}">
     <radialMenu:SfRadialMenu.ItemTemplate>
         <DataTemplate>
             <StackLayout VerticalOptions="Center">
                 <Image>
                     <Image.GestureRecognizers>
                         <TapGestureRecognizer  Command="{Binding BindingContext.RadialMenuCommand,Source={x:Reference radial_Menu}, Mode=TwoWay}" CommandParameter="{Binding}" />
                     </Image.GestureRecognizers>
                     <Image.Source>
                         <FontImageSource FontFamily="MauiMaterialAssets" Color="Black" Glyph="{Binding Icon, Mode=TwoWay}" />
                     </Image.Source>
                 </Image>
             </StackLayout>
         </DataTemplate>
     </radialMenu:SfRadialMenu.ItemTemplate>
 </radialMenu:SfRadialMenu>

Output

Download the complete sample from GitHub.

Conclusion
I hope you enjoyed learning how to get the ItemTapped behavior in the .NET MAUI Radial Menu when using custom templates.

Refer to our .NET MAUI Radial Menu feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Radial Menu documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Navigation Drawer and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal, or the feedback portal. We are always happy to assist you!