CarouselView & IndicatorView issue in .Net MAUI?

Question

<VerticalStackLayout HeightRequest="50" BackgroundColor="AliceBlue">

<CarouselView Loop="False" IndicatorView="indicatorView" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" IsSwipeEnabled="True">

    <CarouselView.ItemsSource>

        <x:Array Type="{x:Type x:String}">

            <x:String>Item 1</x:String>

            <x:String>Item 2</x:String>

            <x:String>Item 3</x:String>

            <x:String>Item 4</x:String>

        </x:Array>

    </CarouselView.ItemsSource>

    <CarouselView.ItemTemplate>

        <DataTemplate>

            <VerticalStackLayout>

                <Label  Text="{Binding .}" HorizontalTextAlignment="Center"/>

            </VerticalStackLayout>

        </DataTemplate>

    </CarouselView.ItemTemplate>

</CarouselView>

<IndicatorView  x:Name="indicatorView" HorizontalOptions="Center"/>

</VerticalStackLayout>

Issue 1 : When i scroll to change from Item1 to Item2 using mouse scroller. In indicator View it is not updating to Item 2.

Issue 2 : VerticalScrollBarVisibility="Never" and HorizontalScrollBarVisibility="Never" is defined but still it is visible in the View.

Issue 3 : IsSwipeEnabled="True" . From Item1 with mouse cursor when i try to click & drag to Item2 it is not moving to Item2

Development 1: Then how to add previous and next buttons to change from Item's . Based on the inputs from button the CarouselView and IndicatorView should also respond.

Answer 1

Hello,

For issue 1 and issue 2, I have successfully reproduced this problem using your code. This was due to the version of Maui.Controls and after updating it to 8.0.21 in NuGet Manager, these issues no longer occur.

For issue 3, it has nothing to do with how this property is set. CarouselView does not support mouse dragging on windows currently.

For how to change the item with a button, you could implement this feature with the following code.

private void Prev_Clicked(object sender, EventArgs e)
{
    if (carousel.Position != 0)
    {
        carousel.ScrollTo(carousel.Position - 1);
    }


}


private void Next_Clicked(object sender, EventArgs e)
{
    carousel.ScrollTo(carousel.Position + 1);
}

Best Regards,

Alec Liu.

---

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.