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