How to get the ItemTapped behavior in Xamarin.Forms Radial Menu when using custom templates
You can follow these steps to achieve the ItemTapped behavior in ItemTemplate.
Step 1: Provide the desired ItemTemplate items in the ViewModel.
Step 2: Bind the same to ItemsSource.
Step 3: By using the TapGestureRecognizer, you can achieve the same ItemTapped behavior in ItemTemplate with the BindingContext source being set for SfRadialMenu.
XAML
<ContentPage.Resources> <ResourceDictionary> <OnPlatform x:Key="customfontfamily" x:TypeArguments="x:String" Android="radialmenu_Segoe MDL2 Assets.ttf#Segoe MDL2 Assets" WinPhone="radialmenu_Segoe_MDL2_Assets.ttf#Segoe MDL2 Assets" iOS="Segoe MDL2 Assets" /> </ResourceDictionary> </ContentPage.Resources>
<ContentPage.Content> <radialMenu:SfRadialMenu x:Name="radial_Menu" CenterButtonRadius="20" ItemsSource="{Binding EmployeeCollection}"> <radialMenu:SfRadialMenu.CenterButtonView> <Grid> <StackLayout VerticalOptions="Center"> <Image Source="search.png"/> </StackLayout> </Grid> </radialMenu:SfRadialMenu.CenterButtonView> <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="{StaticResource customfontfamily}" Color="Black" Glyph="{Binding Icon, Mode=TwoWay}" /> </Image.Source> </Image> </StackLayout> </DataTemplate> </radialMenu:SfRadialMenu.ItemTemplate> </radialMenu:SfRadialMenu> </ContentPage.Content> </ContentPage> |
C#
public class EmployeeModel : INotifyPropertyChanged { private string icon;
public string Icon { get { return icon; } set { icon = value; NotifyPropertyChanged(nameof(Icon)); } } public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } private string employeeName;
public string EmployeeName { get { return employeeName; } set { employeeName = value; } }
}
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 = "\uE85C", EmployeeName = "Ben" }); EmployeeCollection.Add(new EmployeeModel() { Icon = "\uE88A", EmployeeName = "Carl" }); EmployeeCollection.Add(new EmployeeModel() { Icon = "\uE779", EmployeeName = "Yang" }); } void RadialItemTapped(object obj) { var alertResult = Xamarin.Forms.Application.Current.MainPage.DisplayAlert("Message", (obj as EmployeeModel)?.EmployeeName, null, "OK"); } } } |
Output

Please refer to this sample link, for reference.