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

Question

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

Thanks in advance!

Best regards

Jhonny

Answer 1

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.