Articles in this section
Category / Section

How to handle selection changed event in Xamarin.forms Carousel?

3 mins read

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; }
}
}
 

 

 

Carousel.png

 

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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!


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