Food Delivery - Login Page with animation

Login page with animation

Food Delivery App - Animated Login
Food Delivery app - animated login page


Follow basic setup from here
You will get all page of this app from FoodDeliveryApp Menu on top.

 <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

Popular posts from this blog

Push Notifications in .NET MAUI: A Comprehensive Guide

Push Notification using Firebase in xamarin form (Android and IOS)

Building User Authentication Interfaces in .NET MAUI: Login, Register, OTP Verification, and Forgot Password