How to achieve item tapped in Xamarin.Forms SfCarousel?
Using TapGestureRecognizer, you can make Xamarin.Forms SfCarousel items clickable. Create an instance of GestureRecognizers, and set the Tapped event to Xamarin.Forms SfCarousel items.
The following steps explain how to achieve item tapped in Xamarin.Forms SfCarousel.
Step 1: Create an app using the Xamarin.Forms SfCarousel control with all the required assemblies.
Step 2: Create a simple view model class, and add the items that need to be displayed in Xamarin.Forms SfCarousel. The following code sample demonstrates this.
Model
public class CarouselModel{ SfCarousel carouselItem; void HandleAction(object obj) { if (carouselItem.SelectedIndex != (int)obj) { carouselItem.SelectedIndex = (int)obj; } else { Application.Current.MainPage.DisplayAlert("Image", "CarouselItem Tapped", "OKAY"); } } public CarouselModel(SfCarousel carousel) { carouselItem = carousel; ClickCommand = new Command(HandleAction); } public Command ClickCommand { get; set; } private string _image; public string Image { get { return _image; } set { _image = value; } } private int index; public int Index { get { return index; } set { index = value; } }}
ViewModel
public class CarouselViewModel{ public CarouselViewModel(SfCarousel carousel) { ImageCollection.Add(new CarouselModel(carousel, navigation) { Image = "carousel_person1.png", Index = 0 }); ImageCollection.Add(new CarouselModel(carousel, navigation) { Image = "carousel_person2.png", Index = 1 }); ImageCollection.Add(new CarouselModel(carousel, navigation) { Image = "carousel_person3.png", Index = 2 }); ImageCollection.Add(new CarouselModel(carousel, navigation) { Image = "carousel_person4.png", Index = 3 }); ImageCollection.Add(new CarouselModel(carousel, navigation) { Image = "carousel_person5.png", Index = 4 }); } private List<CarouselModel> imageCollection = new List<CarouselModel>(); public List<CarouselModel> ImageCollection { get { return imageCollection; } set { imageCollection = value; } }}
Step 3: Initialize the Xamarin.Forms SfCarousel in XAML page in which the view model class is set to BindingContext, and use GestureRecognizer to make the Xamarin.Forms SfCarousel items clickable.
<ContentPage.Resources> <ResourceDictionary> <DataTemplate x:Key="itemTemplate"> <Image Source="{Binding Image}" Aspect="AspectFit"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding ClickCommand}" NumberOfTapsRequired="1"
CommandParameter="{Binding Index}"> </TapGestureRecognizer> </Image.GestureRecognizers> </Image> </DataTemplate> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <syncfusion:SfCarousel x:Name="carousel" ItemTemplate="{StaticResource itemTemplate}" ItemsSource="{Binding ImageCollection}" ItemHeight="450" Offset="10" RotationAngle="45" ItemWidth="230"/> </ContentPage.Content>
Setting BindingContext
this.BindingContext = new CarouselViewModel(carousel, Navigation);
Output
You can find the sample in the following link: Sample
Conclusion
I hope you enjoyed learning how to achieve item tapped in Xamarin.Forms SfCarousel.
You can refer to our Xamarin. Forms Carousel feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin.Forms Carousel example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
