Xamarin forms Carousel view does not allow skipping position

Question

So i am trying to implement a wizard using carousel view that has next and previous buttons. For some reason the carousel view does not allow me to navigate multiple positions. For example if the view is currently at position 0 and i want to jump to position 2 it will go to position 1.

So view in xaml:

<CarouselView CurrentItemChanged="CurrentCarouselItemChanged" x:Name="EventWizardCarouselView" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Row="0">
    <CarouselView.ItemsSource>
        <x:Array Type="{x:Type ContentView}">
            <views:EventBasicInfoView x:Name="eventWizardViewEventBasicInfo"/>
            <views:EventRulesView x:Name="eventWizardViewEventRules"/>
            <views:EventLocationsView x:Name="eventWizardViewEventLocations"/>
        </x:Array>
    </CarouselView.ItemsSource>
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <ContentView Content="{Binding .}"/>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

private void OnNextClicked(object sender, EventArgs e) {
    EventWizardCarouselView.Position = 2;
    OnPropertyChanged("Position");
}

Moral of the story here is that when in position 0 and i programatically set it to position 2 it will display position 1? However from position 1 it will go to position 2 just fine?

Answer 1

On Android, set the CurrentItem property of the carouselview. On iOS, set the Position property. Something like this code:

if (Device.RuntimePlatform == Device.Android) {
    var selected = YourViewModelCollection[2];
    EventWizardCarouselView.CurrentItem = selected;
} else if (Device.RuntimePlatform == Device.iOS) {
    EventWizardCarouselView.Position = 2;
}

Answer 2

There are two kinds of way to change position of CarouselView , however the effects of animation all will show the middle position when skipping position.

One is using CurrentItem or Position , they all can used in Android /iOS even in UWP (if no problem when running UWP).

• CurrentItem, of type object, the current item being displayed. This property has a default binding mode of TwoWay, and has a null value when there isn't any data to display.

eg : carouselView.CurrentItem = viewmodel;

• Position, of type int, the index of the current item in the underlying collection. This property has a default binding mode of TwoWay, and has a 0 value when there isn't any data to display.

eg :carouselView.Position= position;

Another is using Scrolling .

carouselView.ScrollTo(position);

or

carouselView.ScrollTo(ViewModel);

Note :

Not too much focus on UWP , because CarouselView is available on iOS and Android, but some functionality may only be partially available on the Universal Windows Platform.

And CarouselView is a preview Control which statrs available in Xamarin.Forms 4.3.

Answer 3

I was able to solve this on UWP by turning off animation. This is more of a band-aid than a fix but works for now. For those that run into this note that animation is set to true by default and i had to use ScrollTo(index, groupindex, type, false).

Answer 4

I have not found the "real" solution for this problem, but I developed a quick workaround that looks nice enough.

In my app I got 3 tabs. Moving by 1 tab works fine so I just check if I want to got from the first to the last or the other way round and then just make it two movements:

if (Device.RuntimePlatform == Device.iOS 
    && Math.Abs(oldIndex - newIndex) > 1) // Tab index is changed by 2?
{
    _carouselView.ScrollTo(1);

    // Second move after delay
    Task.Delay(500).ContinueWith((_) => Device.BeginInvokeOnMainThread(() => 
        _carouselView.ScrollTo(newIndex)), 
        TaskScheduler.FromCurrentSynchronizationContext()
    );
}
else
{
    _carouselView.ScrollTo(newIndex);
}

No customer complained so far :-)