CODEWITHSUNDEEP
c#xamarin.forms
Chandu Ranwala
Chandu Ranwala

Reputation: 305

Animate a View From Bottom to Top Xamarin Forms

I am working with a view that need to be animate from bottom to top when press a button.

I tried with TranslateTo function but not succeeded.

enter image description here

this is the view I need to implement.

any suggestions?

    <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
        <!-- Place new controls here -->

        <Button Text="Scan" Clicked="Button_OnClicked"/>
    </StackLayout>

        <StackLayout x:Name="ScanView" AbsoluteLayout.LayoutBounds="1,1,1,0.3" AbsoluteLayout.LayoutFlags="All"
                     IsVisible="False" BackgroundColor="Blue">
            <Label Text="Animate" HeightRequest="100"></Label>
        </StackLayout>
    </AbsoluteLayout>``` 

ScanView.IsVisible = true;
            ScanView.Rotation = 0;
            await Task.WhenAll(
            ScanView.TranslateTo(0, 0, 2000, Easing.SinInOut));

Upvotes: 0

Views: 2149

Answers (1)

Nikhileshwar
Nikhileshwar

Reputation: 1684

There were two problems in the above code:

  1. The IsVisible is set to False. Set it to True.
  2. The Translation offset is set to 0, in the button click. Check the MSDocs for syntax. If Translating to Zero is intended, Set TranslateY of the ScanView to a value initially to its Height.

Fixed code:

XAML

<AbsoluteLayout>
    <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
    <!-- Place new controls here -->

        <Button Text="Scan" Clicked="Button_OnClicked"/>
    </StackLayout>

    <StackLayout x:Name="ScanView"
                 AbsoluteLayout.LayoutBounds="0,1,1,0.3"
                 AbsoluteLayout.LayoutFlags="All"
                 TranslationY="{Binding Height, Source={x:Reference ScanView}}"
                 IsVisible="True" BackgroundColor="Blue">
        <Label Text="Animate" HeightRequest="100"></Label>
    </StackLayout>
</AbsoluteLayout>

CS

private void Button_OnClicked(object sender, EventArgs args)
    {
        ScanView.TranslateTo(0, 0, 200);
    }

enter image description here

Hope this might help.

Upvotes: 1

Related Questions