Xamarin -动画StackLayout

Question

早上好，我正在尝试实现点击UserName the StackPanel up时的功能，这样键盘就不会隐藏信息。但这并不是最好的选择，我正在开发iOS和安卓系统。你能帮我吗？

<?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="BackGround.BackGroundImageDemo" BackgroundImage="Avion.jpg">
    <ContentPage.Content >
     <StackLayout VerticalOptions="Center" Padding="5, 50, 120, 0" BackgroundColor="White" HorizontalOptions="Center">
        <Entry Placeholder="UserName" PlaceholderColor="Gray" TextColor="Navy"  />
        <Entry Placeholder="Password" IsPassword="true"  PlaceholderColor="Gray" TextColor="Navy"/>
     </StackLayout>

    </ContentPage.Content>
</ContentPage>

Chase应用程序也有类似的东西。

Chase UserName normal - Chase in mode up stacklayout

Answer 1

这可以使用scrollview来实现。这是一个简单的代码片段。

<ContentPage.Content>
    <ScrollView x:Name="scr">

    Your Stack Layout having entry and click button
    Add TapGestureRecognizer to entry control in this case it is username or password whichever you want.
    How to add TapGestureRecognizer. You can look at here.

   </ScrollView>
</ContentPage.Content>

然后在你的代码后面

field.GestureRecognizers.Add(new TapGestureRecognizer
{
    Command = new Command(async () => 
    { 
            await ScollTest();
    }),
    NumberOfTapsRequired = 1,
});

private async void ScollTest()
{
  // Then adjust your scroll this way.
  await scr.ScrollToAsync(100, 1000, true);
}

Answer 2

就我从你的问题中所理解的，你想要一种方法来确保当键盘弹出时，它不会覆盖屏幕上的条目和/或其他相关信息，对吗？

方法是将您的内容放在ScrollView中，这样用户就可以在必要时滚动内容。此外，安卓和iOS都会自动滚动屏幕，直到条目可见。

我更改了您的示例，如下所示：

<?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="BackGround.BackGroundImageDemo" BackgroundImage="Avion.jpg">
    <ScrollView>
        <StackLayout VerticalOptions="Center" Padding="5, 50, 120, 0" BackgroundColor="White" HorizontalOptions="Center">
            <Entry Placeholder="UserName" PlaceholderColor="Gray" TextColor="Navy"  />
            <Entry Placeholder="Password" IsPassword="true"  PlaceholderColor="Gray" TextColor="Navy"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

Answer 3

这通常不是在Xamarin.Forms中为项目设置动画的方式。查看BikeShare360 app on Github。

它是一个漂亮的应用程序，使用第三方动画库和自定义Storyboard XAML来提供很好的用户体验。

例如，淡出控件中的任意元素。

定义您想要做的事情：

<animations:StoryBoard 
                x:Key="ProfileImageAnimation"    
                Target="{x:Reference ProfileImage}">
                <animations:FadeInAnimation 
                   Direction="Up"
                    Duration="500" />
</animations:StoryBoard>

您希望触发动画的是什么事件：

<ContentPage.Triggers>
        <EventTrigger Event="Appearing">
            <triggers:BeginAnimation   
                Animation="{StaticResource ProfileImageAnimation}" />
        </EventTrigger>
</ContentPage.Triggers>

您要影响的元素：

<ctrl:UserProfileImageControl
                        WidthRequest="105"
                        HeightRequest="105"
                        BorderColor="{StaticResource ProfileGrayColorHexString}"
                        ProfileImage="{Binding Profile.PhotoUrl}"
                        UpdatePhotoCommand="{Binding UpdatePhotoCommand}"
                        HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" />

所有的源代码都是可用的，并且入门并不太难。

祝好运!