Getting Started with UWP TimePicker (SfTimePicker)

25 May 20214 minutes to read

This section provides a quick overview for working with SfTimePicker control.

Assembly deployment

Refer to the control dependencies section to get the list of assemblies or NuGet package that needs to be added as a reference to use the SfTimePicker control in any application.

Creating Application with SfTimePicker control

In this walk through, user will create a UWP application that contains SfTimePicker control.

1. Creating project
2. Adding control via designer
3. Adding control manually in XAML
4. Adding control manually in C#

Creating project

Below section provides detailed information to create new project in Visual Studio to display SfTimePicker control.

Adding control via designer

The SfTimePicker control can be added to the application by dragging it from Toolbox and dropping it in designer. The required assembles will be added automatically.

Adding control manually in XAML

In order to add SfTimePicker control manually in XAML, do the below steps,

1. Add the below required assembly references to the project,

   • Syncfusion.SfInput.UWP
   • Syncfusion.SfShared.UWP

2. Include the namespace for Syncfusion.SfInput.UWP assembly in MainPage.XAML.

XAML

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:syncfusion="using:Syncfusion.UI.Xaml.Controls.Input">

1. Now add the SfTimePicker control in MainPage.XAML.

XAML

<syncfusion:SfTimePicker x:Name="timePicker" VerticalAlignment="Center" HorizontalAlignment="Center" Width="250" Height="50" />

Adding control manually in C#

In order to add SfTimePicker control manually in C#, do the below steps,

1. Add the below required assembly references to the project,

   • Syncfusion.SfInput.UWP
   • Syncfusion.SfShared.UWP

2. Import SfTimePicker namespace Syncfusion.UI.Xaml.Controls.Input.

3. Create SfTimePicker control instance and add it to the page.

C#

SfTimePicker timePicker1 = new SfTimePicker()
{
    Height = 50,
    Width = 250,
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center
};

VB.NET

Dim timePicker1 As SfTimePicker = New SfTimePicker() With {
    .Height = 50,
    .Width = 250,
    .HorizontalAlignment = HorizontalAlignment.Center,
    .VerticalAlignment = VerticalAlignment.Center
}

Customizing the time format

The format of time in SfTimePicker can be be customized by using FormatString property.

XAML

<syncfusion:SfTimePicker Height="30" Width="200" 
                         HorizontalAlignment="Center" VerticalAlignment="Center"
                         FormatString="HH:mm:ss" />

C#

timePicker1.FormatString = "HH:mm:ss";

VB.NET

timePicker1.FormatString = "HH:mm:ss"

Customize SfTimeSelector Header

You can customize the SfTimeSelector in SfTimePicker control using SelectorStyle property.

XAML

<syncfusion:SfTimePicker Height="30" Width="200" 
                         HorizontalAlignment="Center" VerticalAlignment="Center">
    <syncfusion:SfTimePicker.SelectorStyle>
        <Style TargetType="syncfusion:SfTimeSelector">
            <Setter Property="Header" Value="Set your alarm" />
        </Style>
    </syncfusion:SfTimePicker.SelectorStyle>
</syncfusion:SfTimePicker>