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?
okay i figured it out, i have to check if the entry is empty using the following: