Ist es möglich, Elemente innerhalb von StackLayout zu animieren?

Question

Hier stelle ich eine grobe Schema meines Layout und wie es aussieht:

möchte ich die folgenden Funktionen hinzuzufügen: Zunächst möchte ich das Passwort Etiketten- und Eintrag unsichtbar sein und die submit Knopf, um an seinem Platz zu sein. Wenn der Benutzer einen gültigen Benutzernamen eingibt, sollte die Übermittlungsschaltfläche nach unten verschoben werden und die Kennsatzbezeichnung/der Kennworteintrag sollte angezeigt werden (und diese Animation rückgängig machen, wenn der Benutzername erneut ungültig ist). Was ich herausgefunden habe, ist, dass ich eine weiße Box über Passwort-Label/-Eintrag setzen, seine Deckkraft von 0 auf 1 ändern und die submit Schaltfläche durch Passwort-Label/Eintragshöhe verschieben soll. Beachten Sie, dass die Übergabeschaltfläche über dem Passwort-Label/-Eintrag liegen sollte, da beim Verschieben die Passwort-Beschriftung/Eingabe die Übergabeschaltfläche überlagern kann.

Meine Frage ist: (1) ist es möglich, mit dem StackLayout zu tun, mit dem Schema, das ich jetzt verwende und wenn nein, (2) wie kann ich das tun? Danke im Voraus.

Answer 1

Ja, es ist möglich.

Zuerst, um die Schaltfläche um die Seite zu bewegen, sollten Sie ein absolutes Layout haben. Also wrap alles in AbsoluteLayout

Ich würde die ursprüngliche Scale="0" für die Passworteingabe setzen. Also, wenn der Benutzer gültige

erhält, ist hier die 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> 

Und der Code hinter

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); 
      }; 
     } 
    } 

Dies sollte Ihnen eine Idee geben, wie