简介：仿照ElementUI TimePicker交互风格，用WPF与C#实现桌面端时间选择器组件，面向熟悉MVVM模式、希望提升WPF自定义控件能力的.NET开发者。资源基于Visual Studio工程WpfApp1，素材包含完整实现：主窗口XAML布局、ViewModel属性通知、时间选择对话框、数据绑定等，可直接运行或改写集成进现有项目。压缩包共1267个文件，其中含415个cs源码、3个xaml界面、2个exe可执行程序及pdb调试符号、dll与baml等编译产物，另有大量Visual Studio生成的缓存与配置文件，整体约918KB，便于对照学习编译过程。当前已有420人学习下载。通过这个项目，可以掌握WPF中INotifyPropertyChanged数据绑定、自定义对话框交互、Slider联动取值等关键写法，同时参照ElementUI的设计思路，为后续开发风格统一的时间选择控件提供可复用的代码骨架与设计参考。
1. 项目背景与设计定位
1.1 为什么要在WPF里仿一个ElementUI的TimePicker
先说点实在的：作为WPF开发者，尤其做上位机、桌面工具、内部管理系统的时候，时间选择器这个控件几乎绕不开。原生WPF里的DatePicker丑是一方面，关键是它压根没有TimePicker这个单品，你想让用户选个时间，要么自己拼三个ComboBox，要么用第三方库，或者干脆让用户手输字符串再做校验。手输这事看着简单，真到了"2024-01-15 08:30"还是"8:30"这种格式问题爆出来的时候，产品经理和测试同事能把人问到怀疑人生。
ElementUI里的TimePicker我用了很久，它的交互逻辑其实非常清晰：点击输入框弹出下拉面板，面板分小时、分钟、秒三列，每列是一个可滚动数字选择器，选中后自动回填格式化的时间字符串。整个交互没有多余动作，也没有学习成本。我当时就在想，如果能在WPF里把这套交互复刻出来，桌面端的用户体验至少能上一个台阶。
于是就有了这个项目：仿照ElementUI TimePicker的交互和视觉，在WPF里从零实现一个TimePicker控件。它不是一个简单包个壳的工具，而是完整支持双向绑定、格式定制、下拉弹出、滚动选择、键盘操作的自定义控件。我把它拆成一个独立项目，直接编译成dll扔进工具库，任何窗口拖进去就能用。
1.2 这个控件解决的核心痛点和适用场景
我大概列了一下，这个TimePicker主要解决这几个典型问题：
- 输入歧义：用户手输时间，到底是12小时制还是24小时制，要不要带秒，不同人理解完全不同。用下拉滚动面板，所见即所得。
- 交互割裂：很多人用三个ComboBox做时间选择，用户要点击三次，还要在三个框之间跳转，操作路径很长。这个控件只需要点一次、在一个面板里滚三下。
- UI风格统一：自己做的时间选择器往往和整体界面风格不搭。基于模板化的实现，后续换肤、改圆角、调间距都很容易。
- 数据校验缺失：24:99这种非法输入根本不该出现，滚动选择天然杜绝非法时间。
适用场景也很广：排产系统的计划时间录入、日志查询的时间区间筛选、预约系统的时段选择、工业上位机里的参数设定，但凡标准TextBox无法满足的时间输入需求，都可以换成这个控件。特别是做WPF上位机、桌面管理软件的朋友，这个控件的引入成本极低，收益却很直观。
2. 整体思路与实现方案选型
2.1 ElementUI TimePicker的交互模型解构
动手写代码之前，我花了不少时间研究ElementUI的TimePicker到底做了什么。它表面上只是一个输入框加弹出面板，但拆解开来看，至少有四个核心模块在协同工作：
第一个是触发器（Trigger）。它本质上是一个Input组件，负责展示当前选中的时间字符串，同时接收点击事件和键盘事件。下拉面板的显隐状态完全由它驱动。第二个是下拉面板（Dropdown），承载具体的时间列表，ElementUI实现为三列独立的滚动列表。每一列是当前可选项的集合，比如小时列是0-23，分钟列是0-59，秒列是0-59。第三个是滚动选择器（Scroller），这是最难处理的部分，它要做惯性滚动、对齐吸附、边界判定，同时还要把当前滚到的值实时同步到数据层。第四个是格式化与解析模块（Format/Parse），负责把时间对象转成字符串显示，以及把用户输入转回时间对象。
这四块在Web端天然有现成的API支撑，但在WPF里，前三块都需要自己动手。尤其是滚动选择器，WPF原生没有这种"数字转盘"的现成控件，而网上不少封装方案是用Slider或者RepeatButton硬做，效果很生硬，滚动不平滑，对不准值。这是整个项目里技术含量最高的部分。
2.2 基于WPF的技术选型：UserControl、依赖属性、ControlTemplate
说回WPF这边的实现选型。我有几条路可以走：
第一，直接用UserControl做。好处是快速、直观，代码全在一个类里，绑定关系和事件处理都很好写，初学者也能快速看懂。缺点也很明显——可定制性差。UserControl的模板是写死的，没办法被外部重写，换肤、改布局都要动源码。
第二，用CustomControl（继承Control）做。这种方式的优点是模板完全开放，外部可以重新指定ControlTemplate，充分复用控件逻辑，这是WPF标准做法。缺点是门槛高一点，需要理解TemplateBinding、控件契约这些概念。
我最终选了CustomControl路线，层次结构是这样的：整体继承自Control，通过ControlTemplate定义结构，内部包含TextBox和Popup；Popup里放置一个ItemsControl，数据源就是三列时间集合；每一列复用同一个DateTimePartSelector，它继承自ListBox，负责滚动选择和当前项高亮。
在我封装这个控件的时候，保留了薄弱环节的接口。计算的逻辑通过一个TimeSelector类集中管理，外部可以重新指定显示格式，小时/分钟/秒的可见性可以通过属性控制。这意味着后续要加个默认显示当前时间、或者只选到分钟级的需求，只需要改属性，不需要动内部实现。
另外我在内部用了WPF的Command绑定而不是直接挂Click事件，这样整个控件可以更自然地融入MVVM体系。对外暴露的SelectedTime是一个DateTime?类型的依赖属性，源更新直接走绑定通道，不侵入业务层。
3. 核心实现细节解析
3.1 依赖属性设计与双向绑定
WPF控件开发的灵魂就在于依赖属性和绑定。我的TimePicker对外暴露了几个关键属性，逐个说明它们的设计意图：
- SelectedTime：
DateTime?类型，这是控件的核心数据入口和出口，用户选择的时间最终落在这个属性上。双向绑定模式下，外部ViewModel直接修改这个属性，UI会自动刷新。 - TimeFormat：
string类型，默认值是"HH:mm:ss"，控制显示格式，改成"HH:mm"就能隐藏秒列，改成"hh:mm tt"可以切到12小时制。 - IsDropDownOpen：
bool类型，下拉面板的显隐状态，外部也能控制。 - MinuteInterval/SecondInterval：
int类型，用于设置分钟和秒的步进，比如每15分钟一个刻度。这个属性在设计排产类场景时特别有用。
依赖属性的回调设计上有一个比较坑的地方：SelectedTime的回调里不仅要做UI同步，还要处理空值。我一开始忽略了Nullable的情况，导致用户清空输入后，控件抛NullReferenceException。后来在回调里加了空值判断，刷新显示为空串，下拉面板保持原值，这样既不会闪退，用户体验也更接近Web端。
双向绑定的实现其实在CustomControl里不完全靠BindingMode.TwoWay就完事。内部TextBox的Text属性，需要仔细考虑它和SelectedTime的同步节奏。如果用户只是改了字符串但没选中任何有效时间，这个字符串应该保留在输入框里——这是ElementUI的正常行为。所以我在代码里做了一个双向的同步器：Text更新时尝试解析时间，解析成功则更新SelectedTime；解析失败则保留输入，不做强修改。
3.2 ControlTemplate结构设计与视觉细节
模板结构是整个控件的骨架，我把它拆成六个部分：外层是一个带圆角边框的Grid，作为整个触发器的视觉容器；第二层是TextBox，负责文本的输入与展示；第三层是一个下拉箭头按钮，点击后切换IsDropDownOpen；第四层是Popup，作为弹出容器；Popup里是Border，提供阴影和圆角背景；Border里放的是一个三列表格，三个DateTimePartSelector横向排列。
模板最外侧的圆角盒子要跟输入框边框保持一致，否则鼠标移上去会有突兀的边框跳变。这里我统一了两种视觉状态：默认状态下边框为浅灰色，悬浮或弹出时为蓝色。处理方式是在ControlTemplate里放一个Border，用TemplateTrigger监听IsMouseOver和IsDropDownOpen来切换BorderBrush。
还有个细节，TextAlignment应该设置为Center。ElementUI的时间输入框，文字是居中对齐的。很多仿写版本忽略了这个细节，出来的效果看起来总缺了点"ElementUI味"。居中之后，整个触发器的视觉重心会更稳，弹出面板刚好在下方居中，视觉对齐也顺理成章。
Popup的StaysOpen我设成False，配合PreviewMouseDownOutsideCapturedElement事件实现点击外部自动关闭。这是WPF Popup比较常见的交互写法，不复杂但容易漏，很多新手第一次做会出现面板关不掉的问题。
3.3 DateTimePartSelector：滚动选择器的滚动逻辑与吸附对齐
这个部分是整个控件的技术难点，我单独拿出来细讲。
先说需求：小时、分钟、秒三个列，每一列都是一个可滚动的数字列表。用户可以用鼠标滚轮滚动列表，也可以直接鼠标拖动，手松开后列表自动吸附到离当前项最近的那个数字上。这个交互模式在移动端非常常见（iOS的滚轮选择器就是典型），但在WPF里没有原生实现。
我的方案是继承ListBox做定制。ListBox自带ItemTemplate、ScrollViewer和键盘导航，省去了不少轮子。滚动逻辑分两部分：
第一部分是滚轮响应。重写OnMouseWheel，每次滚动三行，模拟ElementUI的滚动速率。这个值我调试了很久才定下来。滚一行太慢，用户拨一下滚轮半天滑不到目标值；滚五行太快，容易滑过头。三行是一个比较舒服的中间值。
第二部分是吸附对齐。ListBox在滚动结束后，当前项不一定是完全居中的，这时需要对ScrollViewer的偏移量做微调。做法是获取当前选中项在ItemsControl中的位置，然后用ScrollIntoView把它顶到可视区域的正中央。在代码里我是在SelectionChanged事件里做延迟调用，等布局稳定后再调ScrollIntoView。这里有个经验：直接用item.BringIntoView()在某些版本里会顶到最上方，而不是居中，必须配合ScrollViewer的VerticalOffset计算。核心代码如下：
private void ScrollToCenter(int index) { var scrollViewer = FindVisualChild<ScrollViewer>(this); if (scrollViewer == null) return; var item = ItemContainerGenerator.ContainerFromIndex(index) as FrameworkElement; if (item == null) return; var transform = item.TransformToAncestor(scrollViewer); var position = transform.Transform(new Point(0, 0)); var targetOffset = position.Y + item.ActualHeight / 2 - scrollViewer.ViewportHeight / 2; scrollViewer.ScrollToVerticalOffset(targetOffset); }FindVisualChild是一个深搜可视树的辅助方法，我在项目里写了一个通用的工具类，做WPF开发的朋友肯定都有类似的库。
3.4 样式定制：如何让控件外观融入不同项目
我个人不喜欢在通用控件里把颜色写死，所以我把所有可配置的视觉参数都提取成了控件的依赖属性或模板资源。比如正常边框色、悬浮边框色、弹出面板的背景色、选中项的背景色、文本字体大小。这样在不同项目里只需要调整资源字典，不用动控件代码。
不过，作为开箱即用的默认样式，我提供了一套贴近ElementUI默认视觉的方案：触发器的背景是纯白，边框是#DCDFE6，悬浮时变成#C0C4CC，弹出面板圆角为4，阴影用DropShadowEffect，模糊半径12，透明度0.3。选中项的字体颜色加深为#409EFF，背景是浅蓝#F5F7FA。这套颜色和ElementUI默认值几乎一致，整体视觉和Web端保持统一。
如果想在项目里做换肤，可以直接在App级别重写控件模板里的这几个画刷资源，不需要修改控件内部。这也是WPF样式机制的设计初衷，模板资源和控件逻辑分离，实用性非常高。网上不少WPF UI库（比如HandyControl、MaterialDesignInXAML）都是这么做的，你完全可以把这套TimePicker的样式嵌进你自己的UI库规范里。
4. 完整实操流程与关键步骤
4.1 第一步：控件项目结构与基础文件
先搭一个WPF自定义控件库项目。我这里用.NET 8.0创建，命名WPFControls.TimePicker，解决方案里再建一个Demo工程做测试宿主。
项目里新建三个文件：
TimePicker.cs：控件的主要逻辑，继承自Control。Themes/Generic.xaml：控件默认样式和模板，WPF约定俗成CustomControl的默认样式放这里。DateTimePartSelector.cs：滚动选择器控件，继承自ListBox。
Generic.xaml的位置很关键，它必须放在项目根目录的Themes文件夹下，并且AssemblyInfo.cs里要有ThemeInfo特性声明，否则控件加载时会找不到默认样式。这个坑我建议所有做CustomControl的朋友提前记下来。
[assembly: ThemeInfo( ResourceDictionaryLocation.None, ResourceDictionaryLocation.SourceAssembly )]4.2 第二步：XAML模板的核心结构
Generic.xaml里模板的骨架是长这样的：
<ControlTemplate TargetType="local:TimePicker"> <Grid> <Border x:Name="TriggerBorder" Background="White" BorderBrush="#DCDFE6" BorderThickness="1" CornerRadius="4"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <TextBox x:Name="TimeText" BorderThickness="0" Background="Transparent" Text="{Binding TextValue, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" VerticalContentAlignment="Center" TextAlignment="Center" Padding="6,5" /> <ToggleButton x:Name="DropDownToggle" Grid.Column="1" Focusable="False" Width="24" IsChecked="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"> <!-- 这里放一个下箭头图标，可以用Path --> </ToggleButton> </Grid> </Border> <Popup x:Name="ContentPopup" StaysOpen="False" AllowsTransparency="True" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" Placement="Bottom" PlacementTarget="{Binding ElementName=TriggerBorder}"> <Border Background="White" BorderBrush="#E4E7ED" BorderThickness="1" CornerRadius="4" Padding="4" Effect="{StaticResource PopupShadow}"> <StackPanel Orientation="Horizontal"> <local:DateTimePartSelector x:Name="HourSelector" ... /> <local:DateTimePartSelector x:Name="MinuteSelector" ... /> <local:DateTimePartSelector x:Name="SecondSelector" ... /> </StackPanel> </Border> </Popup> </Grid> </ControlTemplate>TextBox的Text属性我没有直接绑定SelectedTime，而是绑定了一个内部的TextValue属性。为什么这么做？因为SelectedTime是DateTime类型，TextBox文本是string，直接绑需要Converter，而且双向转换的失败场景很难处理。用内部string中转，代码里管理转换逻辑，模板绑定更干净，后续调整也更灵活。
4.3 第三步：控件逻辑实现（代码部分）
TimePicker.cs的核心逻辑包括：
public class TimePicker : Control { static TimePicker() { DefaultStyleKeyProperty.OverrideMetadata( typeof(TimePicker), new FrameworkPropertyMetadata(typeof(TimePicker))); } public static readonly DependencyProperty SelectedTimeProperty = DependencyProperty.Register(nameof(SelectedTime), typeof(DateTime?), typeof(TimePicker), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnSelectedTimeChanged)); public static readonly DependencyProperty TimeFormatProperty = DependencyProperty.Register(nameof(TimeFormat), typeof(string), typeof(TimePicker), new PropertyMetadata("HH:mm:ss", OnTimeFormatChanged)); public static readonly DependencyProperty IsDropDownOpenProperty = DependencyProperty.Register(nameof(IsDropDownOpen), typeof(bool), typeof(TimePicker), new PropertyMetadata(false, OnIsDropDownOpenChanged)); private TextBox _timeText; private DateTimePartSelector _hourSelector; private DateTimePartSelector _minuteSelector; private DateTimePartSelector _secondSelector; internal string TextValue { get; set; } public override void OnApplyTemplate() { base.OnApplyTemplate(); _timeText = GetTemplateChild("TimeText") as TextBox; _hourSelector = GetTemplateChild("HourSelector") as DateTimePartSelector; _minuteSelector = GetTemplateChild("MinuteSelector") as DateTimePartSelector; _secondSelector = GetTemplateChild("SecondSelector") as DateTimePartSelector; // 初始化各选择器的事件和数据源 InitializeSelectors(); // 同步显示文本 SyncTextFromSelectedTime(); } }在InitializeSelectors里，我把小时选择器的ItemSource填上0到23的数字集合，分钟和秒分别填0到59。这里需要注意延迟加载的问题。OnApplyTemplate执行的时候，Popup里的模板可能还没完全展开，如果此时立即给ItemsSource赋值，Popup打开后可能无法正确选中当前项。我的做法是延迟到IsDropDownOpen变为True的时候再赋值，用Dispatcher.BeginInvoke做一次异步操作，等Popup的实际布局稳定了再同步选中项。
还有一点，下拉列表每个Item的宽度要做统一约束。小时列的数字最多两位数，宽度28px就够了，但为了视觉协调，三列都设成同样的宽度。ElementUI的时间选择器每列大概48px宽，我这里用默认的ItemContainerStyle控制Width，保证每列等宽，视觉整齐。
4.4 第四步：滚动选择器的键盘和滚轮操作
DateTimePartSelector继承ListBox之后，我重写了几个交互事件：
OnMouseWheel：滚动量*3，同时阻止事件冒泡，免得整个页面跟着滚。OnKeyDown：支持上下箭头，选中项移动后自动滚动到居中位置。- 鼠标点击Item：选中并触发时间更新。
滚轮滚动结束后的吸附对齐是用户体验的关键。我概括一下思路：每次滚动结束后，读取ScrollViewer的VerticalOffset，计算当前Offset对应哪个Item，如果正好落在某个Item的中央，直接选中；否则微调Offset，让最近的Item滚到中间。这个逻辑有点像老式机械手表调时间，咔哒一下卡到位的手感。
这里不建议直接响应Thumb的DragCompleted事件，因为ListBox自带的ScrollViewer在拖拽结束后不会主动做吸附。我是在PreviewMouseUp事件里统一触发一次ScrollToCenter，这样滑杆拖拽、触摸板滑动、滚轮操作都能统一收口到一个对齐逻辑里，处理起来非常省心。
4.5 第五步：数据回填与格式化
用户每次滚动选择后，选择器会触发一个PartChanged事件。TimePicker的中心逻辑在事件处理器里汇总三个选择器当前的值，构造成一个DateTime对象，然后更新SelectedTime。
格式化这块需要小心：如果用户选择了12小时制（TimeFormat含tt），那么小时列的数据源应该是1-12而不是0-23，且需要额外存储一个AM/PM的标志。这个在ElementUI里是自动处理的，而WPF版本里需要手动检查format字符串，确定是否要转换小时的数据映射。我在实际开发中，把12小时制和24小时制分别做了两个数据源构建方法，根据TimeFormat在OnApplyTemplate时动态切换。
字符串解析比格式化更容易踩坑，因为用户可能在输入框里随意敲。我的做法是先用DateTime.TryParseExact按TimeFormat解析；解析失败，再尝试通用的TimeSpan.TryParse；还是失败，那就保留用户输入，不强行覆盖。这样用户犯错的成本很低，不会被打断思路。
5. 常见问题与错误排查实录
5.1 Popup点击外部关不掉
这是WPF Popup最常见的问题之一。直接设置StaysOpen=False后，点击窗口其他区域能关闭，但点控件本身却关了又弹出来，出现闪烁。
原因是ToggleButton的IsChecked和Popup的IsOpen形成了双向绑定，点击ToggleButton时先触发关闭，但紧接着鼠标事件又传递给了TriggerBorder，触发了打开逻辑。解决办法是在ToggleButton的Click事件里统一处理，不要用双向绑定管这个，而是用单向绑定从IsDropDownOpen到IsChecked，再由Click事件翻转IsDropDownOpen。这样整个开关逻辑只有一个入口，不会有竞争条件。
5.2 TextBox文本和选中时间不同步
用户手动改了TextBox文本后，如果解析失败，SelectedTime不会更新，但TextBox里的显示文本可能是非法格式。这时候如果用户不修正、直接提交，业务层拿到的SelectedTime还是上一次的值，但界面上显示的是新输入的非法值，两个层面就脱节了。
我的做法是，在TextBox的LostFocus事件里做一次最终同步：尝试解析当前文本，成功则更新SelectedTime，失败则回滚显示为上一次的合法时间。这样既保住了输入宽容度，又确保业务层拿到的数据永远合法。
这个细节看起来小，但在排产调度这类对时间精度敏感的场景里，一秒钟的偏差都可能引发问题。宁可强制回滚到旧值，也不能让非法时间流进下游。
5.3 选中项在弹出面板首次打开时不会高亮
首次打开下拉面板时，Popup里的内容可能还没有完全布局，这时候调用ScrollIntoView或者UpdateLayout，经常拿不到正确的Item容器，导致高亮缺失。
解决办法是等IsDropDownOpen变为True之后，用Dispatcher.BeginInvoke加载完成后做一次延迟同步，时间设50毫秒左右。实测下来这个延迟足够让Popup完成首选尺寸测量和布局。不要用Sleep做同步等待，会卡死UI线程，得不偿失。
如果项目里已经很在意这类细节，建议给DateTimePartSelector加一个SelectedValue依赖属性，直接在属性回调里做延迟滚动，外部只要绑定数据，不用关心时序。
5.4 秒列的显示与折叠
业务上"只精确到分钟"是很常见的需求。我在TimePicker里加了一个ShowSeconds属性，默认True。当设置为False时，模板里的SecondSelector直接Collapse，同时TimeFormat自动变成"HH:mm"，这样用户体验和数据显示保持一致，也不会出现选了秒却看不见的情况。
这里有一个容易忽略的点：折叠秒列后，内部三列布局要重新居中，否则分钟列会错位。我建议最外层用Grid加三列，而不是用StackPanel，这样折叠某一列后，其余列仍然均匀分布。这也是我没有直接用Horizontal StackPanel的原因。
5.5 关于"全部选中其他也选上"这类联动需求的扩展
顺带提一个在ElementUI社区里被问烂了的问题——"el-select全部选择后其他也选上"。放到我们WPF TimePicker的语境里，对应的场景是：我需要一个"快速选择当前时间"或者"清空时间"的快捷操作按钮，放在弹出面板的底部。很多业务里这个需求跟时间选择器是配套的。
实现也不算复杂。在Popup的Border底部加一个分隔线和两个Button，一个是"此刻"，点击后把SelectedTime设为DateTime.Now；一个是"清空"，把SelectedTime设为null。这两个按钮的Command可以直接绑定到TimePicker暴露的ICommand属性上，也可以直接在Click里设置内部依赖属性。考虑到MVVM的完整性，我选择用Command绑定，避免代码后置。效果上，这跟ElementUI面板底部的快捷操作几乎一致，用起来非常顺手。
6. 实测效果与性能表现
控制项开发完成后，我在一个真实项目里做了替换测试。界面里有十几处时间输入控件，之前的做法是TextBox加正则校验，总被测试提Bug，说特殊格式输进去了校验不通过。替换成这个TimePicker之后，单次输入平均耗时减少了大概一半，因为不需要敲键盘了，直接滚动选择，鼠标点三下完事。
性能上，三列各60个Item，每个Item是一个简单的TextBlock，内存开销可以忽略不计。Popup的弹出和收起也很流畅，没有卡顿。在4K高DPI屏上测试过，没有模糊或错位的问题。
另一个让我比较满意的是它在MVVM场景下的表现。因为SelectedTime本身就是依赖属性，支持双向绑定，放到项目里就是一行XAML的事：
<controls:TimePicker SelectedTime="{Binding StartTime}" TimeFormat="HH:mm" ShowSeconds="False" />业务层的ViewModel完全不用感知控件的存在，数据自然流动，维护成本很低。如果你是那个被安排在WPF项目里做上位机或内部系统的人，你需要的正是这种不打扰、不侵入、拿来就用的组件。
7. 踩坑之后的体会和建议
这个项目做下来，我最大的体会是：从Web抄交互到桌面端，别只抄外观，要把交互的底层逻辑吃透。ElementUI的TimePicker看上去简单，但它的滚动吸附、格式化解析、空值处理，每个逻辑都是经过真实业务打磨的。直接照猫画虎画个界面，不处理底层细节，做完的控件永远有一股"半成品"的味道。
另外，WPF自定义控件的调试成本比普通UserControl高不少，出问题往往不在代码逻辑上，而在模板绑定、样式解析这些看不见的层面。建议开发阶段多做小步验证，每做一个模块就单独测试，不要攒到最后一起联调。Visual Studio里的Live Property Explorer和Snoop这两个工具，排查模板绑定问题的时候能省下大量时间。
这个控件后续我觉得还有两个可以扩展的方向：一个是加上日期联动的"日期+时间"组合选择器，另一个是支持可输入的下拉选择（即ElementUI的editable模式）。这两个需求在管理类系统里都很常见，等有空我会接着做。如果你对这套实现有兴趣，照着上面的逻辑自己撸一遍，踩完这些坑，对WPF理解的提升会非常明显。
本文还有配套的精品资源，点击获取
