是否可以为 StackLayout 中的元素设置动画？

Question

在这里，我提供了我的布局的粗略方案及其外观：

我想添加以下功能：首先，我希望密码标签和条目不可见，并且 submit 按钮位于它的位置。当用户输入有效的用户名时，提交按钮应向下滑动，密码 label/entry 应出现（如果用户名再次无效，则反转此动画）。我想到的是，我应该在密码 label/entry 上放一个白框，将其不透明度从 0 更改为 1，然后按密码 label/entry 高度滑动 submit 按钮。请注意，提交按钮应该在密码 label/entry 上方，因为滑动时，密码 label/entry 可能会覆盖提交按钮。

我的问题是：(1) 是否可以使用 StackLayout，使用我现在使用的方案，如果不能，(2) 我该怎么做？提前致谢。

Answer 1

是的，这是可能的。

首先，为了使按钮在页面上移动，您应该有一个绝对布局。因此，将所有内容包装在 AbsoluteLayout

中

我会设置初始 Scale="0" 作为密码输入。所以当用户获得有效

这是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>

以及背后的代码

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

这应该会让您了解如何进行

是否可以为 StackLayout 中的元素设置动画？

Is it possible to animate elements inside StackLayout?

animation

user-experience

xamarin

xamarin.forms