Xamarin Forms wait for animation or event to finish

Viewed 4555

So i'm trying to make my button perform its animation before another action happens. But its kind of weird how i have it set up.

I have a subclassed button called AnimatedButton that adds a Click += AnimatedButton_Clicked handler that does the animations, as seen below:

    using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace TransactionApp_2.Views.UITools.Buttons
{
    class AnimatedButton : Button
    {
        /// <summary>
        /// Generic Animated Button Subclass that allows for:
        /// Button indexing,
        /// Simple sleek animations,
        /// Sets initial properties and parameters,
        /// allows easy background images
        /// </summary>

        public int ButtonIndex { get; set; }
        public AnimatedButton(string buttonText, ImageSource backgroundImage = null, int buttonIndex = 0)
        {
            ButtonIndex = buttonIndex;
            Text = buttonText;
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label));
            Opacity = 0.95;
            Margin = new Thickness(8,0,8,0);

            Clicked += AnimatedButton_Clicked;

            if (backgroundImage != null)
            {
                //Set Background Image
            }

        }
        private async void AnimatedButton_Clicked(object sender, EventArgs e)
        {

            //Obsolete version of OnPlatform
#pragma warning disable CS0618 // Type or member is obsolete
            var platformSpecific = Device.OnPlatform<uint>(50, 50, 25); //Whats the new version of this??
#pragma warning restore CS0618 // Type or member is obsolete

            //Simple Animations
            await this.ScaleTo(0.85, platformSpecific, Easing.SinIn);


     await this.FadeTo(0.8, platformSpecific, Easing.SinOut);
        await this.FadeTo(0.95, platformSpecific, Easing.SinIn);
        await this.ScaleTo(1, platformSpecific, Easing.SinOut);
    }
}

}

In my UI backend code I also add a new clicked event that refreshes the grid of the UI as seen below:

            for (int i = 0; i < count; i++)
        {

            grid.RowDefinitions.Add(rowCollection[i]);
            AnimatedButton button = new AnimatedButton(menuOptions.ItemDataList[i].TitleText) { ButtonIndex = i+1};
            button.Clicked += (s, e) =>
            {
                        RefreshGrid(button.ButtonIndex);
            };
            grid.Children.Add(button, 0, i + 1);
        }

Obviously the two events are both executed at the same exact time when the button is pressed, the grid is refreshed before the animation finishes. Using this type of set up how can I make the RefreshGrid() call wait until the animation in the subclass is finished? I've been trying to use threading to handle this issue but no luck.

Thinking maybe there was a way to wait on the event or the animation to finish before the RefreshGrid() was called, or use Threading better.

Thanks!

2 Answers

Add delay as much as your animation.

await grid1.TranslateTo(-100, 0, 300);
await Task.Delay(300);
Related