Net maui carouselview current item s index show problem ?

Question

I have carouselview and you add timer (autoplay) that is working...

I added

totalCounter is total amount of images which is showing fine

currentCounter is current index of images which starts fine (shown 1) but and of images loop=true it starts from 0 index expected 1 again ( for example 3 images 3/1 3/2 3/3 like that is correct - 3/0 3/1 3/2 like that is wrong)

How to solve that problem ? and also when I swipe images manually how to show current item on currentCounter as same as ( for example 3 images 3/1 3/2 3/3 - 3/1 like that go on )

Thanks..

Best Regards

  public static readonly BindableProperty ItemsSourceProperty =
BindableProperty.Create("ItemsSource", typeof(ObservableCollection<string>), typeof(Carousel), new ObservableCollection<string>());
    public ObservableCollection<string> ItemsSource
    {
        get { return (ObservableCollection<string>)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

public readonly IDispatcherTimer timer;

    public Carousel()
    {
        InitializeComponent();

        var timer = Microsoft.Maui.Controls.Application.Current.Dispatcher.CreateTimer();
        timer.Interval = TimeSpan.FromSeconds(5);
        timer.Tick += (s, e) =>
        {
          
            MainThread.BeginInvokeOnMainThread(() =>
            {
                mainCarousel.Position = (mainCarousel.Position + 1) % ItemsSource.Count;
                totalCounter.Text = ItemsSource.Count.ToString();
                currentCounter.Text = mainCarousel.Position.ToString();
            });
        };

        timer.Start();
}

xaml....

<StackLayout Orientation="Horizontal" Padding="8,2,2,2" Spacing="6">
                    <Label x:Name="totalCounter" TextColor="{StaticResource White}" FontSize="{StaticResource XXXSFontSize}"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" WidthRequest="8" Margin="0,2,0,0" />
                    <Grid ZIndex="1" HorizontalOptions="End">
                        <BoxView  Color="{StaticResource Home}" CornerRadius="0,3,0,3" />
                        <Label x:Name="currentCounter" TextColor="{StaticResource White}" FontSize="{StaticResource XXXSFontSize}"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" WidthRequest="8" Margin="5,2,6,0"  />
                    </Grid>
                </StackLayout>

Answer 1

Hello,

images loop=true it starts from 0 index expected 1 again

As described in the Doc : Position, of type int, the index of the current item in the underlying collection, the first item's index is 0. You can get the correct index value by using % to do the remainder calculation, so you should plus one when displaying the position.

currentCounter.Text = (mainCarousel.Position+1).ToString();

when I swipe images manually how to show current item on currentCounter as same as ( for example 3 images 3/1 3/2 3/3 - 3/1 like that go on )

You could call PositionChanged event to response to the position changing.

<CarouselView  x:Name="mainCarousel"...
                   PositionChanged="mainCarousel_PositionChanged"
                   >

private void mainCarousel_PositionChanged(object sender, PositionChangedEventArgs e)
    {
        int currentItemPosition = e.CurrentPosition;
        currentCounter.Text = (currentItemPosition + 1).ToString();
    }

In addition, you could try to move the adding timer method into Loaded method instead of constructor method, and set currentCounter.Text to the default value of 1.

public Carousel()
    {
        InitializeComponent();
        this.Loaded += Carousel_Loaded;
    }

   private void Carousel_Loaded(object sender, EventArgs e)
    {
        totalCounter.Text = ItemsSource.Count.ToString();
        currentCounter.Text = (mainCarousel.Position + 1).ToString();// default 1
        ...
        timer.Start();
    }

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.