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;
  6. using Xamarin.Forms;
  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. }
  17. protected override void OnStart()
  18. {
  19. // Handle when your app starts
  20. }
  22. protected override void OnSleep()
  23. {
  24. // Handle when your app sleeps
  25. }
  27. protected override void OnResume()
  28. {
  29. // Handle when your app resumes
  30. }
  31. }
  32. }
Step 4

Now in the MainPage.xaml, we add the following elements inside the Content of ContentPage,

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>
  12. <StackLayout Orientation="Horizontal">
  13. <Label Text="Date of Birth" FontSize="25" TextColor="White" VerticalOptions="End"/>
  14. <DatePicker x:Name="Date"/>
  15. </StackLayout>
  17. <StackLayout>
  18. <Label Text="Time to start" VerticalOptions="End" FontSize="25" TextColor="White"/>
  19. <TimePicker x:Name="Time" />
  20. </StackLayout>
  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;
  7. namespace Data_Entry
  8. {
  9. class Member
  10. {
  11. public string FirstName { get; set; }
  12. public string MiddleName { get; set; }
  13. public string LastName { get; set; }
  14. public DateTime DateTime { get; set; }
  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;
  7. using Xamarin.Forms;
  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. );
  34. }
  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. }
  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.