Getting Started with UWP TimePicker (SfTimePicker)

17 Aug 20264 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 walkthrough, the user will create a UWP application that contains the SfTimePicker control.

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

Creating project

The below section provides detailed information to create a new project in Visual Studio to display the SfTimePicker control.

Adding control via designer

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

Adding control via designer

Adding control manually in XAML

In order to add the SfTimePicker control manually in XAML, do the following 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.

<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.
<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

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

</Page>

Adding control manually in C#

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

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

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

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

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

using Syncfusion.UI.Xaml.Controls.Input;

SfTimePicker timePicker1 = new SfTimePicker()
{
    Height = 50,
    Width = 250,
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center
};
Imports Syncfusion.UI.Xaml.Controls.Input;

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

Adding control via XAML or code

Customizing the time format

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

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

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

</Page>
using Syncfusion.UI.Xaml.Controls.Input;

timePicker1.FormatString = "HH:mm:ss";
Imports Syncfusion.UI.Xaml.Controls.Input;

timePicker1.FormatString = "HH:mm:ss"

FormatString in SfTimePicker

Customize the SfTimeSelector Header

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

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <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>

</Page>

customizing SfTimeSelector header