How to handle selection changed event in Xamarin.forms Carousel?
We can handle the selection of Xamarin Carousel’s item by using “SelectionChanged” event.
SelectionChanged event returns SelectedIndex and SelectedItem that are associated with carousel’s item selected. The following steps illustrate the way to handle “SelectionChanged” event.
Code Example to handle the “SelectionChanged “event by using SfCarouselItem:
C#
public partial class KBSolutionPage : ContentPage { public KBSolutionPage() { InitializeComponent(); //Initialize of carousel control SfCarousel sfCarousel = new SfCarousel(); if (Device.OS == TargetPlatform.Android) { sfCarousel.ItemWidth = 170; sfCarousel.ItemHeight = 250; } if (Device.OS == TargetPlatform.iOS) { sfCarousel.ItemWidth = 150; sfCarousel.ItemHeight = 300; } // getting the collection of carouselitem's Image collection ObservableCollection<SfCarouselItem> collectionOfItems = new ObservableCollection<SfCarouselItem>(); collectionOfItems.Add(new SfCarouselItem() { ImageName = "images1.png" }); collectionOfItems.Add(new SfCarouselItem() { ImageName = "images2.png" }); collectionOfItems.Add(new SfCarouselItem() { ImageName = "images3.png" }); collectionOfItems.Add(new SfCarouselItem() { ImageName = "images4.png" }); collectionOfItems.Add(new SfCarouselItem() { ImageName = "images5.png" }); collectionOfItems.Add(new SfCarouselItem() { ImageName = "images6.png" }); //assign that collection to Datasource of carousel sfCarousel.DataSource = collectionOfItems; this.Content = sfCarousel; //If the carousel's item get changed ,selectionchanged event gets fired and display the alert window with index and item value. sfCarousel.SelectionChanged += (object sender, SelectionChangedEventArgs e) => { this.DisplayAlert("Event fired", "SelectedIndex:" + "\t" + e.SelectedIndex + "\n" + "SelectedItem:" + "\t" + (e.SelectedItem as SfCarouselItem).ImageName.toString(), "Done"); }; } }
Code Example to handle the SelectionChanged event using ItemTemplate:
C#
public partial class KBSolutionPage : ContentPage { public KBSolutionPage() { InitializeComponent(); //Initialize of carousel control SfCarousel sfCarousel = new SfCarousel(); if (Device.OS == TargetPlatform.Android) { sfCarousel.ItemWidth = 170; sfCarousel.ItemHeight = 250; } if (Device.OS == TargetPlatform.iOS) { sfCarousel.ItemWidth = 150; sfCarousel.ItemHeight = 300; } var carouselModel = new List<CarouselModel> { new CarouselModel ("image1.png"), new CarouselModel ("image2.png"), new CarouselModel ("image3.png"), new CarouselModel ("image4.png"), new CarouselModel ("image5.png") }; var carouselModel DataTemplate = new DataTemplate(() => { var grid = new Grid(); var nameLabel = new Image(); nameLabel.SetBinding(Image.SourceProperty, "Image"); grid.Children.Add(nameLabel); return grid; }); //assign that collection to Datasource of carousel sfCarousel.ItemTemplate = carouselModel DataTemplate; sfCarousel.DataSource = carouselModel; this.Content = sfCarousel; //If the carousel's item get changed ,selectionchanged event gets fired and display the alert window with index and item value. sfCarousel.SelectionChanged += (object sender, SelectionChangedEventArgs e) => { this.DisplayAlert("Event fired", "SelectedIndex:" + "\t" + e.SelectedIndex + "\n" + "SelectedItem:" + "\t" + (e.SelectedItem as CarouselModel).Image.toString(), "Done"); }; } } //view model class public class CarouselModel { public CarouselModel(string imagestr) { Image = imagestr; } private string _image; public string Image { get { return _image; } set { _image = value; } } }
Conclusion
I hope you enjoyed learning how to handle SelectionChanged event in Xamarin.forms Carousel.
You can refer to our Xamarin.Carousel feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin Carousel documentation 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!