Xamarin.Forms Login page sample

LoginPage.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="App.Core.Pages.Account.LoginPage"
             Title="{ Binding PageTitle }">

    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,20,0,0" />
        </OnPlatform>
    </ContentPage.Padding>

    <Grid
        RowSpacing="0"
        ColumnSpacing="0">
        
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="6*" />
        </Grid.RowDefinitions>

        <BoxView 
            Grid.Row="0"
            BackgroundColor="#00CCD6" />
        
        <Image
            Grid.Row="0"
            Source="brand_logo.png"
            VerticalOptions="Center"
            HorizontalOptions="Center"
            HeightRequest="100"
            WidthRequest="100" />

        <Label 
            Grid.Row="1"
            Text="LOGIN"
            FontSize="Large"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        
        <StackLayout                
            Grid.Row="2"
            VerticalOptions="Fill"
            HorizontalOptions="Center"
            Spacing="15">

            <StackLayout HorizontalOptions="Center" Spacing="5">
                <Label 
                    Text="Email:" />
                <Entry 
                    Text="{ Binding Email }" 
                    Keyboard="Email"
                    WidthRequest="300" />
            </StackLayout>

            <StackLayout HorizontalOptions="Center" Spacing="5">
                <Label 
                    Text="Password:" />
                <Entry 
                    Text="{ Binding Password }"
                    WidthRequest="300"
                    IsPassword="True" />
            </StackLayout>
        </StackLayout>

        <StackLayout
            Grid.Row="2"
            VerticalOptions="End"
            HorizontalOptions="Start"
            Margin="10,0,0,15"
            Spacing="15">
            <Label Text="Forgotten Password?" >
                <Label.GestureRecognizers>
                    <TapGestureRecognizer NumberOfTapsRequired="1" Command="{ Binding ForgotPasswordCommand }" />
                </Label.GestureRecognizers>
            </Label>
            <Label Text="Need an Account?" >
                <Label.GestureRecognizers>
                    <TapGestureRecognizer NumberOfTapsRequired="1" Command="{ Binding NewAccountCommand }" />
                </Label.GestureRecognizers>
            </Label>
        </StackLayout>
        
        <Button
            Grid.Row="2"
            Text="LOGIN"
            HorizontalOptions="End"
            VerticalOptions="End"
            Margin="15,10"
            Command="{ Binding LoginCommand }" />
        
        <!-- MODAL BACKGROUND LAYER -->
        <BoxView
            Grid.Row="0"
            Grid.RowSpan="3"
            BackgroundColor="Black"
            Opacity="0.8"
            IsVisible="{ Binding IsBusy }" />

        <ActivityIndicator
            Grid.Row="0"
            Grid.RowSpan="3"
            VerticalOptions="Center"
            HorizontalOptions="Center"
            Color="White"
            IsRunning="{ Binding IsBusy }" 
            IsVisible="{ Binding IsBusy }" />

        <!-- CANCEL BUTTON (appears after X seconds after login) -->
        <StackLayout
            Grid.Row="0"
            Grid.RowSpan="3"
            VerticalOptions="Center"
            TranslationY="100"
            Margin="50,0"
            IsVisible="{ Binding IsShowCancel }">
            <Label 
                Text="This is taking a little longer than expected, please hang in there..." 
                FontSize="Small" 
                TextColor="White"
                LineBreakMode="WordWrap"
                HorizontalOptions="Center"
                HorizontalTextAlignment="Center"/>            
            <Button 
                Text="Cancel" 
                Command="{ Binding CancelLoginCommand }" 
                HorizontalOptions="Center" />
        </StackLayout>
    </Grid>
</ContentPage>

LoginPage.xaml.cs

using App.Core.ViewModels;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace App.Core.Pages.Account
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class LoginPage : ContentPage
	{
		public LoginPage ()
		{
			InitializeComponent ();
			BindingContext = new LoginPageViewModel(Navigation);
		}
	}
}

LoginPageViewModel.cs

using System;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;

namespace App.Core.ViewModels
{
    public class LoginPageViewModel : BasePageViewModel
    {
        private readonly INavigation Navigation;

        public LoginPageViewModel(INavigation _navigation)
        {
            Navigation = _navigation;
            PageTitle = "Login";
        }

        #region Properties

        private string _email;
        public string Email
        {
            get { return _email; }
            set
            {
                if (SetPropertyValue(ref _email, value))
                {
                    ((Command)LoginCommand).ChangeCanExecute();                    
                }
            }
        }

        private string _password;
        public string Password
        {
            get { return _password; }
            set
            {
                if (SetPropertyValue(ref _password, value))
                {
                    ((Command)LoginCommand).ChangeCanExecute();
                }
            }
        }

        private bool _isShowCancel;
        public bool IsShowCancel
        {
            get { return _isShowCancel; }
            set { SetPropertyValue(ref _isShowCancel, value); }
        }

        #endregion


        #region Commands

        private ICommand _loginCommand;
        public ICommand LoginCommand
        {
            get { return _loginCommand = _loginCommand ?? new Command(LoginAction, CanLoginAction); }
        }

        private ICommand _cancelLoginCommand;
        public ICommand CancelLoginCommand
        {
            get { return _cancelLoginCommand = _cancelLoginCommand ?? new Command(CancelLoginAction); }
        }

        private ICommand _forgotPasswordCommand;
        public ICommand ForgotPasswordCommand
        {
            get { return _forgotPasswordCommand = _forgotPasswordCommand ?? new Command(ForgotPasswordAction); }
        }

        private ICommand _newAccountCommand;
        public ICommand NewAccountCommand
        {
            get { return _newAccountCommand = _newAccountCommand ?? new Command(NewAccountAction); }
        }
        
        #endregion


        #region Methods

        bool CanLoginAction()
        {
            //Perform your "Can Login?" logic here...

            if (string.IsNullOrWhiteSpace(this.Email) || string.IsNullOrWhiteSpace(this.Password))
                return false;

            return true;
        }

        async void LoginAction()
        {
            IsBusy = true;

            //TODO - perform your login action + navigate to the next page

            //Simulate an API call to show busy/progress indicator            
            Task.Delay(20000).ContinueWith((t) => IsBusy = false);

            //Show the Cancel button after X seconds
            Task.Delay(5000).ContinueWith((t) => IsShowCancel = true);
        }

        void CancelLoginAction()
        {
            //TODO - perform cancellation logic

            IsBusy = false;
            IsShowCancel = false;
        }

        void ForgotPasswordAction()
        {
            //TODO - navigate to your forgotten password page
            //Navigation.PushAsync(XXX);
        }

        void NewAccountAction()
        {
            //TODO - navigate to your registration page
            //Navigation.PushAsync(XXX);
        }

        #endregion
    }
}

Thanks your share.
I just start to learn about code a android app.
I paste the XML to my visual studio for Mac, almost "all the tag" are not work, all the tag have red under line.....Why ?