Introducing Xamarin.Forms Time Picker | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (199)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (892)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (497)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (379)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (319)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing Xamarin Forms Time Picker

Introducing Xamarin.Forms Time Picker

Time Picker is a new component introduced to Syncfusion’s Xamarin.Forms components in Essential Studio 2019 Volume 4. Time Picker is a fully customizable component used in scheduling, to-do, and reminder applications. It  that provides provides a common UI for all platforms in a simple, yet attractive UI to give your application a smooth, touch-friendly experience.

In this article, I will walk you through the features available in the new Time Picker component.

Formatting the picker

The Xamarin.Forms Time Picker shows the selectable time values in four predefined time formats. The Time Picker also provides support for formatting the text of the column and the header. The following code example and screenshot illustrate the “hh_mm_tt” time format.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimePickerSample"
             xmlns:timepicker="clr-namespace:Syncfusion.XForms.Pickers;assembly=Syncfusion.SfPicker.XForms"
             x:Class="TimePickerSample.MainPage">
    <ContentPage.Content>
        <Grid>
            <timepicker:SfTimePicker PickerMode="Dialog"
                                     Format="hh_mm_tt"
                                     ShowFooter="True"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>
Formatting Xamarin.Forms Time Picker
Formatting Xamarin.Forms Time Picker

Dialog and standalone

A compact view of elements on the screen is one of the most important aspects of an application. Time Picker comes with standalone and dialog modes that make the app look more impressive in the UI.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimePickerSample"
             xmlns:timepicker ="clr-namespace:Syncfusion.XForms.Pickers;assembly=Syncfusion.SfPicker.XForms"
             x:Class="TimePickerSample.MainPage">
    <Grid>
        <timepicker:SfTimePicker x:Name="timePicker"
                                 PickerMode="Dialog" .../>
        <Button Clicked="PickerButton_Clicked" .../>
    </Grid>
</ContentPage >
public partial class MainPage
{
    public MainPage()
    { 
        InitializeComponent();
    }
    private void PickerButton_Clicked(object sender,          
                                       System.EventArgs e)
    {
        timePicker.IsOpen = true;
    }
}
Xamarin.Forms Time Picker Dialog View
Xamarin.Forms Time Picker Dialog View

Time values with intervals

Time values can be populated with intervals in Time Picker for minutes, hours, and seconds, individually.

<timepicker:SfTimePicker PickerMode="Dialog"
                         HourInterval="2"
                         MinuteInterval="2"                                       
                         SecondInterval="2" .../>
Intervals in Xamarin.Forms Time Picker
Intervals in Xamarin.Forms Time Picker

Customization

You can customize the colors and fonts of the headers, column headers, footer, and time values. The following code example shows how the selected and unselected values are customized along with fonts.

<timepicker:SfTimePicker PickerMode="Dialog"
                         HeaderText="SELECT A TIME"
                         HeaderBackgroundColor="#238F94"
                         HeaderTextColor="#FFFFFF"
                         OKButtonTextColor="#238F94"
                         CancelButtonTextColor="#238F94"
                         UnselectedItemTextColor="#238F94"
                      ColumnHeaderBackgroundColor="#DADDDE"
                         SelectedItemTextColor="#238F94"
                         ShowFooter="True"/>
Customizing Xamarin.Forms Time Picker
Customizing Xamarin.Forms Time Picker

Creating a Xamarin.Forms application containing the Time Picker

This section explains the step-by-step procedure for implementing the Time Picker control in a Xamarin.Forms application using Visual Studio:

  1. Create a blank Xamarin.Forms application.
  2. In the application, reference the Xamarin.SfPicker NuGet package from nuget.org. To learn more about SfTimePicker, refer to the Adding SfTimePicker reference documentation.
  3. When deploying the application in UWP and iOS, follow the steps provided in the Launching the application on each platform with Time Picker documentation.
  4. Import the Time Picker namespace in your page and initialize SfTimePicker as demonstrated in the following code sample.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimePickerSample"
             xmlns:timepicker="clr-namespace:Syncfusion.XForms.Pickers;assembly=Syncfusion.SfPicker.XForms"
             x:Class="TimePickerSample.MainPage">
    <ContentPage.Content>
        <Grid>
            <timepicker:SfTimePicker x:Name="timePicker"
                                 PickerMode="Dialog"
                                 PickerWidth="300"
                                 ShowFooter="True"/>
            <Button Text="Open time Picker" 
                    x:Name="pickerButton"
                    Clicked="PickerButton_Clicked"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    HeightRequest="50" 
                    WidthRequest="200"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>
using Xamarin.Forms;

namespace TimePickerSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void PickerButton_Clicked(object sender, System.EventArgs e)
        {
            timePicker.IsOpen = true;
        }
    }
}
Creating a Xamarin.Forms Application Containing Time Picker
Creating a Xamarin.Forms Application Containing Time Picker

You can download a basic sample from the Getting Started section of our Time Picker control documentation.

Conclusion

In this blog post, we walked through our new Xamarin.Forms Time Picker component and its features. Try this control with our 2019 Volume 4 release. To learn more about this component, refer to our UG documentation. You can drop your comments below if you need any clarifications about this component.

Try our Time Picker component with this sample project available on GitHub.

If you need support for specific features in this component or have any questions, contact us through our support forumDirect-Trac, or feedback portal. We are waiting to hear your feedback about this new component!

Tags:

Share this post:

Comments (1)

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed