syncfusion-wpf-timepicker

Q: How do I install syncfusion-wpf-timepicker?

Run npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-timepicker in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-wpf-timepicker/ (personal) or .claude/skills/syncfusion-wpf-timepicker/ (project).

by syncfusionFrontend & Design

Create and customize WPF time picker controls using Syncfusion's SfTimePicker component. Use this when implementing time selection UI, time input fields, or time value formatting. This skill covers SfTimePicker setup, time selector customization, value binding, and appearance styling in WPF applications.

Installs: 160
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-timepicker

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-wpf-timepicker automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the syncfusion-wpf-timepicker skill do?

How do I install syncfusion-wpf-timepicker?

Run npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-timepicker in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-wpf-timepicker/ (personal) or .claude/skills/syncfusion-wpf-timepicker/ (project).

Which AI agents can use syncfusion-wpf-timepicker?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-wpf-timepicker safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-wpf-timepicker?

It is published by syncfusion in syncfusion/wpf-ui-components-skills. It has 160 recorded installs.