I’m trying to create a simple component for my app created with .NET 8 MAUI. The source code is on GitHub.

The list of buttons is contained in a StackLayout called availableWordsLayout. When the user clicks on a button, the StackLayout is changed to selectedWordsLayout. I want to add an animation to this transition.

Here is the code:

private async Task AnimateButton(Button button, Layout fromLayout, Layout toLayout)
{
    var initialPosition = button.Bounds;
    fromLayout.Children.Remove(button);
    toLayout.Children.Add(button);

    var finalPosition = button.Bounds;
    button.TranslationX = initialPosition.X - finalPosition.X;
    button.TranslationY = initialPosition.Y - finalPosition.Y;

    await button.TranslateTo(0, 0, AnimationDuration, Easing.CubicInOut);
}

If the user clicks on a button in the selectedWordsLayout, I want to do the opposite. In this case, I get an error

System.Runtime.InteropServices.COMException: ‘No installed components were detected.

This error is on Windows. On Android the error is different

Java.Lang.IllegalStateException: ‘The specified child already has a parent. You must call removeView() on the child’s parent first.’

What I noticed is that when the button is added to the selectedWordsLayout, it works. Viceversa, when the user clicks on a button in the selectedWordsLayout, the line fromLayout.Children.Remove(button); passes but the Parent is not removed; then, this line toLayout.Children.Add(button); failed.

The Parent is read only. How can I fix this issue?

Update

I noticed an interesting thing. If I remove the DragGestureRecognizer and DropGestureRecognizer from the button, the code is working.