Xamarin - Animations StackLayout

Question

Very good morning, I'm trying to implement the functionality when clicking the UserName the StackPanel up so that the keyboard does not hide the information. But what is not the best choice for this, I'm working on iOS and Android. Could you help me.

<?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 application have something similar.

Chase UserName normal - Chase in mode up stacklayout

Answer 1

This can be achieved using scrollview. This is simple code snippet.

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

Then on your code behind

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

For what I have understood from your question, you want an approach to make sure that, when the keyboard pops in, it does not cover the entries and / or other relevant information in the screen, right?

The approach for that is to have your content inside a ScrollView , so the user will be able to scroll it if necessary. Also, both Android and iOS will automatically roll the screen up to the entry is visible.

I changed your example to look like this:

<?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

That is not normally how you animate items in Xamarin.Forms. Check out the BikeShare360 app on Github .

It is a beautiful app and uses the 3rd party animation libraries and custom Storyboard XAML to give a great user experience.

For example to fade up an arbitrary element in a control.

Define what you want to do:

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

What event do you want to trigger the animation:

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

The element you are going to effect:

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

All the source is available and it is not too hard to get started.

Good luck!