Animate label on focus and unfocus of entry xamarin.forms

303 Views Asked by At

I'm trying to create something like this, so I wrote this code:

This is the 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="alphatrial.MainPage"
             BackgroundColor="#ffc40c"
             xmlns:local="clr-namespace:alphatrial.Effects">
    <ContentPage.Effects>
        <local:StatusBarEffect 
        BackgroundColor="#ffc40c"/>
    </ContentPage.Effects>
    <StackLayout >
        <Label  Text="ISC - Alpha" TextColor="Black" FontSize="Large" FontAttributes="Bold" FontFamily="MyAwesomeCustomFont" HorizontalOptions="End" Margin="0,50,50,-14" />
        <Line Stroke="black" X1="0"  X2="340" StrokeThickness="3"  />

        <Label Text="App" TextColor="White" FontSize="Large" FontAttributes="Bold" FontFamily="MyAwesomeCustomFont" HorizontalOptions="End" Margin="0,-12,15,0"/>

        <Frame Margin="0,80,0,0" BackgroundColor="Transparent">
            <StackLayout  >
                <Label Text="Email" TextColor="Black" FontSize="Small" Margin="25,0,20,0" x:Name="emailAnimate"  BindingContext="email" />
                <Entry Margin="20,-40,20,0" x:Name="email"/>
                
            </StackLayout>

        </Frame>

        <Frame Margin="0,-10,0,0" BackgroundColor="Transparent">
            <StackLayout  >
                <Label Text="Password" TextColor="Black" FontSize="Small" Margin="25,0,20,0" x:Name="PassAnimate" />
                <Entry Margin="20,-40,20,0" x:Name="password" IsPassword="True"/>

            </StackLayout>

        </Frame>
    </StackLayout>

</ContentPage>

And this is the xaml.cs file:

 public MainPage()
        {
          
            InitializeComponent();
            email.Focused += Email_Focused;
            email.Unfocused += Email_Unfocused;
            password.Focused += Password_Focused;
            password.Unfocused += Password_Unfocused;
           
        }
 private void Password_Unfocused(object sender, FocusEventArgs e)
        {
            if (password.Text == "")
            {
                PassAnimate.TranslateTo(0, 0, 100);
                PassAnimate.ScaleTo(1, 100);
            }
        }

        private void Password_Focused(object sender, FocusEventArgs e)
        {
            if (password.IsFocused)
            {
                PassAnimate.ScaleTo(0.8, 150);
                PassAnimate.TranslateTo(-25, -30, 150);

            }

        }


        private void Email_Unfocused(object sender, FocusEventArgs e)
        {
            if(email.Text=="")
            {
                emailAnimate.TranslateTo(0, 0, 100);
                emailAnimate.ScaleTo(1, 100);
            }
           
            
        }

        private void Email_Focused(object sender, FocusEventArgs e)
        {
            if (email.IsFocused)
            {
                emailAnimate.ScaleTo(0.8,150);
                emailAnimate.TranslateTo(-25, -30,150);
               

            }



        }
    }
}

But I obtained this.

The unfocus function doesn't work when I remove the focus from the entry. However, when I write something in the entry, then clear it and remove the focus, the animation works fine. What is the problem?

Update:

when i removed the code that checks if entry is empty:

if(email.Text=="")

the animation worked. it seems that this is not the correct way to check if entry is empty. would you please give me an idea about how to know of entry is empty?

1

There are 1 best solutions below

0
rana hd On

okay i figured it out, i have to check if the entry is empty using the following:

if (string.IsNullOrEmpty(email.Text) )