簡(jiǎn)介一款仿照ElementUI TimePicker交互風(fēng)格使用C#與MVVM模式實(shí)現(xiàn)的WPF時(shí)間選擇器源碼包適合具備WPF基礎(chǔ)、希望豐富桌面端控件庫(kù)或?qū)W習(xí)MVVM數(shù)據(jù)綁定的開(kāi)發(fā)者。資源包含項(xiàng)目完整工程主要文件為C#源代碼415個(gè)cs并配有XAML界面定義、生成緩存與編譯輸出dll/exe/pdb等壓縮包總大小918KB共1267個(gè)文件可在Visual Studio中直接打開(kāi)構(gòu)建。內(nèi)容涵蓋從項(xiàng)目創(chuàng)建、視圖設(shè)計(jì)、ViewModel封裝、INotifyPropertyChanged屬性通知到時(shí)間對(duì)話框交互與數(shù)據(jù)綁定的完整實(shí)現(xiàn)思路包括通過(guò)Slider調(diào)節(jié)小時(shí)與分鐘、事件驅(qū)動(dòng)刷新選中時(shí)間的細(xì)節(jié)便于對(duì)照學(xué)習(xí)完整交互閉環(huán)。當(dāng)前已有420人學(xué)習(xí)下載適合作為WPF自定義控件與ElementUI風(fēng)格遷移的參考樣例。1. 為什么我決定在WPF里手寫(xiě)一個(gè)TimePicker先說(shuō)結(jié)論Web前端一個(gè)好用的組件遷移到桌面端時(shí)照搬交互邏輯很容易真正難的是把它翻譯成WPF自己的語(yǔ)言。我之前在做一套基于 .NET 8 的 WPF 上位機(jī)項(xiàng)目界面框架用的是 Prism MVVM。系統(tǒng)里有大量的參數(shù)配置界面其中不少字段需要用戶錄入時(shí)間。一開(kāi)始的方案很樸素用 TextBox 讓用戶手動(dòng)輸入配合字符串校驗(yàn)。用了一段時(shí)間后發(fā)現(xiàn)這樣做的體驗(yàn)確實(shí)不太行——操作人員經(jīng)常輸錯(cuò)格式上午九點(diǎn)半輸成 21:30 的情況都算好的還有人直接不按HH:mm:ss格式來(lái)導(dǎo)致后端解析報(bào)錯(cuò)。后來(lái)想過(guò)直接用 WPF 自帶的DatePicker但那玩意兒只支持日期不支持時(shí)間。又看了看第三方控件庫(kù)很多收費(fèi)的、開(kāi)源的也都有時(shí)間選擇器但為了一個(gè)控件引入一套重型UI庫(kù)對(duì)項(xiàng)目來(lái)說(shuō)代價(jià)偏高而且主題風(fēng)格跟現(xiàn)有界面不一定搭。這時(shí)候我就想到了ElementUI里的TimePicker。用過(guò) Vue 2 ElementUI 做過(guò)后臺(tái)管理系統(tǒng)的朋友應(yīng)該都有印象它的交互其實(shí)很經(jīng)典一個(gè)輸入框點(diǎn)擊后彈出一塊面板里面是小時(shí)、分鐘、秒三個(gè)獨(dú)立滾動(dòng)的列表滾動(dòng)到哪個(gè)值就選中哪個(gè)值。整個(gè)交互直觀、確認(rèn)感強(qiáng)對(duì)鼠標(biāo)操作和觸摸操作都友好特別適合工業(yè)現(xiàn)場(chǎng)那種“點(diǎn)一點(diǎn)、滾一滾”就能完成輸入的場(chǎng)景。我當(dāng)時(shí)的想法是與其去找現(xiàn)成的第三方庫(kù)不如照著 ElementUI TimePicker 的思路在 WPF 里自己實(shí)現(xiàn)一個(gè)。一方面可以完全控制交互細(xì)節(jié)和樣式另一方面也能把控件封裝成可復(fù)用的組件后續(xù)在別的項(xiàng)目里直接拿過(guò)去用。這篇文章就把完整的實(shí)現(xiàn)思路、核心代碼和坑記錄下來(lái)。內(nèi)容面向的是有 WPF 基礎(chǔ)、熟悉 MVVM、想自己動(dòng)手做自定義控件的開(kāi)發(fā)者。如果你只是想要一個(gè)能用的時(shí)間選擇器這篇文章也能讓你明白這類(lèi)控件的內(nèi)部機(jī)理遇到問(wèn)題的時(shí)候不至于抓瞎。2. 先把交互邏輯拆清楚從ElementUI那里學(xué)到的三件事動(dòng)手寫(xiě)代碼之前我把 ElementUI 的 TimePicker 面板反復(fù)用了好幾遍把它的交互拆成了三個(gè)關(guān)鍵模塊模塊一輸入框展示狀態(tài)。輸入框本身是一個(gè)只讀項(xiàng)點(diǎn)擊區(qū)域任意位置都能彈出選擇面板。面板打開(kāi)后輸入框里會(huì)顯示當(dāng)前選中的時(shí)間。ElementUI 的輸入框里還有一個(gè)清除圖標(biāo)在懸浮狀態(tài)下出現(xiàn)點(diǎn)擊即可清空已選時(shí)間。這個(gè)細(xì)節(jié)很小但體驗(yàn)差異非常大我決定一并實(shí)現(xiàn)。模塊二三列滾動(dòng)選擇器。這是整個(gè)控件的核心。小時(shí)、分鐘、秒各占一列每列有若干選項(xiàng)選項(xiàng)列表可以自由滾動(dòng)停在中間高亮位置的值就是當(dāng)前選中值。上下兩端還有漸隱遮罩讓列表看起來(lái)有“轉(zhuǎn)輪”的感覺(jué)。ElementUI 的寬泛配置里有步進(jìn)概念比如分鐘可以設(shè)置step 5那么列表就只顯示 0、5、10、15……我最初版本只做到了整分鐘的步進(jìn)秒的步進(jìn)留到了后續(xù)擴(kuò)展。模塊三底部操作區(qū)。ElementUI 默認(rèn)有“此刻”和“確定”兩個(gè)按鈕。點(diǎn)擊“此刻”會(huì)立即把時(shí)分秒設(shè)為當(dāng)前系統(tǒng)時(shí)間點(diǎn)擊“確定”則把面板當(dāng)前選中的時(shí)間回填到輸入框。另外還有一個(gè)“清空”的鏈接按鈕需要設(shè)置可清空屬性才顯示。操作區(qū)的存在讓用戶對(duì)“面板里的臨時(shí)選擇”和“真正提交到輸入框的值”有了清晰的心理認(rèn)知這不是多此一舉而是為了和“隨手滾動(dòng)一下就把值改了”做區(qū)分。上面對(duì)交互邏輯的還原是 Web 端的思路但在 WPF 里實(shí)現(xiàn)時(shí)有三個(gè)關(guān)鍵點(diǎn)需要做技術(shù)映射ElementUIWeb端WPF桌面端技術(shù)要點(diǎn)彈出面板浮層Popup控件Popup天然支持任意位置的浮層展示且能保持焦點(diǎn)管理自主可控滾動(dòng)選擇列ListBox或ItemsControl ScrollViewer需要處理選中項(xiàng)始終居中、滾動(dòng)結(jié)束后自動(dòng)吸附動(dòng)態(tài)樣式切換DataTriggerControlTemplate通過(guò)模板觸發(fā)器實(shí)現(xiàn)選項(xiàng)的高亮、激活狀態(tài)響應(yīng)式步進(jìn)配置屬性依賴用DependencyProperty暴露MinuteStep、SecondStep等屬性在 WPF 里最讓我糾結(jié)的是第二點(diǎn)——滾動(dòng)列的實(shí)現(xiàn)方式。ListBox默認(rèn)支持鍵盤(pán)和鼠標(biāo)選擇但它默認(rèn)的選中高亮是隨機(jī)的并不固定在中間如果直接把ListBox的SelectedItem綁定到當(dāng)前時(shí)間值面板打開(kāi)時(shí)會(huì)自動(dòng)跳到選中項(xiàng)這也是可以利用的。但問(wèn)題在于ElementUI 那種“滾動(dòng)到中間即選中”的體驗(yàn)實(shí)際上是需要我們?cè)跐L動(dòng)停止后根據(jù)ScrollViewer.VerticalOffset計(jì)算當(dāng)前應(yīng)該選中的那個(gè)值再賦值給SelectedItem同時(shí)再把該項(xiàng)滾動(dòng)到列表正中間。這套邏輯用ListBox能做到但要對(duì)模板做大量修改把默認(rèn)的選擇視覺(jué)完全覆蓋掉。后來(lái)我換了個(gè)思路用ItemsControl承載數(shù)據(jù)列表外面套一層ScrollViewer然后用代碼控制選中項(xiàng)滾動(dòng)到中間。ItemsControl的好處是省掉了ListBox默認(rèn)那一堆選中視覺(jué)我可以完全掌控每一項(xiàng)在不同狀態(tài)下的樣子。3. 控件的整體架構(gòu)與數(shù)據(jù)模型設(shè)計(jì)3.1 控件類(lèi)型選擇自繪超類(lèi)控件 vs 用戶控件這里需要做一個(gè)關(guān)鍵選擇這個(gè) TimePicker 到底從哪個(gè)基類(lèi)繼承方案一是從Control繼承通過(guò)ControlTemplate定義控件外觀方案二是從UserControl繼承直接在 XAML 里組合子控件。我的選擇是外殼用UserControl內(nèi)部數(shù)據(jù)邏輯用獨(dú)立的TimePickerViewModel。是的你沒(méi)有看錯(cuò)為了快速做出一個(gè)穩(wěn)定的版本我先用了偏簡(jiǎn)單的方式。因?yàn)閁serControl的好處很直接我可以在 XAML 里很自然地組合Button、Popup、ListBox不用處理復(fù)雜的模板綁定問(wèn)題。等這個(gè)版本跑順、API 穩(wěn)定之后再去封裝成CustomControl就是水到渠成的事核心邏輯可以復(fù)用。對(duì)外暴露的屬性我用依賴屬性實(shí)現(xiàn)這樣 MVVM 綁定才可用public static readonly DependencyProperty SelectedTimeProperty DependencyProperty.Register( nameof(SelectedTime), typeof(TimeSpan?), typeof(WpfTimePicker), new FrameworkPropertyMetadata( null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnSelectedTimeChanged)); public TimeSpan? SelectedTime { get (TimeSpan?)GetValue(SelectedTimeProperty); set SetValue(SelectedTimeProperty, value); } public static readonly DependencyProperty MinuteStepProperty DependencyProperty.Register( nameof(MinuteStep), typeof(int), typeof(WpfTimePicker), new PropertyMetadata(1, OnStepChanged)); public int MinuteStep { get (int)GetValue(MinuteStepProperty); set SetValue(MinuteStepProperty, value); }SelectedTime的類(lèi)型為什么用TimeSpan?而不是DateTime?因?yàn)椤皶r(shí)間點(diǎn)”語(yǔ)義和“時(shí)間長(zhǎng)度”語(yǔ)義在 WPF 里容易混淆。TimePicker 選擇的是“一天里的某個(gè)時(shí)刻”用TimeSpan表達(dá)足夠而且和數(shù)據(jù)庫(kù)里的time類(lèi)型能直接互轉(zhuǎn)。TimeSpan?的可空特性天然支持“未選擇任何值”的狀態(tài)這個(gè)對(duì)參數(shù)配置界面來(lái)說(shuō)很重要。3.2 面板數(shù)據(jù)源小時(shí)、分鐘、秒列表的生成邏輯面板里需要三個(gè)列表我直接生成ObservableCollectionint作為數(shù)據(jù)源并為每個(gè)集合維護(hù)一個(gè)當(dāng)前選中索引。這樣ListBox的SelectedIndex綁定推進(jìn)起來(lái)非常直接。這里要注意一個(gè)步進(jìn)邏輯如果MinuteStep 5那么分鐘列表只有 12 項(xiàng)0, 5, 10, ..., 55但一個(gè)真實(shí)時(shí)間比如 3:47它的分鐘部分是 47并不在這個(gè)列表里。ElementUI 的處理方式是當(dāng)你滾動(dòng)某個(gè)值之后自動(dòng)把它向下取整到最近的合法步進(jìn)值。我做了同樣的處理——在初始化列表時(shí)將當(dāng)前值向下取整后再定位索引。小時(shí)列表永遠(yuǎn)都是 0-23 固定 24 項(xiàng)分鐘和秒列表根據(jù)步進(jìn)動(dòng)態(tài)計(jì)算private void BuildMinuteList() { MinuteItems.Clear(); int step Math.Max(1, MinuteStep); for (int i 0; i 60; i step) { MinuteItems.Add(i); } }這里有個(gè)邊界MinuteStep必須能被 60 整除否則最后一格不完整。我早期沒(méi)做這個(gè)校驗(yàn)導(dǎo)致用戶設(shè)置MinuteStep 7時(shí)列表漏掉了 56-59選中 55 之后下一次滾動(dòng)直接跳到 60不存在出現(xiàn)了尷尬的空白。后來(lái)我在屬性變更回調(diào)里補(bǔ)上了校驗(yàn)如果 60 不能整除步進(jìn)值就把 60 這一項(xiàng)也強(qiáng)行補(bǔ)進(jìn)去private void OnStepChanged() { // 保證列表完整 if (60 % MinuteStep ! 0) { MinuteItems.Add(60); // 理論上不合法但視覺(jué)上至少能滾動(dòng) } }說(shuō)實(shí)話這個(gè)補(bǔ)丁不算優(yōu)雅但至少不會(huì)讓列表出現(xiàn)空白項(xiàng)。更好的做法是在 XAML 使用側(cè)就約束步進(jìn)值必須是 60 的因數(shù)只是我在代碼里留了兜底。3.3 三列之間的聯(lián)動(dòng)關(guān)系時(shí)分秒三列本身互相獨(dú)立但是當(dāng)小時(shí)列滾動(dòng)到最后一項(xiàng)23時(shí)分鐘列和秒列不應(yīng)該受影響反之亦然。從時(shí)間語(yǔ)義上它們是平級(jí)的不存在“小時(shí)變了分鐘要清空”的邏輯。但有一個(gè)聯(lián)動(dòng)的隱含邏輯當(dāng)外部SelectedTime變化時(shí)三個(gè)列表的選中索引需要同步刷新。這個(gè)同步邏輯寫(xiě)在OnSelectedTimeChanged回調(diào)里private static void OnSelectedTimeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var picker (WpfTimePicker)d; var newTime e.NewValue as TimeSpan?; picker.internalViewModel.SyncFromTime(newTime); }SyncFromTime會(huì)更新當(dāng)前選中索引和輸入框的文本展示。反過(guò)來(lái)當(dāng)用戶在面板里滾動(dòng)選擇新值時(shí)內(nèi)部 ViewModel 通過(guò)事件通知外部更新SelectedTime屬性。注意 MVVM 雙向同步的時(shí)候不要死循環(huán)。只要確定“外部 → 內(nèi)部”走的是依賴屬性回調(diào)“內(nèi)部 → 外部”走的是屬性賦值并且在賦值時(shí)判斷值是否真的變化就不會(huì)出現(xiàn)無(wú)限套娃。4. 核心實(shí)現(xiàn)彈出面板、滾動(dòng)吸附、選項(xiàng)高亮4.1 Popup 外殼與焦點(diǎn)管理面板的載體我用Popup這是 WPF 里實(shí)現(xiàn)浮層的標(biāo)準(zhǔn)方案。關(guān)鍵配置如下Popup x:NamePART_Popup AllowsTransparencyTrue PlacementBottom PlacementTarget{Binding ElementNameInputBox} StaysOpenFalse IsOpen{Binding IsDropDownOpen, ModeTwoWay} Border BackgroundWhite BorderBrush#DCDFE6 BorderThickness1 CornerRadius4 !-- 面板內(nèi)容 -- /Border /PopupStaysOpenFalse是這里最有意思的配置。它的行為是當(dāng)用戶在 Popup 之外的區(qū)域點(diǎn)擊鼠標(biāo)時(shí)Popup 會(huì)自動(dòng)關(guān)閉。這很符合我們“點(diǎn)擊外部區(qū)域關(guān)閉下拉面板”的預(yù)期。但這里有幾個(gè)坑。第一個(gè)坑StaysOpenFalse在 Popup 內(nèi)部點(diǎn)擊子控件時(shí)如果子控件內(nèi)部有焦點(diǎn)切換比如點(diǎn)擊了 ListBox 的一個(gè)項(xiàng)不會(huì)關(guān)閉 Popup但如果輸入框本身是只讀的點(diǎn)擊輸入框也不會(huì)觸發(fā)失焦。這反而是個(gè)好現(xiàn)象。第二個(gè)坑如果在 Popup 內(nèi)部放了另一個(gè)可輸入文本的控件點(diǎn)擊它可能沒(méi)問(wèn)題但鍵盤(pán) Tab 切換焦點(diǎn)時(shí)Popup 會(huì)意外關(guān)閉。所以面板內(nèi)的可交互控件盡量用Button、ListBox這類(lèi)不要放TextBox。4.2 列表吸附居中的實(shí)現(xiàn)細(xì)節(jié)吸附居中是整個(gè)控件里最容易做飄的部分。我最初直接把ListBox的ScrollIntoView用來(lái)居中結(jié)果發(fā)現(xiàn)ScrollIntoView只是確保項(xiàng)可見(jiàn)不是確保居中。實(shí)現(xiàn)真正的居中需要自己算偏移量。思路是每一項(xiàng)高度固定設(shè)為 36px那么滾動(dòng)到第 N 項(xiàng)時(shí)讓該項(xiàng)出現(xiàn)在列表正中間需要把ScrollViewer.VerticalOffset設(shè)置為// 面板可視區(qū)高度為 PanelViewportHeight項(xiàng)高度為 ItemHeight double targetOffset n * ItemHeight - (PanelViewportHeight - ItemHeight) / 2.0;比如面板高度是 180項(xiàng)高 36一個(gè)面板里能顯示 5 項(xiàng)。要讓索引為 3 的項(xiàng)居中偏移量就是3*36 - (180-36)/2 108 - 72 36。也就是說(shuō)第 3 項(xiàng)在滾動(dòng) 36 像素后剛好位于可視區(qū)中間。滾動(dòng)結(jié)束后還需要計(jì)算當(dāng)前居中項(xiàng)。我監(jiān)聽(tīng)ScrollViewer的ScrollChanged事件private void OnScrollChanged(object sender, ScrollChangedEventArgs e) { if (e.VerticalChange 0) return; var scrollViewer (ScrollViewer)sender; double offset scrollViewer.VerticalOffset; int centeredIndex (int)Math.Round( (offset (scrollViewer.ViewportHeight - ItemHeight) / 2.0) / ItemHeight); centeredIndex Math.Max(0, Math.Min(centeredIndex, ItemsCount - 1)); if (centeredIndex ! _currentCenteredIndex) { _currentCenteredIndex centeredIndex; OnCenteredIndexChanged(centeredIndex); } }這段代碼看似簡(jiǎn)單但有一個(gè)使用體驗(yàn)上的問(wèn)題如果用戶滾動(dòng)到兩個(gè)選項(xiàng)的交接處比如偏移量 37 或 35四舍五入后索引不會(huì)立刻變化會(huì)有一種“卡在中縫”的感覺(jué)。ElementUI 的處理是滾動(dòng)停止后會(huì)自動(dòng)彈性吸附到最近的項(xiàng)。要實(shí)現(xiàn)這種效果需要監(jiān)聽(tīng)?wèi)T性滾動(dòng)結(jié)束。WPF 的ScrollViewer在鼠標(biāo)滾輪操作后有慣性嗎默認(rèn)沒(méi)有鼠標(biāo)滾輪是離散的格滾動(dòng)。觸摸板則會(huì)有慣性慣性結(jié)束后ScrollChanged事件會(huì)觸發(fā)一輪VerticalOffset的微小變化但不會(huì)自動(dòng)吸附。我采取的方案是在ScrollChanged事件里加了一個(gè)DispatcherTimer延遲判斷。如果 80 毫秒內(nèi)沒(méi)有新的滾動(dòng)事件就認(rèn)為滾動(dòng)結(jié)束執(zhí)行一次平滑吸附動(dòng)畫(huà)private void RestartScrollTimer() { _scrollTimer.Stop(); _scrollTimer.Start(); } private void OnScrollTimerTick(object? sender, EventArgs e) { _scrollTimer.Stop(); SmoothScrollToIndex(_currentCenteredIndex); }平滑滾動(dòng)用ScrollViewer.ScrollToVerticalOffset搭配一個(gè)DoubleAnimation動(dòng)畫(huà)動(dòng)畫(huà)時(shí)長(zhǎng)控制在 120ms 左右手感比較接近 Web 端的轉(zhuǎn)輪效果。4.3 選項(xiàng)模板與高亮觸發(fā)的實(shí)現(xiàn)每個(gè)選項(xiàng)的數(shù)據(jù)模型很簡(jiǎn)單public class TimeItem { public int Value { get; set; } public string DisplayText Value.ToString(00); }列表項(xiàng)的樣式用ControlTemplate定義核心是“居中高亮”效果ListBox.ItemTemplate DataTemplate Grid Height36 TextBlock Text{Binding DisplayText} HorizontalAlignmentCenter VerticalAlignmentCenter FontSize18 Foreground#606266/ /Grid /DataTemplate /ListBox.ItemTemplate但“高亮”不能只靠ListBox.SelectedItem來(lái)實(shí)現(xiàn)因?yàn)闈L動(dòng)過(guò)程中選中項(xiàng)始終在變化默認(rèn)的選中背景是方形的不好看。我在列表上方疊加了一層半透明的“高亮指示條”固定在中間位置模擬輪盤(pán)的選中槽。這樣滾動(dòng)列表時(shí)視覺(jué)上就是一條高亮條在中間而各項(xiàng)從它下方劃過(guò)。這個(gè)方案比逐項(xiàng)改ItemContainerStyle的IsSelected觸發(fā)要簡(jiǎn)單很多而且視覺(jué)上穩(wěn)定。如果再配上上下漸隱遮罩就很有 ElementUI 那種“滾輪”味道了。高亮指示條的 XAML 大概是Grid ScrollViewer x:NamePART_HourScroll .../ !-- 中間高亮條 -- Border Height36 VerticalAlignmentCenter Background#F2F6FC BorderBrush#E4E7ED BorderThickness0,1,0,1 IsHitTestVisibleFalse/ !-- 上下漸隱遮罩 -- LinearGradientBrush ... ... /LinearGradientBrush /Grid這里IsHitTestVisibleFalse特別重要。如果不設(shè)置遮罩和高亮條會(huì)攔截鼠標(biāo)點(diǎn)擊導(dǎo)致ScrollViewer收不到鼠標(biāo)滾輪事件。我第一次實(shí)現(xiàn)時(shí)就忘了結(jié)果鼠標(biāo)滾輪在列表中間滾動(dòng)無(wú)效只能在邊緣滾動(dòng)排查了好一陣才發(fā)現(xiàn)是這層透明層在“吃”鼠標(biāo)事件。4.4 確定、此刻、清空按鈕的實(shí)現(xiàn)底部操作區(qū)在 Popup 內(nèi)部邏輯相對(duì)獨(dú)立“此刻”按鈕設(shè)置當(dāng)前系統(tǒng)時(shí)間到三個(gè)列表并同步SelectedTime。不關(guān)閉 Popup方便用戶確認(rèn)后再點(diǎn)確定?！按_定”按鈕把當(dāng)前列表選中值寫(xiě)入SelectedTime關(guān)閉 Popup?！扒蹇铡卑粹o把SelectedTime設(shè)為null關(guān)閉 Popup。按鈕命令用ICommand實(shí)現(xiàn)。我在 ViewModel 里定義了三個(gè)命令ConfirmCommand、NowCommand、ClearCommand。這里比較考驗(yàn) MVVM 設(shè)計(jì)的是ConfirmCommand需要讀取的是“面板當(dāng)前的臨時(shí)選中值”而不是SelectedTime屬性因?yàn)橛脩艨赡芨牧肆斜淼珱](méi)確定。所以 ViewModel 內(nèi)部維護(hù)了一個(gè)TempHour、TempMinute、TempSecond的臨時(shí)值只有點(diǎn)“確定”才把這些臨時(shí)值合并進(jìn)SelectedTime。private void OnConfirm() { var time new TimeSpan(TempHour, TempMinute, TempSecond); if (SelectedTime ! time) SelectedTime time; IsDropDownOpen false; }還有一個(gè)小細(xì)節(jié)當(dāng)用戶通過(guò)輸入框手動(dòng)輸入時(shí)間并回車(chē)后輸入框的值也要回填到SelectedTime。由于輸入框綁定的是文本字符串我需要在 ViewModel 里先把字符串解析成TimeSpan解析失敗就恢復(fù)原文本。這個(gè)邏輯放在一個(gè)TextInputCommand里通過(guò)KeyDown事件觸發(fā)比LostFocus觸發(fā)更可控。5. 與 MVVM 集成的綁定細(xì)節(jié)與可復(fù)用性改造5.1 依賴屬性的綁定鏈設(shè)計(jì)整個(gè)控件對(duì)外暴露的核心屬性其實(shí)只有三個(gè)屬性名類(lèi)型說(shuō)明SelectedTimeTimeSpan?選中的時(shí)間雙向綁定MinuteStepint分鐘步進(jìn)默認(rèn) 1SecondStepint秒步進(jìn)默認(rèn) 1IsDropDownOpenbool面板展開(kāi)狀態(tài)必要時(shí)外部控制IsDropDownOpen也做成了依賴屬性方便在某些頁(yè)面實(shí)現(xiàn)“點(diǎn)一個(gè)按鈕自動(dòng)彈出時(shí)間選擇器”。這個(gè)屬性在內(nèi)部綁定到Popup.IsOpen。綁定鏈非常關(guān)鍵的一點(diǎn)是依賴屬性變更必須通知內(nèi)部 ViewModel而內(nèi)部 ViewModel 的變更要能反映到依賴屬性。我用ViewModel的PropertyChanged事件來(lái)更新而不是直接在回調(diào)里賦值這樣不會(huì)嵌套觸發(fā)private void OnSelectedTimeChanged() { // 外部綁定的值變化了 - 更新內(nèi)部UI狀態(tài) SyncFromTime(SelectedTime); }在SyncFromTime里做一次值比較只有TimeSpan真正不同才更新界面上三個(gè)列表的SelectedIndex。這樣可以避免SelectedIndex變化又回引發(fā)SelectedTime賦值構(gòu)成死循環(huán)。5.2 在 Prism 項(xiàng)目中的實(shí)際使用范例在 Prism 的 ViewModel 里使用這個(gè)控件無(wú)非就是正常綁定private TimeSpan? _startTime new TimeSpan(8, 30, 0); public TimeSpan? StartTime { get _startTime; set SetProperty(ref _startTime, value); }XAML 里controls:WpfTimePicker SelectedTime{Binding StartTime, UpdateSourceTriggerPropertyChanged} MinuteStep5 /這里有一個(gè)我在項(xiàng)目中實(shí)際踩過(guò)的坑如果SelectedTime用ModeTwoWay綁定且UpdateSourceTriggerPropertyChanged那么每次面板內(nèi)列表滾動(dòng)變化都會(huì)更新源屬性。這在 Prism 的SetProperty里會(huì)觸發(fā)大量通知如果源屬性還關(guān)聯(lián)了后端保存邏輯比如PropertyChanged里自動(dòng)調(diào)用數(shù)據(jù)庫(kù)保存性能就會(huì)出問(wèn)題。解決辦法有兩個(gè)綁定用默認(rèn)的LostFocus更新方式只在失焦時(shí)更新源在 ViewModel 層做節(jié)流比如使用 Rx 的Throttle操作符。我最終采用的是方案一UpdateSourceTriggerLostFocus。用戶點(diǎn)擊“確定”關(guān)閉面板后焦點(diǎn)回到輸入框此時(shí)才觸發(fā)源屬性更新。對(duì)于配置界面來(lái)說(shuō)這個(gè)行為更自然。5.3 控件主題與樣式的可擴(kuò)展設(shè)計(jì)為了讓控件融入不同項(xiàng)目的視覺(jué)風(fēng)格我把所有顏色、尺寸、圓角都抽成了靜態(tài)資源而不是寫(xiě)死在模板里SolidColorBrush x:KeyTimePickerPopupBackgroundBrush Color#FFFFFF/ SolidColorBrush x:KeyTimePickerItemHighlightBrush Color#F2F6FC/ System:Double x:KeyTimePickerItemHeight36/System:Double這樣外部項(xiàng)目可以隨時(shí)覆蓋這些資源來(lái)調(diào)整風(fēng)格。另外輸入框外框我直接復(fù)用了 TextBox 默認(rèn)樣式?jīng)]有額外重寫(xiě)這樣可以保持項(xiàng)目?jī)?nèi)輸入框一致性。6. 實(shí)戰(zhàn)中遇到的5個(gè)坑與排查過(guò)程6.1 Popup 點(diǎn)擊外部關(guān)閉后輸入框顯示文本沒(méi)刷新這個(gè)問(wèn)題的現(xiàn)象是彈出面板滾動(dòng)到一個(gè)新值不點(diǎn)確定直接點(diǎn)擊外部關(guān)閉下拉框。結(jié)果輸入框顯示的還是舊值。原因很明確我沒(méi)有在IsDropDownOpen從 true 變?yōu)?false 時(shí)做回滾處理。ElementUI 的行為也是這樣的面板的臨時(shí)值不點(diǎn)確定不會(huì)提交。所以這個(gè)其實(shí)是符合預(yù)期的。但用戶不這么想他們第一次操作時(shí)很容易誤以為值已經(jīng)改了。我后來(lái)加了一個(gè)輔助提示捕獲面板關(guān)閉事件如果當(dāng)前臨時(shí)值和提交值不一致在輸入框背景上給一個(gè)淡黃色標(biāo)記提示“有未提交的變更”。后來(lái)覺(jué)得這個(gè)提示太“像編輯器”了而且增加了很多復(fù)雜度最終還是通過(guò)行為設(shè)計(jì)解決——用戶點(diǎn)確定才提交點(diǎn)外部關(guān)閉就恢復(fù)顯示舊值。6.2 ListBox 的虛擬化導(dǎo)致的居中計(jì)算偏差當(dāng)列表項(xiàng)數(shù)量較大比如秒列表 60 項(xiàng)時(shí)ListBox默認(rèn)會(huì)啟用虛擬化。這會(huì)導(dǎo)致一個(gè)現(xiàn)象在滾動(dòng)事件里訪問(wèn)某個(gè)ListBoxItem的TransformToAncestor坐標(biāo)時(shí)該項(xiàng)可能尚未生成返回的坐標(biāo)是 0。解決方案關(guān)閉虛擬化。VirtualizingStackPanel.IsVirtualizingFalse/VirtualizingStackPanel.IsVirtualizing代價(jià)是列表項(xiàng)全部加載內(nèi)存占用會(huì)大一點(diǎn)。但由于每個(gè)時(shí)間選擇器的列表只有 60 項(xiàng)最多 241212 個(gè)項(xiàng)完全在可接受范圍。這個(gè)坑讓我認(rèn)識(shí)到列表小的時(shí)候虛擬化帶來(lái)的好處遠(yuǎn)小于它引入的坐標(biāo)計(jì)算復(fù)雜度。6.3 高 DPI 屏幕上的像素偏移在 4K 高分屏上WPF 的坐標(biāo)計(jì)算和縮放必須考慮 DPI。ItemHeight 36是設(shè)備無(wú)關(guān)單元DIP但在某些縮放比例125%、150%下實(shí)際渲染時(shí)的像素網(wǎng)格可能不是整數(shù)導(dǎo)致滾動(dòng)吸附后高亮條邊界出現(xiàn)半像素模糊。解決方式在控件加載時(shí)獲取當(dāng)前的 DPI 比例把偏移量計(jì)算對(duì)齊到像素網(wǎng)格var presentationSource PresentationSource.FromVisual(this); if (presentationSource ! null) { double dpiX presentationSource.CompositionTarget.TransformToDevice.M11; pixelAdjustedOffset Math.Round(offset * dpiX) / dpiX; }這個(gè)寫(xiě)法在 125% 縮放下能把模糊問(wèn)題壓到最小。并不完美但實(shí)際視覺(jué)上基本可接受。6.4 ScrollViewer 的 CanContentScroll 必須設(shè)為 True這是我踩過(guò)的最隱蔽的一個(gè)坑。ScrollViewer默認(rèn)CanContentScrollTrue但如果ItemsControl內(nèi)部嵌套了別的控件可能被隱式改成False。一旦CanContentScrollFalseScrollViewer滾動(dòng)的是物理像素而不是“項(xiàng)”的單位導(dǎo)致ScrollChanged里按ItemHeight去推索引時(shí)計(jì)算結(jié)果完全不可用。排查過(guò)程比較曲折我一度以為是 DPI 問(wèn)題后來(lái)在即時(shí)窗口里輸出VerticalOffset的連續(xù)變化值發(fā)現(xiàn)每次滾動(dòng)的步長(zhǎng)不是 36 的倍數(shù)才意識(shí)到是CanContentScroll的問(wèn)題。強(qiáng)制設(shè)為T(mén)rue后VerticalOffset就按項(xiàng)來(lái)跳變了計(jì)算也就穩(wěn)了。6.5 鍵盤(pán)方向鍵操作被滾動(dòng)條攔截在ListBox默認(rèn)行為中鍵盤(pán)上下方向鍵可以移動(dòng)選中項(xiàng)。但在我們這個(gè)“滾動(dòng)即改值”的自定義列表里方向鍵操作會(huì)讓用戶覺(jué)得列表選中項(xiàng)在高亮條之間移動(dòng)但高亮條不動(dòng)體驗(yàn)很割裂。所以我在滾動(dòng)列的PreviewKeyDown事件里攔截了方向鍵改為直接滾動(dòng)列表內(nèi)容if (e.Key Key.Up || e.Key Key.Down) { e.Handled true; int offset e.Key Key.Up ? -1 : 1; SmoothScrollToIndex(_currentCenteredIndex offset); }這樣鍵盤(pán)操作和鼠標(biāo)滾輪的操作邏輯統(tǒng)一了都在“改變居中項(xiàng)”。7. 體驗(yàn)優(yōu)化與后續(xù)擴(kuò)展方向7.1 輸入框直接輸入的兼容只依賴滾動(dòng)選擇還是不夠效率。用戶有時(shí)知道自己要輸入“9:30”沒(méi)有必要打開(kāi)面板一路滾下去。所以我為輸入框加了HH:mm:ss的文本解析支持允許用戶直接輸入。輸入框綁定一個(gè)字符串屬性失焦或按回車(chē)時(shí)解析解析成功后同步SelectedTime失敗則還原。這里我參考了 ElementUI 對(duì)輸入可讀格式的處理允許HH:mm、HH:mm:ss兩種格式冒號(hào)是半角前后空格忽略。解析用TimeSpan.TryParseExact兩次嘗試即可if (TimeSpan.TryParseExact(text, hh\\:mm, null, out var result) || TimeSpan.TryParseExact(text, hh\\:mm\\:ss, null, out result)) { SelectedTime result; }有一點(diǎn)要注意hh會(huì)被理解為 12 小時(shí)制HH才是 24 小時(shí)制。WPF 的TimeSpan解析里沒(méi)有 12/24 小時(shí)制的概念直接表示“小時(shí)數(shù)”。我之前曾用DateTime.TryParseExact來(lái)解析結(jié)果發(fā)現(xiàn)25:00也能被解析成第二天的 1:00這肯定不符合時(shí)間選擇器的預(yù)期所以換回了TimeSpan.TryParseExact它能正確拒絕大于 24 的值。7.2 禁用狀態(tài)與只讀模式參數(shù)配置界面常有“當(dāng)前步驟不可編輯”的狀態(tài)所以控件必須支持IsEnabledFalse并且禁用時(shí)要保持輸入框文本可見(jiàn)。WPF 的UserControl默認(rèn)繼承IsEnabled傳遞但下拉按鈕和 Popup 的打開(kāi)邏輯要主動(dòng)檢查private void OnOpenButtonClick(object sender, RoutedEventArgs e) { if (!IsEnabled) return; IsDropDownOpen true; }這里有一個(gè)小坑IsEnabledFalse狀態(tài)下點(diǎn)擊輸入框依然會(huì)觸發(fā)MouseLeftButtonUp事件只讀模式下輸入框不會(huì)聚焦但事件仍會(huì)冒泡。所以輸入框的打開(kāi)事件也要主動(dòng)檢查IsEnabled否則會(huì)出現(xiàn)“禁用了還能點(diǎn)開(kāi)彈窗”的奇怪行為。7.3 可能的擴(kuò)展范圍選擇、跟隨時(shí)鐘變化、觸摸支持后續(xù)如果項(xiàng)目需要我可以在這個(gè)控件基礎(chǔ)上繼續(xù)擴(kuò)展開(kāi)始-結(jié)束時(shí)間范圍給控件增加一個(gè)ModeRange內(nèi)部維護(hù)兩個(gè)TimeSpan?值面板里用兩個(gè)高亮條分別選擇實(shí)現(xiàn)對(duì)“班次時(shí)間段”這種配置的快速錄入。系統(tǒng)時(shí)間跟隨面板底部加一個(gè)“當(dāng)前時(shí)間”數(shù)字每秒刷新點(diǎn)擊即填入。適合需要輸入“當(dāng)前精確時(shí)間”的場(chǎng)景。觸摸支持工業(yè)場(chǎng)景有很多觸摸屏機(jī)器。當(dāng)前實(shí)現(xiàn)里列表滾動(dòng)依賴鼠標(biāo)滾輪和方向鍵觸摸屏上體驗(yàn)一般。需要額外處理ManipulationDelta事件實(shí)現(xiàn)慣性滑動(dòng)。這個(gè)改造成本不低等到真有需求時(shí)再做。快捷選項(xiàng)類(lèi)似“上班時(shí)間 08:30”“午休結(jié)束 13:00”這類(lèi)固定時(shí)段可以直接在面板頂部放幾個(gè)快捷鍵按鈕用戶點(diǎn)擊即選中。不過(guò)以上這些都是錦上添花。核心控件跑穩(wěn)了后續(xù)加需求就是往 ViewModel 里塞邏輯的事架構(gòu)不會(huì)變。8. 最后分享一點(diǎn)個(gè)人的實(shí)現(xiàn)心得這個(gè)仿 ElementUI 的 WPF 時(shí)間選擇器從前到后大約花了我三個(gè)晚上的業(yè)余時(shí)間。第一版是很粗糙的沒(méi)有鍵盤(pán)操作、沒(méi)有輸入框解析、沒(méi)有 DPI 適配滾動(dòng)吸附也經(jīng)常飄。真正讓它變可靠的是后面幾輪現(xiàn)場(chǎng)使用反饋操作員說(shuō)“滾完了想按回車(chē)卻沒(méi)反應(yīng)”我加了鍵盤(pán)事件有人說(shuō)“想直接輸 9:30 不想滾”我加了文本解析還有人說(shuō)“觸摸屏上滾不動(dòng)”這個(gè)我目前還沒(méi)完全解決但已經(jīng)知道了方向。如果你也要做類(lèi)似的自定義控件我最大的建議是先仔細(xì)還原 Web 端/成熟產(chǎn)品的交互細(xì)節(jié)把每一步用戶操作都列出來(lái)然后再考慮技術(shù)實(shí)現(xiàn)。技術(shù)選型都簡(jiǎn)單難的是對(duì)交互細(xì)節(jié)的理解和堅(jiān)持。很多控件做出功能但是難用就是因?yàn)閷?shí)現(xiàn)者根本沒(méi)有想過(guò)“點(diǎn)外部關(guān)閉時(shí)臨時(shí)值怎么辦”這類(lèi)細(xì)節(jié)。代碼好不好看不重要用戶用著順手才是第一原則。這個(gè)控件目前的代碼量不算大核心邏輯幾百行就夠。后續(xù)我會(huì)考慮把控件模板進(jìn)一步改造為標(biāo)準(zhǔn)CustomControl的形式讓使用方不繼承我的 ViewModel 也能用。如果你做過(guò)類(lèi)似的控件歡迎交流你的實(shí)現(xiàn)思路和踩坑經(jīng)驗(yàn)。本文還有配套的精品資源點(diǎn)擊獲取