CarouselView Animation frozen Android

[davomelkumyan40]

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

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• CarouselView change programmatically Position property or CurrentItem Property throw Java.Lang.IllegalStateException: 'The specified child already has a parent. You must call removeView() on the child's parent first.' (#22504), similarity score: 0.78

Closed similar issues:

• CarouselView does not behave correctly on Windows. (#12358), similarity score: 0.79
• CarouselView - The specified child already has a parent. You must call removeView() on the child's parent first (#20852), similarity score: 0.77
• [Android] CarouselView infinite loading loop when height or width are unbounded (#4082), similarity score: 0.77
• App crashes when changing CarouselView Loop property at runtime (#6457), similarity score: 0.76

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[dotnet-policy-service]

Hi @davomelkumyan40. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[dotnet-policy-service]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.