Food Delivery - Login Page with animation
Login page with animation
Food Delivery app - animated login page
Please, support my blog by clicking on our sponsors ad!
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FoodDeliveryApp.Pages.Authentication.Login"
xmlns:mct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
Title="Login"
BackgroundColor="{x:StaticResource BackgroundColor}"
Shell.NavBarIsVisible="False">
<ContentPage.Behaviors>
<mct:StatusBarBehavior StatusBarColor="{x:StaticResource Primary}"></mct:StatusBarBehavior>
</ContentPage.Behaviors>
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" Padding="20,0,20,20">
<Image x:Name="img" Grid.Row="0" Source="giflogo.gif" IsAnimationPlaying="True"></Image>
<Entry Grid.Row="1" x:Name="txtUserName" Placeholder="UserName"></Entry>
<Entry Grid.Row="2" Margin="0,15" x:Name="txtPassword" Placeholder="Password" IsPassword="True"></Entry>
<Button Grid.Row="3" Text="Login" Clicked="Button_Clicked"></Button>
<Label Grid.Row="4" HorizontalOptions="Center" Margin="0,5,0,0" Text="Not have an account? Please Register">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
</Grid>
</ContentPage> Login.xaml.cs
public partial class Login : ContentPage
{
public Login()
{
InitializeComponent();
}
protected override async void OnAppearing()
{
base.OnAppearing();
await Task.Delay(100);
img.IsAnimationPlaying = false;
await Task.Delay(100);
img.IsAnimationPlaying = true;
}
private async void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
{
await Shell.Current.GoToAsync("Register");
}
private async void Button_Clicked(object sender, EventArgs e)
{
await Shell.Current.GoToAsync("Home");
}
} 
Comments
Post a Comment