Xamarin.Forms: Create A Simple Login UI

In this article, we will learn to create a page similar to login page with controls like Input, Date Picker, Time Picker, Buttons, etc. using a common PCL project that works for all major platforms including iOS, Android and Windows.

Here are the steps, 

Step 1

First of all, create a cross platform project using Portable Class Library (PCL) which is the common code base for all platforms.

page

Step 2

Add a XAML page in PCL project. Right click on PCL project > Add > New item > Cross Platform > Forms Xaml Page and Click Add.

add
add

Step 3

In the App.cs, update your code with this,
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5.   
  6. using Xamarin.Forms;  
  7.   
  8. namespace Data_Entry  
  9. {  
  10.     public class App : Application  
  11.     {  
  12.         public App()  
  13.         {  
  14.             MainPage = new NavigationPage(new MainPage());  //Navigate to the MainPage we just added before  
  15.         }  
  16.   
  17.         protected override void OnStart()  
  18.         {  
  19.             // Handle when your app starts  
  20.         }  
  21.   
  22.         protected override void OnSleep()  
  23.         {  
  24.             // Handle when your app sleeps  
  25.         }  
  26.   
  27.         protected override void OnResume()  
  28.         {  
  29.             // Handle when your app resumes  
  30.         }  
  31.     }  
Step 4

Now in the MainPage.xaml, we add the following elements inside the Content of ContentPage, 
  • Three Inputs for first name, middle name and last name
  • Date Picker, Time Picker
  • Save and View buttons

Complete XAML code will be,

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="Data_Entry.MainPage">  
  5.   <ContentPage.Content>  
  6.     <StackLayout Padding="20">  
  7.       <Label Text="Create account" TextColor="White" FontSize="20"></Label>  
  8.       <Entry x:Name="FirstName" Placeholder="First Name" WidthRequest="150"></Entry>  
  9.       <Entry x:Name="MiddleName" Placeholder="Middle Name" WidthRequest="150"></Entry>  
  10.       <Entry x:Name="LastName" Placeholder="Last Name" WidthRequest="150"></Entry>  
  11.   
  12.       <StackLayout Orientation="Horizontal">  
  13.         <Label Text="Date of Birth" FontSize="25" TextColor="White" VerticalOptions="End"/>  
  14.         <DatePicker x:Name="Date"/>  
  15.       </StackLayout>  
  16.   
  17.       <StackLayout>  
  18.         <Label Text="Time to start" VerticalOptions="End" FontSize="25" TextColor="White"/>  
  19.         <TimePicker x:Name="Time" />  
  20.       </StackLayout>  
  21.   
  22.       <StackLayout Orientation="Horizontal">  
  23.         <Button BackgroundColor="Gray" TextColor="White" Text="Save" Clicked="OnSave"/>  
  24.         <Button BackgroundColor="Maroon" TextColor="White" Text="View" Clicked="OnView"/>  
  25.       </StackLayout>  
  26.     </StackLayout>  
  27.   </ContentPage.Content>  
  28. </ContentPage>  
It will look like,

output

Step 5,

Next we create a Model class named “Member” class where we set the values from the XAML controls and display the same in a Dialog box.

Right Click on PCL Project and Click > Add > Class > Name it Member and Click Add.

Here, FirstName, MiddleName, LastName, DateTime are used to set and get the values. And in the Member constructor, we pass all the values as parameters and set the values to the respective ones.

Complete Code snippet for Member.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6.   
  7. namespace Data_Entry  
  8. {  
  9.     class Member  
  10.     {  
  11.         public string FirstName { getset; }  
  12.         public string MiddleName { getset; }  
  13.         public string  LastName { getset; }  
  14.         public DateTime DateTime { getset; }  
  15.   
  16.         public Member(string firstName, string middleName, string lastName, DateTime dateTime)  
  17.         {  
  18.             FirstName = firstName;  
  19.             MiddleName = middleName;  
  20.             LastName = lastName;  
  21.             DateTime = dateTime;  
  22.         }  
  23.     }  
  24. }  
Step 6

Now in the code behind MainPage.xaml.cs, we add click event handlers that we created in XAML page.
In the Save button event, we add all the data into a List. And in the View button event, we display the data from the list in a Dialog Box.

Complete Code Snippet
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6.   
  7. using Xamarin.Forms;  
  8.   
  9. namespace Data_Entry  
  10. {  
  11.     public partial class MainPage : ContentPage  
  12.     {  
  13.         List<Member> member;  
  14.         public MainPage()  
  15.         {  
  16.             member = new List<Member>();  
  17.             InitializeComponent();  
  18.         }  
  19.         public void OnSave(object o, EventArgs e)  
  20.         {  
  21.             member.Add(new Member(  
  22.                                     FirstName.Text,  
  23.                                     MiddleName.Text,  
  24.                                     LastName.Text,  
  25.                                     SetDateTime(  
  26.                                         Date.Date,  
  27.                                         Time.Time.Hours,  
  28.                                         Time.Time.Minutes,  
  29.                                         Time.Time.Seconds  
  30.                                     )  
  31.                                 )  
  32.                         );  
  33.   
  34.         }  
  35.   
  36.  public async void OnView(object o, EventArgs e)  
  37.         {  
  38.             await DisplayAlert("Members", member[0].FirstName + "," + member[0].MiddleName + "," + member[0].LastName + "," + member[0].DateTime, "Cancel");  
  39.         }  
  40.   
  41.         private DateTime SetDateTime(DateTime date, int hour, int minute, int seconds)  
  42.         {  
  43.             return new DateTime(date.Year, date.Month, date.Day, hour, minute, seconds);  
  44.         }  
  45.     }  
  46. }  
Step 7

Run the application in your android or windows devices/emulators. When you save and then view, you will see the following output.

output

output

Note - Since the whole project has very large  size download the Portable Class Library (PCL) only from GitHub.