TimePicker Control In Xamarin.Forms Application For Android And UWP

TimePicker control provides the feature of time picking. The visual representation of a TimePicker is very similar to the entry, except that a special control for picking a time appears in place of a keyboard.

Before reading this article, please go through the article How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform

After reading this article, you will know how to add TimePicker control in Xamarin.Forms Application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development.

The important tools are given below, which are required to develop UWP.

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (It is a free software available online).
3. Using Visual studio 2015 Installer, enable Xamarin (cross platform mobile development and C#/.NET, while installing/modifying Visual Studio 2015.

Now, we can discuss step-by-step app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> select Cross-Platform (under Visual C#-> Blank app (Xamarin.Forms Portable)-> Give a suitable name for your app (XamFormTimePicker) ->OK.



Step 2

Now, create project “XamFormTimePicker_Droid”.



Choose the Target and minimum platform version for your Universal Windows Project.



Create project “XamFormTimePicker_UWP”.



Step 3

Afterwards, Visual Studio creates 6 projects and displays Getting Started.XamarinPage. Now, we have to update Xamarin.Forms Reference for Portable Project and XamFormTimePicker_Droid project.

(Please refer How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform)

Step 4

Add XAML page for TimePicker Control demo. Right click XamFormTimePicker (Portable) project. Select ADD-> NewItem.



Select ->CrossPlatform-> FormXamlPage-> Give a relevant name.



Step 5

Add TimePicker tag with the items and labels in TimePickerDemo.Xaml.

<StackLayout Orientation="Vertical">
    <Label/>
    <Label Text="TimePicker Control in Xamarin Forms Application - UWP and Android Demo" FontSize="20" />
    <Label/>
    <Label/>
    <Label/>
    <Label x:Name="lbldisp"></Label>
    <TimePicker x:Name="TPDemo" VerticalOptions="CenterAndExpand" />
    <Button x:Name="btnSubmit" Text="Submit" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Clicked="OnbtnSubmit" /> </StackLayout>

Step 6

Add the code, mentioned below in TimePickerDemo.Xaml.cs.

void OnbtnSubmit(object sender, EventArgs args) {
    lbldisp.Text = string.Format("Thank you. Your appointment is set for {0}.", TPDemo.Time.ToString());
}

Step 7

Open (double click) the file App.cs in the Solution Explorer-> XamFormTimePicker(portable) and set the Root page.



Step 8

We will test Android and UWP. Thus, we can set the Multiple Startup Projects as XamFormTimePicker.Droid and XamFormTimePicker.UWP (Universal Windows).



Step 9

Change the Configuration Manager settings. Go to Build -> Configuration Manager, uncheck all the build and deploy options to the iOS, Windows, WinPhone, check the Droid and UWP.



Step 10

Deploy your app in a Local Machine and the output of XamFormTimePicker app is given below.



After clicking the TimePicker, the screenshot will appear as shown below.



After Clicking Submit Button, the screenshot given below appears.



Summary

Now, you have successfully created and tested TimePicker control in Xamarin. Forms Application for cross platform application development, using Visual C# and Xamarin.