)
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 bind the SelectedIndex of Carousel

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

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

 

XAML

<ContentPage.Content>
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="40"/>
  </Grid.RowDefinitions>
  <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"/>
</Grid>
</ContentPage.Content>

 

C#

public partial class CarouselFeatureSamplePage  : ContentPage, INotifyPropertyChanged
{
    ObservableCollection<SfCarouselItem> tempCollection = new ObservableCollection<SfCarouselItem>();
 
    public CarouselFeatureSamplePage()
    {
        InitializeComponent();
 
        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; }
        set
        {
            _someNumber = value;
            RaiseProeprtyChanged();
        }
    }
 
    // 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));
    }
 
}

 

 

Carousel

 

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