Description

I'm facing this issue inside of CarouselView when i run animation in infinite loop (only in Portrait mode, in Landscape mode animates fine)

Steps to Reproduce

1. Create a new MAUI Application and in MainPage.xaml add this

    <Grid>
        <CarouselView x:Name="carouselView" 
                      IsBounceEnabled="False"
                      Loop="False" 
                      IsSwipeEnabled="True"
                      IndicatorView="indicatorView" 
                      Scrolled="carouselView_Scrolled">
            <CarouselView.ItemsSource>
                <x:Array Type="{x:Type x:Int32}">
                    <x:Int32>0</x:Int32>
                    <x:Int32>1</x:Int32>
                    <x:Int32>2</x:Int32>
                    <x:Int32>3</x:Int32>
                    <x:Int32>4</x:Int32>
                </x:Array>
            </CarouselView.ItemsSource>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <ContentView>
                        <Grid>
                            <ContentView IsVisible="{Binding ., Converter={cvs:IntToVisibilityConverter}, ConverterParameter=0}">
                                <Grid RowDefinitions="*,150">
                                    <Image HeightRequest="203" Source="welcome_1_image"/>
                                    <Button CornerRadius="24"
                                                VerticalOptions="Center"
                                                Grid.Row="1"
                                                WidthRequest="327"
                                                HeightRequest="48"
                                                FontSize="16"
                                                FontFamily="InterSemiBold"
                                                ImageSource="{AppThemeBinding Dark='rocket_icon', Light='rocket_light_icon'}"
                                                BackgroundColor="{AppThemeBinding Dark={StaticResource NightPrimary}, Light='White'}"
                                                TextColor="{AppThemeBinding Dark='White', Light={StaticResource Primary}}"
                                                Text="Let's take it easy!"/>
                                </Grid>
                            </ContentView>
   
                            <ContentView  IsVisible="{Binding ., Converter={cvs:IntToVisibilityConverter}, ConverterParameter=1}">
                                <Grid RowDefinitions="*">
                                    <Grid Grid.Row="0"
                                          RowDefinitions="1.17*,*"
                                          VerticalOptions="Fill">
                                        <Image Grid.Row="0"
                                               HorizontalOptions="Start"
                                               VerticalOptions="End"
                                               Source="welcome_2_image"/>
                                        <VerticalStackLayout Grid.Row="1" 
                                                             Margin="32,45,25,0"
                                                             VerticalOptions="Start">
                                            <Label Text="A safe and convenient service for all family members"
                                                   FontSize="22"
                                                   TextColor="{AppThemeBinding Light='Black', Dark='White'}"
                                                    FontFamily="InterBold"/>
                                            <Label FontSize="13" 
                                                   Margin="0,7"
                                                   TextColor="{AppThemeBinding Light='Black', Dark='#F6F6F6'}"
                                                   Text="Don't worry about the problems and dangers of traveling for yourself and your family members because we want comfort and convenience for you"/>
                                        </VerticalStackLayout>
                                        <Image Grid.Row="2" 
                                               Loaded="Image_Loaded"
                                               VerticalOptions="End"
                                               Margin="0,0,-2,0"
                                               HorizontalOptions="End"
                                               HeightRequest="90"
                                               Source="{AppThemeBinding Light='swipe_btn_light_image', Dark='swipe_btn_image'}"/>
                                    </Grid>
                                </Grid>
                            </ContentView> 
   
                            <ContentView IsVisible="{Binding ., Converter={cvs:IntToVisibilityConverter}, ConverterParameter=2}">
                                <Grid RowDefinitions="*, 150">
                                    <Border StrokeShape="RoundRectangle 20" Grid.Row="1"
                                            StrokeThickness="0"
                                          BackgroundColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}">
                                        <Button CornerRadius="24"
                                             Clicked="OnNextButtonClicked"
                                             Grid.Row="1"
                                                VerticalOptions="Center"
                                             WidthRequest="327"
                                             HeightRequest="48"
                                             FontSize="16"
                                             FontFamily="InterBold"
                                             ImageSource="{AppThemeBinding Dark='fire_icon', Light='fire_light_icon'}"
                                             BackgroundColor="{AppThemeBinding Dark='White', Light='White'}"
                                             TextColor="{AppThemeBinding Dark={StaticResource PrimaryDark}, Light={StaticResource Primary}}"
                                             Text="Next"/>
                                    </Border>
                                </Grid>
                            </ContentView>
   
                            <ContentView IsVisible="{Binding ., Converter={cvs:IntToVisibilityConverter}, ConverterParameter=3}">
                                <Grid RowDefinitions="*, 150">
                                    <Border StrokeShape="RoundRectangle 20" Grid.Row="1"
                                            StrokeThickness="0"
                                          BackgroundColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}">
                                        <Button CornerRadius="24"
                                                 Clicked="OnNextButtonClicked"
                                                 Grid.Row="1"
                                                    VerticalOptions="Center"
                                                 WidthRequest="327"
                                                 HeightRequest="48"
                                                 FontSize="16"
                                                 FontFamily="InterBold"
                                                 ImageSource="{AppThemeBinding Dark='fire_icon', Light='fire_light_icon'}"
                                                 BackgroundColor="{AppThemeBinding Dark='White', Light='White'}"
                                                 TextColor="{AppThemeBinding Dark={StaticResource PrimaryDark}, Light={StaticResource Primary}}"
                                                 Text="Next"/>
                                    </Border>
                                </Grid>
                            </ContentView>
   
                            <ContentView IsVisible="{Binding ., Converter={cvs:IntToVisibilityConverter}, ConverterParameter=4}">
                                <Grid RowDefinitions="*, 150">
                                    <Border StrokeShape="RoundRectangle 20" Grid.Row="1"
                                            StrokeThickness="0"
                                          BackgroundColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}">
                                        <Button CornerRadius="24"
                                                 Clicked="OnFinishButtonClicked"
                                                 Grid.Row="1"
                                                    VerticalOptions="Center"
                                                 WidthRequest="327"
                                                 HeightRequest="48"
                                                 FontSize="16"
                                                 FontFamily="InterBold"
                                                 ImageSource="{AppThemeBinding Dark='fire_icon', Light='fire_light_icon'}"
                                                 BackgroundColor="{AppThemeBinding Dark='White', Light='White'}"
                                                 TextColor="{AppThemeBinding Dark={StaticResource PrimaryDark}, Light={StaticResource Primary}}"
                                                 Text="Take it easy!"/>
                                    </Border>
                                </Grid>
                            </ContentView>
                        </Grid>
                    </ContentView>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <IndicatorView x:Name="indicatorView"
                       VerticalOptions="End"
                       Margin="0,20"
                       IndicatorSize="9"
                       IndicatorColor="{AppThemeBinding Dark={StaticResource NightSecondary}, Light='White'}"
                   SelectedIndicatorColor="{AppThemeBinding Dark={StaticResource NightPrimary}, Light='White'}"
                   HorizontalOptions="Center" />
    </Grid>```
   
   

2. In MainPage.xaml.cs add this

private bool animationState = false;
private static Image swiper;
public MainPage()
{
    InitializeComponent();
    RunSwipeAnimationAsync();
}
private void OnNextButtonClicked(object sender, EventArgs e)
{
    if (carouselView.Position < carouselView.ItemsSource.Cast<int>().Count() - 1)
    {
        carouselView.Position++;
    }
}

private void Image_Loaded(object sender, EventArgs e)
{
    swiper = (Image)sender;
}

private async Task RunSwipeAnimationAsync()
{
    while (true)
    {
        if (!animationState)
        {
            await Task.Delay(100); // Prevent tight looping when the animation is paused
            continue;
        }

        // Run animation on the UI thread directly
        await MainThread.InvokeOnMainThreadAsync(async () =>
        {
            await swiper.TranslateTo(0, 0, 1000, Easing.SinOut);
            await swiper.TranslateTo(20, 0, 1000, Easing.SinIn);
        });

        Console.WriteLine("Animated" + new string('_', 20) + animationState);
    }
}

private void carouselView_Scrolled(object sender, ItemsViewScrolledEventArgs e)
{
    animationState = carouselView.Position == 1;
}

3. Create converter using this code

public class IntToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return false;
        int currentIndex = (int)value;
        int targetIndex = int.Parse(parameter.ToString());
        return currentIndex == targetIndex;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

4. And run the application

Link to public reproduction project repository

none

Version with bug

8.0.82 SR8.2

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android

Did you find any workaround?

When i comment in array last 3 items, it seems to work, but if there are all 5 pages it stuck

            <CarouselView.ItemsSource>
                <x:Array Type="{x:Type x:Int32}">
                    <x:Int32>0</x:Int32>
                    <x:Int32>1</x:Int32>
                    <!--<x:Int32>2</x:Int32>
                    <x:Int32>3</x:Int32>
                    <x:Int32>4</x:Int32>-->
                </x:Array>
            </CarouselView.ItemsSource>

Relevant log output

No response