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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind the SelectedIndex of Carousel

Platform: Xamarin.Forms |
Control: SfCarousel

SelectedIndex” property of Carousel allows to bind the values on it. We can bring item to the center of the screen using “SelectedIndex” property. The following procedure will help to give a way to bind entry value with selected index property of carousel.


Step1: Create a carousel control with needed assemblies.


Step2: Here, we have bind the value enter in entry control with SelectedIndex property of carousel control.


Step3: We can get the enter entry’s value by using its TextChanged event. And then bind the same with selectedIndex property of carousel.


The following code illustrates the way to bind the selectedIndex value in carousel



    <RowDefinition Height="*"/>
    <RowDefinition Height="40"/>
  <syncfusion:SfCarousel x:Name="carousel" SelectedIndex="{Binding SomeNumber,Mode=TwoWay}" />
  <Entry x:Name="entry" BackgroundColor="Silver" TextColor="Blue" Grid.Row="1" WidthRequest="50" HorizontalOptions="CenterAndExpand"/>



public partial class CarouselFeatureSamplePage  : ContentPage, INotifyPropertyChanged
    ObservableCollection<SfCarouselItem> tempCollection = new ObservableCollection<SfCarouselItem>();
    public CarouselFeatureSamplePage()
        for (int i = 0; i < 7; i++)
            tempCollection.Add(new SfCarouselItem() { ImageName = "image" + (i + 1) + ".png" });
        carousel.DataSource = tempCollection;
        if (Device.OS == TargetPlatform.Android)
            carousel.ItemWidth = 170;
            carousel.ItemHeight = 250;
        if (Device.OS == TargetPlatform.iOS)
            carousel.ItemWidth = 170;
            carousel.ItemHeight = 400;
        this.BindingContext = this;
        entry.TextChanged += entryTextChanged;
    // Handle the TextChanged event to find the changed text in entry.
    public void entryTextChanged(object e, TextChangedEventArgs arg)
        SomeNumber = int.Parse(arg.NewTextValue.ToString());
    private int _someNumber = 0;
    public int SomeNumber
        get { return _someNumber; }
            _someNumber = value;
    // To have dynamic changes support 
    public event PropertyChangedEventHandler PropertyChanged;
    protected void RaiseProeprtyChanged([System.Runtime.CompilerServices.CallerMemberName]string propertyName = "")
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));





2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
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