|
“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));
}
}
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
