Reusable label animation messing up stack layout

Question

private async void moveMessage()
    {
        movingLabel = new Label();
        movingLabel.HorizontalTextAlignment = TextAlignment.Center;
        stackLayoutContainingMovingText.Children.Add(movingLabel);

        Animation animation = new Animation();
        double height = Application.Current.MainPage.Height;
        movingLabel.Text = "MESSAGE";

        animation.Commit(movingLabel, "animation", 20, 0, Easing.Linear, (d, f) =>
        {
            movingLabel.TranslateTo(0, height, 0, Easing.Linear);
            movingLabel.TranslateTo(0, -height, 2000, Easing.Linear);
        });

        await Task.Delay(2000);

        stackLayoutContainingMovingText.Children.Remove(movingLabel);

    }

I am calling this method every time a button is clicked. This will animate a label of text to move from the bottom to the top of the screen.

For some reason, I have to create a new label and add it to the stacklayout children because if I don't this animation will only happen once and won't repeat.

Currently this code kind of works, but it pushes all of the controls on the page up and then down during animation. I also want to be able to have the button pressed multiple times which should allow multiple labels to be animating upward at the same time.

I think when you add Label in the Stack Layout, other controls move up because the space it's contains. Can you share your XAML please? — Tuğçe Arar

Wendy Zang - MSFT Wendy Zang - MSFT · Accepted Answer · 2020-09-08T07:56:50

but it pushes all of the controls on the page up and then down during animation.

Because when you click the button, the label was created under the button. This is why all the controls on the page up. And after animation, the new label was removed. So the page down.

Create the label in the xaml and use the code to make the up and down.

xaml:

 <StackLayout x:Name="stackLayoutContainingMovingText">

    <!--  Place new controls here  -->
    <Label
        x:Name="movingLabel"
        HorizontalOptions="Center"
        Text="Welcome to Xamarin.Forms!"
        VerticalOptions="EndAndExpand" />

    <Button
         HorizontalOptions="EndAndExpand"
        x:Name="btn_Move"
        Clicked="btn_Move_Clicked"
        Text="Move" />
</StackLayout>

Code behind:

  private void btn_Move_Clicked(object sender, EventArgs e)
    {
        moveMessage();
    }

    private async void moveMessage()
    {  
        double up = Application.Current.MainPage.Height;
        double down = movingLabel.Height;

        await movingLabel.TranslateTo(0, -up, 2000, Easing.Linear);
        await movingLabel.TranslateTo(0, down, 2000, Easing.Linear);
    }

Screenshot:

Update:

If you want to cancel the animation, you could use the ViewExtensions.CancelAnimations.

 ViewExtensions.CancelAnimations(movingLabel);

When you put this cancel in the button click like below, it would stop the current animation.

   private void btn_Cancel_Clicked(object sender, EventArgs e)
    {
        ViewExtensions.CancelAnimations(movingLabel);
    }

Screenshot:

Reusable label animation messing up stack layout

1 Answers