Implementing WPF TimePicker (SfTimePicker)

The SfTimePicker is a WPF control that enables touch-friendly time value selection with customizable formatting, time selector UI, and comprehensive styling options. This skill guides you through implementing, configuring, and customizing time picker controls for WPF applications.

When to Use This Skill

Adding a time picker control to a WPF application for user time input
Setting and managing time values programmatically or through binding
Formatting time display in different formats (12-hour, 24-hour, culture-specific)
Customizing the time selector with templates, sizing, and spacing
Styling and theming the time picker (colors, backgrounds, RTL support)
Handling time value changes with events and callbacks
Controlling editing modes (free editing vs. dropdown selection)

Navigation Guide

Choose your task below to jump to the relevant documentation:

Getting Started

📄 Read: references/getting-started.md

Installation and assembly references
Adding control via designer, XAML, and C#
Basic time picker setup
Handling the ValueChanged event
Applying themes

Setting Time Values

📄 Read: references/setting-time-values.md

Setting time using the Value property
Allowing and setting null values
Watermark text for prompts
UpdateValueOnLostFocus behavior
Event-based time detection

Time Formatting

📄 Read: references/time-formatting.md

FormatString for display formatting
SelectorFormatString for time picker format
Common format patterns
Culture-specific formatting

Customizing the Time Selector

📄 Read: references/time-selector-customization.md

Overview of SfTimeSelector control
Hour, minute, and meridiem cell templates
Cell sizing and spacing properties
Advanced template customization

Appearance & Styling

📄 Read: references/appearance-and-styling.md

Foreground and background colors
Selected item styling
Flow direction (right-to-left support)
Editing modes (inline vs. dropdown)
Theme integration

Quick Start

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <!-- Basic time picker -->
        <syncfusion:SfTimePicker x:Name="timePicker" 
                                 Width="200" 
                                 Value="04:30:00"
                                 ValueChanged="TimePicker_ValueChanged"/>
    </Grid>
</Window>

using Syncfusion.Windows.Controls.Input;

SfTimePicker timePicker = new SfTimePicker();
timePicker.Value = new TimeSpan(14, 30, 00); // 2:30 PM
timePicker.ValueChanged += (d, e) => 
    Console.WriteLine($"Time changed to: {e.NewValue}");

Common Patterns

Pattern 1: 24-Hour Time Display

<syncfusion:SfTimePicker FormatString="HH:mm:ss" 
                         SelectorFormatString="HH:mm"/>

Pattern 2: Allow Null Values with Watermark

<syncfusion:SfTimePicker AllowNull="True"
                         Value="{x:Null}"
                         Watermark="Select a time"/>

Pattern 3: Read-Only Time Display

<syncfusion:SfTimePicker AllowInlineEditing="False"
                         ShowDropDownButton="False"
                         Value="09:00:00"/>

Pattern 4: Custom Cell Size and Spacing

<syncfusion:SfTimePicker SelectorItemWidth="60"
                         SelectorItemHeight="60"
                         SelectorItemSpacing="20"/>

Key Properties Quick Reference

Property	Default	Purpose
`Value`	Current system time	Get/set the selected time as TimeSpan
`FormatString`	"h:mm tt"	Display format (12-hr/24-hr)
`SelectorFormatString`	"h:mm tt"	Format for time picker cells
`AllowNull`	false	Enable null value support
`Watermark`	—	Placeholder text when Value is null
`AllowInlineEditing`	true	Allow direct text editing
`ShowDropDownButton`	true	Show dropdown button
`SetValueOnLostFocus`	false	Update value when focus lost
`SelectorItemWidth`	30	Width of selector cells (pixels)
`SelectorItemHeight`	30	Height of selector cells (pixels)
`SelectorItemSpacing`	4	Space between selector items (pixels)
`Foreground`	—	Text color
`Background`	—	Control background color
`AccentBrush`	—	Selected item highlight color
`FlowDirection`	LeftToRight	Support RTL layouts

syncfusion-wpf-timepicker