In this article, we 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 iOS, Android, and Windows.

Step 1:

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

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160530\1.JPG

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.

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160530\2.png

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160530\3.png

Step 3:

In the App.cs, update your code with this:

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:

It will look like:

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160530\wp_ss_20160529_0008.png

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 getter setter 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:

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:

Step 7:

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

C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160530\wp_ss_20160529_0007.png C:\Users\Kishor Bikram Oli\Desktop\Blogs\20160530\wp_ss_20160529_0006.png

Note: Since whole project has very high size. So download the Portable Class Library (PCL) only from GitHub

That’s it.

Thanks, Happy Coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">