Skip to content

Lottie animation does not behave as expected inside CollectionView.EmptyView #16584

Closed

Description

Description

Lottie animation (from SkiaSharp) does not behave as intended. I've place it inside the emtpy view of a colletion view, but when the collection is empty and as such, the animation should be visible, it's not. But if i cut and repaste the animation XAML code, while the code is still running, the animation now displays correctly. I've posted a question on stackoverflow -> https://stackoverflow.com/questions/76828839/lottie-animation-using-skiasharp-does-not-display-inside-collectionview-empyvi

2023-08-07-15-45-21.mp4

Steps to Reproduce

  1. Create MAUI project and install the necessary NuGet packets (https://www.nuget.org/packages/SkiaSharp.Extended.UI.Maui/2.0.0-preview.59?_src=template
  2. Make that when the collection view is empty, the lottie is displayed
  3. Run application

Link to public reproduction project repository

No response

Version with bug

7.0.86

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows, I was not able test on other platforms

Affected platform versions

Android 9, Android 13, Windows 10 PRO

Did you find any workaround?

The workaround is to add the lottie animation programmatically as such

private void CollectionView_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    //{
    //    if (filterStatesViewModel.States.Count == 0)
    //    {
    //        emptyViewGrid.Clear();
    //        SKLottieView myanimatedview = new SKLottieView();
    //        var a = new SKFileLottieImageSource();
    //        a.File = "earthanimation.json";
    //        myanimatedview.WidthRequest = 300;
    //        myanimatedview.HeightRequest = 300;
    //        myanimatedview.Source = a;
    //        myanimatedview.RepeatCount = -1;
    //        emptyViewGrid.Add(myanimatedview);
    //        Label label = new Label()
    //        {
    //            Text = "NOT FOUND",
    //            TextColor = Colors.LightBlue,
    //            VerticalOptions = LayoutOptions.CenterAndExpand,
    //            HorizontalOptions = LayoutOptions.CenterAndExpand
    //        };
    //        emptyViewGrid.Add(label);
    //    }

Relevant log output

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    area-controls-collectionviewCollectionView, CarouselView, IndicatorViewarea-layoutStackLayout, GridLayout, ContentView, AbsoluteLayout, FlexLayout, ContentPresenterplatform/android 🤖s/needs-reproAttach a solution or code which reproduces the issues/triagedIssue has been reviewedt/bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions