CODEWITHSUNDEEP
animationxamarinxamarin.formsuser-experience
nix
nix

Reputation: 2285

Is it possible to animate elements inside StackLayout?

Here, I provide a rough scheme of my layout and what it looks like:

le rough scheme

I want to add the following functionality: at first, I want the password label and entry to be invisible and the submit button to be at it's place. When the user will enter a valid username, the submit button should slide down and the password label/entry should appear (and reverse this animation if the username is invalid again). What I figured out, is that I should put a white box over password label/entry, change its opacity from 0 to 1 and slide the submit button by password label/entry height. Notice, that the submit button should be over the password label/entry, because when sliding, it's possible that password label/entry will overlay the submit button.

My question is: (1) is it possible to do using the StackLayout, using the scheme I'm using now and if no, (2) how can I do that? Thanks in advance.

Upvotes: 0

Views: 1158

Answers (1)

George Papadakis
George Papadakis

Reputation: 1378

Yes it is possible.

First of all in order the button to move around the page, you should have an absolutelayout. So wrap everything in an AbsoluteLayout

I would set the initial Scale="0" for the password entry. So when the user gets valid

Here is the 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="ThesisSFA.Pages.Page1">
  <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <StackLayout Orientation="Horizontal" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
      <Label Text="User:"></Label>
      <Editor x:Name="EditorUser" Text="" WidthRequest="100"></Editor>
    </StackLayout>
    <StackLayout x:Name="StackPass" Orientation="Horizontal" Scale="0" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.6,-1,-1">
      <Label  Text="Pass:"></Label>
      <Editor Text="" WidthRequest="100"></Editor>
    </StackLayout>
    <Button x:Name="ButtonSubmit" Text="Submit" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.6,-1,-1"></Button>
  </AbsoluteLayout>
</ContentPage>

And the code Behind

public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();

            EditorUser.Completed += async (sender, args) =>
            {                    
                var rect = new Rectangle(ButtonSubmit.X, ButtonSubmit.Y + 50, ButtonSubmit.Width, ButtonSubmit.Height);
                await ButtonSubmit.LayoutTo(rect, 400, Easing.CubicIn);
                await StackPass.ScaleTo(1, 400, Easing.SinIn);
            };
        }
    }

This should give you an idea how to proceed

Upvotes: 4

Related Questions