mcpField
S
syncfusion-wpf-timepicker

syncfusion-wpf-timepicker

github.com/syncfusion设计与 UI5163 次安装1 周前更新
代码仓库

关于 syncfusion-wpf-timepicker

面向 WPF 应用中 Syncfusion SfTimePicker 的实现与定制技能，涵盖时间值、显示格式、选择器布局、样式及编辑行为。

主要功能

  1. 01设置和绑定时间值
  2. 02按格式和区域设置显示时间
  3. 03定制选择器模板与尺寸
  4. 04设置主题、颜色和 RTL 布局
  5. 05处理值变更与编辑模式

适用场景

  1. 01在 WPF 应用中添加时间输入
  2. 02以 12 小时或 24 小时格式显示时间
  3. 03定制选择器单元格和外观

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/syncfusion-wpf-timepicker确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
appearance-and-styling.md
getting-started.md
setting-time-values.md
time-formatting.md
time-selector-customization.md

详细介绍

实现 WPF TimePicker（SfTimePicker）

SfTimePicker 是一个 WPF 控件，支持通过触控友好的方式选择时间值，并提供可自定义的格式、时间选择器界面和全面的样式选项。本指南将介绍如何在 WPF 应用程序中实现、配置和自定义时间选择器控件。

适用场景

  • 向 WPF 应用程序添加时间选择器控件，以供用户输入时间
  • 通过编程或绑定设置和管理时间值
  • 设置时间显示格式，包括 12 小时制、24 小时制和特定区域设置格式
  • 使用模板、尺寸和间距自定义时间选择器
  • 设置时间选择器的样式和主题（颜色、背景、RTL 支持）
  • 使用事件和回调处理时间值更改
  • 控制编辑模式（自由编辑或下拉选择）

导航指南

选择下方的任务，跳转到相关文档：

入门

📄 阅读： references/getting-started.md

  • 安装和程序集引用
  • 通过设计器、XAML 和 C# 添加控件
  • 基本时间选择器设置
  • 处理 ValueChanged 事件
  • 应用主题
设置时间值

📄 阅读： references/setting-time-values.md

  • 使用 Value 属性设置时间
  • 允许并设置 null 值
  • 用于提示的水印文本
  • UpdateValueOnLostFocus 行为
  • 基于事件检测时间
时间格式

📄 阅读： references/time-formatting.md

  • 用于显示格式的 FormatString
  • 用于时间选择器格式的 SelectorFormatString
  • 常见格式模式
  • 特定区域设置格式
自定义时间选择器

📄 阅读： references/time-selector-customization.md

  • SfTimeSelector 控件概述
  • 小时、分钟和上下午单元格模板
  • 单元格尺寸和间距属性
  • 高级模板自定义
外观和样式

📄 阅读： references/appearance-and-styling.md

  • 前景色和背景色
  • 所选项样式
  • 流向（支持从右到左的布局）
  • 编辑模式（内联或下拉）
  • 主题集成

快速入门

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        
        <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}");

常见模式

模式 1：24 小时制时间显示
<syncfusion:SfTimePicker FormatString="HH:mm:ss" 
                         SelectorFormatString="HH:mm"/>
模式 2：允许 null 值并显示水印
<syncfusion:SfTimePicker AllowNull="True"
                         Value="{x:Null}"
                         Watermark="Select a time"/>
模式 3：只读时间显示
<syncfusion:SfTimePicker AllowInlineEditing="False"
                         ShowDropDownButton="False"
                         Value="09:00:00"/>
模式 4：自定义单元格尺寸和间距
<syncfusion:SfTimePicker SelectorItemWidth="60"
                         SelectorItemHeight="60"
                         SelectorItemSpacing="20"/>

关键属性速查

属性默认值用途
Value当前系统时间获取/设置选定的时间（TimeSpan）
FormatString"h:mm tt"显示格式（12 小时制/24 小时制）
SelectorFormatString"h:mm tt"时间选择器单元格的格式
AllowNullfalse启用对 null 值的支持
Watermark—Value 为 null 时显示的占位文本
AllowInlineEditingtrue允许直接编辑文本
ShowDropDownButtontrue显示下拉按钮
SetValueOnLostFocusfalse失去焦点时更新值
SelectorItemWidth30选择器单元格的宽度（像素）
SelectorItemHeight30选择器单元格的高度（像素）
SelectorItemSpacing4选择器项之间的间距（像素）
Foreground—文本颜色
Background—控件背景色
AccentBrush—所选项的高亮颜色
FlowDirectionLeftToRight支持 RTL 布局

评论

支持 Markdown