How to bind the selected index of Carousel in Xamarin.Forms application?
“SelectedIndex” property of Xamarin 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));
}
}
|
Conclusion
I hope you enjoyed learning how to bind the SelectedIndex of Carousel in Xamarin.Forms application.
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
