简介仿照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和PopupPopup里放置一个ItemsControl数据源就是三列时间集合每一列复用同一个DateTimePartSelector它继承自ListBox负责滚动选择和当前项高亮。在我封装这个控件的时候保留了薄弱环节的接口。计算的逻辑通过一个TimeSelector类集中管理外部可以重新指定显示格式小时/分钟/秒的可见性可以通过属性控制。这意味着后续要加个默认显示当前时间、或者只选到分钟级的需求只需要改属性不需要动内部实现。另外我在内部用了WPF的Command绑定而不是直接挂Click事件这样整个控件可以更自然地融入MVVM体系。对外暴露的SelectedTime是一个DateTime?类型的依赖属性源更新直接走绑定通道不侵入业务层。3. 核心实现细节解析3.1 依赖属性设计与双向绑定WPF控件开发的灵魂就在于依赖属性和绑定。我的TimePicker对外暴露了几个关键属性逐个说明它们的设计意图SelectedTimeDateTime?类型这是控件的核心数据入口和出口用户选择的时间最终落在这个属性上。双向绑定模式下外部ViewModel直接修改这个属性UI会自动刷新。TimeFormatstring类型默认值是HH:mm:ss控制显示格式改成HH:mm就能隐藏秒列改成hh:mm tt可以切到12小时制。IsDropDownOpenbool类型下拉面板的显隐状态外部也能控制。MinuteInterval/SecondIntervalint类型用于设置分钟和秒的步进比如每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 FindVisualChildScrollViewer(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 TargetTypelocal:TimePicker Grid Border x:NameTriggerBorder BackgroundWhite BorderBrush#DCDFE6 BorderThickness1 CornerRadius4 Grid Grid.ColumnDefinitions ColumnDefinition Width* / ColumnDefinition WidthAuto / /Grid.ColumnDefinitions TextBox x:NameTimeText BorderThickness0 BackgroundTransparent Text{Binding TextValue, RelativeSource{RelativeSource TemplatedParent}, ModeTwoWay, UpdateSourceTriggerPropertyChanged} VerticalContentAlignmentCenter TextAlignmentCenter Padding6,5 / ToggleButton x:NameDropDownToggle Grid.Column1 FocusableFalse Width24 IsChecked{Binding IsDropDownOpen, RelativeSource{RelativeSource TemplatedParent}, ModeTwoWay} !-- 这里放一个下箭头图标可以用Path -- /ToggleButton /Grid /Border Popup x:NameContentPopup StaysOpenFalse AllowsTransparencyTrue IsOpen{Binding IsDropDownOpen, RelativeSource{RelativeSource TemplatedParent}, ModeTwoWay} PlacementBottom PlacementTarget{Binding ElementNameTriggerBorder} Border BackgroundWhite BorderBrush#E4E7ED BorderThickness1 CornerRadius4 Padding4 Effect{StaticResource PopupShadow} StackPanel OrientationHorizontal local:DateTimePartSelector x:NameHourSelector ... / local:DateTimePartSelector x:NameMinuteSelector ... / local:DateTimePartSelector x:NameSecondSelector ... / /StackPanel /Border /Popup /Grid /ControlTemplateTextBox的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最常见的问题之一。直接设置StaysOpenFalse后点击窗口其他区域能关闭但点控件本身却关了又弹出来出现闪烁。原因是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} TimeFormatHH:mm ShowSecondsFalse /业务层的ViewModel完全不用感知控件的存在数据自然流动维护成本很低。如果你是那个被安排在WPF项目里做上位机或内部系统的人你需要的正是这种不打扰、不侵入、拿来就用的组件。7. 踩坑之后的体会和建议这个项目做下来我最大的体会是从Web抄交互到桌面端别只抄外观要把交互的底层逻辑吃透。ElementUI的TimePicker看上去简单但它的滚动吸附、格式化解析、空值处理每个逻辑都是经过真实业务打磨的。直接照猫画虎画个界面不处理底层细节做完的控件永远有一股半成品的味道。另外WPF自定义控件的调试成本比普通UserControl高不少出问题往往不在代码逻辑上而在模板绑定、样式解析这些看不见的层面。建议开发阶段多做小步验证每做一个模块就单独测试不要攒到最后一起联调。Visual Studio里的Live Property Explorer和Snoop这两个工具排查模板绑定问题的时候能省下大量时间。这个控件后续我觉得还有两个可以扩展的方向一个是加上日期联动的日期时间组合选择器另一个是支持可输入的下拉选择即ElementUI的editable模式。这两个需求在管理类系统里都很常见等有空我会接着做。如果你对这套实现有兴趣照着上面的逻辑自己撸一遍踩完这些坑对WPF理解的提升会非常明显。本文还有配套的精品资源点击获取