Show stacklayout on button click with translateto or IsVisible - How to do it?

Jhonny C 1 Reputation point
2021-01-14T13:59:18.693+00:00

Hello!

I haven't worked with animation and need some suggestions/help. May be there is no need of animation? Only using IsVisible like below?

I want to be able to click on the button as the image shows and expand my hidden stacklayout which will contain a list with stuff(no menu).

At the moment I have everything in a grid and inside it I have this stacklayout.

<AbsoluteLayout IsVisible="{Binding State}">
<StackLayout></StackLayout>
<Button Text="Button" HeightRequest="70" Command="{Binding CloseAndOpen} />
<AbsoluteLayout>

Code above hides absolutelayout so I have another button to activate it which feels very wrong

56606-animate-stack-layout-with-button.png

Thanks in advance!

Best regards

Jhonny

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,300 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. JessieZhang-MSFT 7,706 Reputation points Microsoft Vendor
    2021-01-15T03:29:26.51+00:00

    Hello,

    Welcome to our Microsoft Q&A platform!

    You can use methods( translateto and IsVisible) to achieve the functionality you need.

    You can refer to the following code:

    MainPage.xaml

    <?xml version="1.0" encoding="utf-8" ?>  
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                 x:Class="ShowLayApp1.MainPage">  
      
        <StackLayout Orientation="Horizontal" VerticalOptions="Center" HeightRequest="200">  
            <Frame  
                x:Name="popuplayout"  
                HasShadow="True"  
                IsVisible="False"  
                Scale="0"  
                BackgroundColor="White"  
                AbsoluteLayout.LayoutFlags="All"  
                AbsoluteLayout.LayoutBounds="1,1,0.5,0.5">  
                <StackLayout>  
                    <Label Text="One"/>  
                    <Label Text="Two"/>  
                    <Label Text="Three"/>  
                    <Label Text="Four"/>  
                    <Label Text="Five"/>  
                    <Label Text="Six"/>  
                </StackLayout>  
            </Frame>  
            <Button Text="click"  Clicked="Button_Clicked" HeightRequest="60" WidthRequest="100" VerticalOptions="Center"/>  
      
        </StackLayout>  
    </ContentPage>  
    

    MainPage.xaml.cs

    public partial class MainPage : ContentPage  
    {  
        public MainPage()  
        {  
            InitializeComponent();  
        }  
      
        private async void Button_Clicked(object sender, EventArgs e)  
        {  
            if (!this.popuplayout.IsVisible)  
            {  
                this.popuplayout.IsVisible = !this.popuplayout.IsVisible;  
                this.popuplayout.AnchorX = 1;  
                this.popuplayout.AnchorY = 1;  
      
                Animation scaleAnimation = new Animation(  
                    f => this.popuplayout.Scale = f,  
                    0.5,  
                    1,  
                    Easing.SinInOut);  
      
                Animation fadeAnimation = new Animation(  
                    f => this.popuplayout.Opacity = f,  
                    0.2,  
                    1,  
                    Easing.SinInOut);  
      
                scaleAnimation.Commit(this.popuplayout, "popupScaleAnimation", 250);  
                fadeAnimation.Commit(this.popuplayout, "popupFadeAnimation", 250);  
            }  
            else  
            {  
                await Task.WhenAny<bool>  
                  (  
                    this.popuplayout.FadeTo(0, 200, Easing.SinInOut)  
                  );  
      
                this.popuplayout.IsVisible = !this.popuplayout.IsVisible;  
            }  
        }  
    }  
    

    Best Regards,

    Jessie Zhang

    ---
    If the response is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments