Xamarin - 动画 StackLayout

Question

早上好，我正在尝试在单击 StackPanel 上的 UserName 时实现该功能，以便键盘不会隐藏信息。 但是，这不是最佳选择，我正在使用 iOS 和 Android。 你可以帮帮我吗。

<?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 -在模式中追逐堆栈布局

Answer 1

这可以使用滚动视图来实现。 这是简单的代码片段。

<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 ，这样用户就可以在必要时滚动它。 此外，Android 和 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 中为项目设置动画的方式。 查看Github 上的BikeShare360 应用程序。

这是一个漂亮的应用程序，使用 3rd 方动画库和自定义 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" />

所有源都可用，上手并不难。

祝你好运！