Xamarin.Forms animation inside Listview stops working if collection changes

Question

I am having a hard time figuring what's going on with my animation.

Viewmodel is composed of an ObservableCollection and every item contains a child ObservableCollection .

Parents collection is bound to a BindableLayout . The ItemTemplate of that layout contains a Listview to display child's elements.

<StackLayout BindableLayout.ItemsSource ="{Binding Parents}">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="models:ParentRows">
            <StackLayout>      
                <Grid BackgroundColor="White" >
                     <!-- Some bindable content there -->
                </Grid>
            
               <ListView ItemsSource="{Binding Childs}" CachingStrategy="RecycleElementAndDataTemplate" RowHeight="50">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="models:ChildRows">
                            <ViewCell>
                                <StackLayout BackgroundColor="White">
                                    <controls:AnimatedGrid Refresh="{Binding Animation}"
                                          <!-- Some bindable content there -->
                                    </controls:AnimatedGrid>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

I am using an AnimatedGrid on the child listview, this control is inherinting from Grid. It has an extra BindableProperty nammed Refresh and an Animation code that gets called whenever Refresh property changes .

        private async void AnimateItem()
        {
            await Device.InvokeOnMainThreadAsync(() =>
            {
                this.RotateTo(360,500);
            });
        }

Everything works fine until i start filtering the list. Once i filter the list, subsequent call of AnimateItem will have no effect . To be more precise, if parent item got removed from list, and then added again, childs of this parent will never animate again. Filtering the List consist of Removing/Inserting parents to the observable collection (myCollection.Remove(item), myCollection.Insert(index, item), using Collection methods from framework) .

This does not seems to be an observable collection binding issue, as values inside parent and childs collection still update perfectly find. Changing CachingStrategy also have no impact on the issue.

I found that, if i replace the ListView control by a CollectionView, the problem disappear . However, i realy want to find a solution that would alow me to keep the listview control as switching to CollectionView would introduce to many other undesirable effect.

Edit 22/02/2022: I made a sample project to reproduce the issue on github.

• Basicaly, you can click the "Rotate Random" multiple time to make random child spin.
• Once you click the "Remove and add 2 parent", you can see that the removed/reinserted items does not rotate anymore.

Edit 15/03/2022: I am still not able to figure what's wrong. However, for test purpose, i added in the control constructor, a task.delay followed by an animation call, and this call is working on filtered items. That's beyond my understanding.

Answer 1

The solution

In your AnimatedGrid class, add an isAttached flag, and add the following lines to your OnPropertyChanged override:

bool isAttached = false;

protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    base.OnPropertyChanged(propertyName);

    if (propertyName == "Renderer")
    {
        isAttached = !isAttached;
        if (!isAttached) this.RemoveBinding(RefreshProperty);
    }

    if (propertyName == nameof(Refresh))
    {
    ...

The why

Disclaimer: it took me a long time to figure out what was going on here, and although i was able to fix the problem, i would not claim that i completely and perfectly understand it. I believe this is a bug in Xamarin, and in your case i would file an issue in Github (although maybe MAUI will have this corrected...)

When a ChildItem is removed ( do Filter ), the old ChildItem-AnimatedGrid 's Refresh property remains bound to the ChildItem 's AnimationInt property.

When a ChildItem is added again ( remove Filter ), a new view is created.

Now the problem is evident: when the ChildItem 's AnimationInt property changes (tap on ROTATE RANDOM button) the old ChildItem-AnimatedGrid 's Refresh is notified, and then the old View is rotated, but the new ramains unchanged (it does not rotate).

---

Once the problem is understood, we need to figure out how to remove the binding of the old view when the view is dettached : well, to do this i used the fact that the VisualElement 's Renderer property is set/modified when the element is attached and again when it is detached: The fist time it is called i set the isAttached flag to true . The second time it is called i set the flag to false , and i remove the binding. Removing the binding of the old View allows the new View to be correctly bound.