)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to handle SelectionChanged event in Carousel

Platform: Xamarin.Forms |
Control: SfCarousel |
Published Date: February 24, 2017 |
Last Revised Date: June 25, 2019

We can handle the selection of 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

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon