Articles in this section

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

A picture containing clock, object

Description automatically generated

 

Please refer to this sample link, for reference.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied