列實現(xiàn)：MVVM下的動態(tài)綁定與編輯器切換)
簡介面向WPF/.NET開發(fā)者的DataGrid動態(tài)列源碼示例核心解決表格列需要在運行時按數(shù)據(jù)模型自動生成的問題。實現(xiàn)思路涵蓋反射讀取屬性生成列、列集合動態(tài)管理、自定義編輯模板、保存取消命令及數(shù)據(jù)驗證等環(huán)節(jié)適合正處于MVVM學習階段、或需要為表格實現(xiàn)動態(tài)列與可編輯單元格的C#桌面開發(fā)者參考。壓縮包共43個文件、約88KB主體為17個C#源碼文件包含視圖模型、動態(tài)列生成類、實體模型及兩個XAML界面另有工程配置、編譯產(chǎn)物和輔助調(diào)試文件三層代碼結(jié)構(gòu)完整且可直接運行。該資源已有2931人學習瀏覽體量小而實用讀者可借助源碼掌握動態(tài)列與編輯模板的綁定寫法、雙向同步與校驗邏輯也可先運行編譯好的程序觀察效果再對照代碼理解能有效縮短WPF下MVVM模式的入門與排錯時間。 做動態(tài)列需求前我一直以為WPF里DataGrid的列綁定是件很順手的事。直到接了一個上位機報表的項目接口返回的字段列表是運行時才確定的列名可能今天叫A明天叫B客戶還要求不同的列用不同的輸入控件數(shù)字列要能輸小數(shù)、狀態(tài)列要下拉選擇、日期列要點出日歷。那會兒才意識到DataGrid的Columns在MVVM里就是一塊硬骨頭它根本不支持從ViewModel直接綁定。這篇文章把我后來沉淀下來的完整方案拆開講包括動態(tài)行模型、列定義模型、動態(tài)列生成、單元格編輯器切換以及在刷屏量級數(shù)據(jù)下踩過的各種坑給同樣被動態(tài)列折磨的人一個可以直接抄作業(yè)的存檔。1. 動態(tài)列到底難在哪DataGrid與MVVM的適配層裂縫1.1 從一次上位機報表需求說起當時的需求其實并不復雜數(shù)據(jù)源來自一個通用查詢接口返回字段清單和行數(shù)據(jù)字段數(shù)量、字段類型、字段順序全部動態(tài)。也就是說ViewModel里不可能寫死一個包含固定屬性集合的實體類也不可能在XAML里預置死若干個DataGridTextColumn。客戶還提了兩個附加要求不同字段要用合適的編輯器輸入文本、數(shù)字、下拉、日期以及列的顯示隱藏希望在運行時通過菜單切換。這兩個要求單獨看不難但疊加上MVVM三個字麻煩就來了。如果你用AutoGenerateColumns DataTable偷懶列確實能自動生成但編輯器完全不可控默認文本綁定、類型轉(zhuǎn)換、下拉列、日期列全都得另想辦法更別提把列顯隱和用戶配置序列化回ViewModel了。1.2 為什么 DataGrid.Columns 不能直接綁定DataGrid.Columns是ObservableCollectionDataGridColumn類型按道理是支持監(jiān)聽的。但問題在于DataGrid內(nèi)部并不會在Columns集合變化時重新生成可見列或者準確說它只監(jiān)聽集合的增刪事件來同步UI可你很難把一個DataGridTextColumn序列化為配置存到數(shù)據(jù)庫也很難把它作為純數(shù)據(jù)對象綁定到ViewModel。更本質(zhì)的問題是DataGridColumn不是依賴對象能直接“用數(shù)據(jù)驅(qū)動”的那種模型。它的Header、Binding等屬性雖然有些是依賴屬性但整個Columns集合是控件內(nèi)部的UI集合不屬于DataContext的數(shù)據(jù)范圍。你要在MVVM里動態(tài)生成列本質(zhì)上是在“數(shù)據(jù)模型”和“控件元素”之間做翻譯這個翻譯層要么寫在View的代碼后臺要么封裝成附加行為。1.3 三個必須拆分的設計層面做完這個項目后我的結(jié)論是動態(tài)列必須拆成三層來看。數(shù)據(jù)源層提供行的數(shù)據(jù)行不再是一個固定實體類而是一個可以按字段名取值的動態(tài)容器。列定義層描述每一列的信息標題、綁定路徑、寬度、類型、編輯器類型、是否只讀、是否可見。UI生成層根據(jù)列定義創(chuàng)建對應的DataGridColumn并處理增刪、顯隱、寬度變化等UI操作。這三層各管各的ViewModel只管前兩層UI生成層用附加屬性或輕量代碼后臺承載。這樣既保住了MVVM的數(shù)據(jù)驅(qū)動優(yōu)勢又不用把UI細節(jié)塞進ViewModel。2. 動態(tài)行的數(shù)據(jù)層設計字典行模型與索引器通知2.1 為什么不用DataTable很多人第一反應是DataTable畢竟它能動態(tài)加列加行配合AutoGenerateColumns也很省事。但DataTable放在MVVM里會有幾個致命問題。第一DataTable的行是DataRowView綁定到DataGrid后類型信息很弱校驗、格式化都得依賴DataTable的列類型配置但列類型又是全局的沒法做到同一個列在不同行有不同的編輯器行為。第二DataTable和ViewModel之間缺一層映射你很難把業(yè)務校驗、命令、按鈕列這些邏輯掛到行對象上。第三DataTable自帶的通知機制在WPF里偶爾會有刷新時機的問題尤其是編輯后立即排序、篩選偶爾會出現(xiàn)值對不上的詭異現(xiàn)象。所以對于中大型項目我更推薦自己做一個“動態(tài)行”容器而不是直接用DataTable。2.2 DynamicRow內(nèi)核字典加索引器加INPC動態(tài)行的核心其實就是一個字典加一個索引器屬性public class DynamicRow : ObservableObject { private readonly Dictionarystring, object? _values new(StringComparer.OrdinalIgnoreCase); public object? this[string key] { get _values.TryGetValue(key, out var v) ? v : null; set { if (_values.TryGetValue(key, out var old) Equals(old, value)) return; _values[key] value; OnPropertyChanged(key); // 通知對應列的綁定刷新 OnPropertyChanged(Item[]); // 兼容集合索引器監(jiān)聽 } } public IReadOnlyDictionarystring, object? Values _values; }這里有一個細節(jié)必須提醒如果只發(fā)OnPropertyChanged(key)在多數(shù)場景下DataGrid的單元格能刷新但如果有人用CollectionViewSource對動態(tài)行做了分組或排序或者綁定了ItemsSource的路徑索引就必須額外發(fā)一個Item[]通知否則部分場景刷新不到。2.3 索引器通知觸發(fā)機制的原理為什么CollectionView會監(jiān)聽Item[]這種偽屬性名因為WPF的綁定引擎把this[string key]這類索引器當成一個名為Item[]的屬性來看待。當綁定路徑是[OrderQty]時綁定引擎實際監(jiān)聽的是Item[]這個屬性的PropertyChanged事件然后把變更結(jié)果映射到對應索引鍵上。所以只發(fā)OrderQty通知能作用到顯式綁定{Binding OrderQty}的地方但索引器綁定{Binding [OrderQty]}不一定都能收到穩(wěn)妥做法是兩者都發(fā)。實際項目里我還遇到過一個坑如果字典里存的是decimal而綁定的源是double值寫進去再讀出來類型是不一致的。所以DynamicRow的賦值入口我會做一層統(tǒng)一轉(zhuǎn)換public void SetValue(string key, object? value, Type targetType) { if (value ! null targetType ! null) { var converted Convert.ChangeType(value, targetType); this[key] converted; } else { this[key] value; } }這樣列定義里只要聲明類型寫入的值就不會因為數(shù)據(jù)結(jié)構(gòu)混亂導致后端序列化出問題。3. 列定義模型把Columns翻譯成ViewModel能管的數(shù)據(jù)3.1 ColumnMeta列的一切信息都在這里動態(tài)列的源頭是ColumnMeta它是列在ViewModel世界里的化身。我給它的最小定義大致是這樣public enum CellEditorKind { Text, // 文本框 Numeric, // 數(shù)字輸入 ComboBox, // 下拉選擇 DatePicker, // 日期選擇 CheckBox, // 布爾勾選 Button // 命令按鈕 } public class ColumnMeta : ObservableObject { public string BindingPath { get; set; } string.Empty; public string Header { get; set; } string.Empty; public Type DataType { get; set; } typeof(string); public int Width { get; set; } 120; private CellEditorKind _editorKind CellEditorKind.Text; public CellEditorKind EditorKind { get _editorKind; set { if (SetProperty(ref _editorKind, value)) OnPropertyChanged(nameof(Template)); } } public bool IsReadOnly { get; set; } private bool _visible true; public bool Visible { get _visible; set SetProperty(ref _visible, value); } public IEnumerable? Options { get; set; } // ComboBox數(shù)據(jù)源 public ICommand? Command { get; set; } // 按鈕列命令 public string? CommandParameterPath { get; set; } public ObservableCollectionColumnMeta? Children { get; set; } // 表頭分組的進階玩法 }這里我把EditorKind與模板資源隔離ViewModel里面不直接持有一個DataTemplate對象只聲明編輯器類型。UI生成層拿到EditorKind再去查對應的模板資源這樣ViewModel可以不引用任何UI命名空間。3.2 附加屬性讓Columns變得可觀察有了列定義集合后View層需要把它翻譯成DataGrid.Columns。我封裝了一個附加屬性掛在DataGrid上public static class DataGridColumnsBehavior { public static readonly DependencyProperty BindableColumnsProperty DependencyProperty.RegisterAttached( BindableColumns, typeof(ObservableCollectionColumnMeta), typeof(DataGridColumnsBehavior), new PropertyMetadata(null, OnBindableColumnsChanged)); public static void SetBindableColumns(DependencyObject element, ObservableCollectionColumnMeta value) element.SetValue(BindableColumnsProperty, value); public static ObservableCollectionColumnMeta GetBindableColumns(DependencyObject element) (ObservableCollectionColumnMeta)element.GetValue(BindableColumnsProperty); private static void OnBindableColumnsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is not DataGrid grid) return; if (e.OldValue is ObservableCollectionColumnMeta oldList) oldList.CollectionChanged - OnColumnCollectionChanged; if (e.NewValue is ObservableCollectionColumnMeta newList) newList.CollectionChanged OnColumnCollectionChanged; grid.Columns.Clear(); foreach (var meta in (IEnumerableColumnMeta?)e.NewValue ?? Enumerable.EmptyColumnMeta()) { grid.Columns.Add(CreateColumn(meta)); } } private static void OnColumnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e) { // 拿到DataGrid實例根據(jù)e.Action對grid.Columns做增量處理 } }這段代碼的核心思想是ViewModel里維護一個ObservableCollectionColumnMeta所有列的新增、刪除、順序調(diào)整都走集合事件附加屬性負責把變更同步到UI的DataGrid.Columns。有一個關鍵點DataGrid.Columns里每一項是DataGridColumn它們不是普通的輕量對象頻繁整體Clear再重建會導致視覺閃爍、列寬丟失還有可能短暫破壞虛擬化狀態(tài)。所以集合事件里盡量做增量增刪而不是每次都清空重建。3.3 創(chuàng)建DataGridColumn的方法每個ColumnMeta對應一個DataGridTemplateColumn模板根據(jù)EditorKind來選private static DataGridColumn CreateColumn(ColumnMeta meta) { var column new DataGridTemplateColumn { Header meta.Header, Width new DataGridLength(meta.Width), IsReadOnly meta.IsReadOnly }; if (!meta.IsReadOnly) { column.CellTemplate CellTemplateFactory.CreateDisplayTemplate(meta); column.CellEditingTemplate CellTemplateFactory.CreateEditTemplate(meta); } else { column.CellTemplate CellTemplateFactory.CreateDisplayTemplate(meta); } return column; }CellTemplateFactory是一個純UI層的輔助類負責按EditorKind構(gòu)建具體模板。這個工廠放在View層很正常它解決的是把列定義轉(zhuǎn)成UI這個純表現(xiàn)問題。重要提醒DataGridTemplateColumn在非編輯態(tài)默認不加載CellEditingTemplate所以要在展示和編輯之間做不同的樣式這個機制是天然的不要為了編輯樣式去污染CellTemplate。4. 單元格編輯器動態(tài)切換從文本到下拉到日期4.1 顯示模板與編輯模板的分工在DataGrid里CellTemplate負責非編輯狀態(tài)下的呈現(xiàn)一般是一個只讀的TextBlockCellEditingTemplate才是編輯器真正的交互控件在進入編輯模式以后才會被加載。這個分工是我實現(xiàn)動態(tài)編輯器的關鍵顯示模板決定看起來是什么編輯模板決定點進去怎么改。比如Numeric類型的列顯示模板我還是用TextBlock直接展示數(shù)值編輯模板換成帶數(shù)值校驗的TextBoxComboBox類型的列顯示模板是TextBlock顯示當前選中值編輯模板是ComboBox下拉。這樣列在視覺上很干凈編輯體驗又靈活。4.2 動態(tài)構(gòu)造編輯模板我用的方法是代碼動態(tài)構(gòu)造DataTemplate。雖然FrameworkElementFactory在.NET Core 3.0以后進入了維護模式官方更推薦XamlReader或者直接寫XAML模板但在動態(tài)生成、模板結(jié)構(gòu)由枚舉值決定的場景下FrameworkElementFactory仍然是最直接的工具實測在.NET 8的WPF項目里能穩(wěn)定工作。文本編輯器的構(gòu)建public static DataTemplate CreateEditTemplate(ColumnMeta meta) { var textBox new FrameworkElementFactory(typeof(TextBox)); textBox.SetBinding(TextBox.TextProperty, new Binding($[{meta.BindingPath}]) { Mode BindingMode.TwoWay, UpdateSourceTrigger UpdateSourceTrigger.PropertyChanged }); var template new DataTemplate { VisualTree textBox }; template.Seal(); return template; }Numeric可以在需要時給TextBox的PreviewTextInput掛事件但事件掛在工廠上會比較繞。我一般換成在控件里放一個輕量驗證的依賴屬性或者干脆依賴綁定層的類型轉(zhuǎn)換。下拉編輯器public static DataTemplate CreateComboBoxEditTemplate(ColumnMeta meta) { var combo new FrameworkElementFactory(typeof(ComboBox)); combo.SetBinding(ComboBox.SelectedValueProperty, new Binding($[{meta.BindingPath}]) { Mode BindingMode.TwoWay, UpdateSourceTrigger UpdateSourceTrigger.PropertyChanged }); combo.SetBinding(ComboBox.ItemsSourceProperty, new Binding(nameof(ColumnMeta.Options)) { Source meta }); var template new DataTemplate { VisualTree combo }; template.Seal(); return template; }注意這里ItemsSource的Binding把Source指定為ColumnMeta實例本身而不是行數(shù)據(jù)。這保證所有行的下拉列表共享同一個Options集合不受DataContext變化的影響。這也是我前文說的列元數(shù)據(jù)閉包技巧。日期和勾選列同理只是換成DatePicker和CheckBox。4.3 運行時切換編輯器類型如果需求是用戶切換某列類型后編輯器跟著變那ColumnMeta里必須有EditorKind變更的通知然后UI層要處理列模板的替換。在附加屬性的集合事件里對單列的EditorKind變更我建議直接找到DataGrid.Columns里對應的那一列替換它的CellTemplate和CellEditingTemplateprivate static void OnColumnMetaEditorKindChanged(ColumnMeta meta) { if (meta.Tag is DataGridTemplateColumn column) { column.CellTemplate CellTemplateFactory.CreateDisplayTemplate(meta); column.CellEditingTemplate CellTemplateFactory.CreateEditTemplate(meta); column.IsReadOnly meta.IsReadOnly; } }為了讓ColumnMeta能快速定位到UI列可以在創(chuàng)建列時給DataGridTemplateColumn.Tag賦上ColumnMeta實例也可以在字典里維護映射。我習慣用Tag簡單直接但Tag本身是object類型使用時要小心線程訪問。5. 穩(wěn)定性和性能刷新、篩選、大數(shù)據(jù)量的實操復盤5.1 數(shù)據(jù)刷新不閃爍最早我偷懶刷新時直接dataGrid.ItemsSource null; dataGrid.ItemsSource rows;這種寫法在數(shù)據(jù)量小的時候還能忍數(shù)據(jù)量一上來就是明顯的白屏閃爍、滾動位置丟失體驗很差。應改用ICollectionView統(tǒng)一管理public ICollectionView RowsView { get; } RowsView CollectionViewSource.GetDefaultView(Rows); // 刷新時 RowsView.Refresh();如果你的數(shù)據(jù)源是ObservableCollectionDynamicRow且行內(nèi)修改走的是索引器INPC其實多數(shù)情況下不需要全局Refresh。只有篩選條件、排序規(guī)則變化時才需要調(diào)用Refresh。配合ICollectionView的LiveFiltering還能實現(xiàn)動態(tài)篩選但要注意開啟IsLiveFiltering需要數(shù)據(jù)源支持屬性通知DynamicRow已經(jīng)天然支持了。5.2 列集合增量更新OnColumnCollectionChanged里不要梭哈Clear和Addall。增刪列的時候?qū)紻ataGrid.Columns的Index位置做Insert和RemoveAt視覺上幾乎無感。排序變化則用Move方法。這里有一個我踩過的坑DataGridTemplateColumn的引用一旦從Columns里移除再插回去模板和綁定經(jīng)常會丟狀態(tài)尤其是那列正在被編輯時。所以我處理刪除時如果那列正處于編輯態(tài)會先讓DataGrid結(jié)束編輯再刪grid.CommitEdit(DataGridEditingUnit.Cell, true); grid.CancelEdit(DataGridEditingUnit.Row);否則偶爾會拋出指定元素已經(jīng)是另一個元素的邏輯子元素之類的異常排查起來相當費時間。5.3 大數(shù)據(jù)量下的字典性能DynamicRow用Dictionary存儲行數(shù)到十萬級時滾動性能受兩個因素影響。一是每次綁定取值都要查字典但DataGrid在虛擬化模式下只求值可見單元格所以實際開銷可控二是排序和分組的時候CollectionView會頻繁調(diào)用屬性獲取字典查找比實體類字段反射慢不少。經(jīng)驗數(shù)據(jù)十萬行、三十列以內(nèi)普通機器上滾動流暢度還能接受超過這個量級建議把DynamicRow改為編譯后的強類型行或改用表達式樹生成的屬性訪問器。在項目里我一般提供兩層實現(xiàn)小的動態(tài)模型先用字典數(shù)據(jù)量到了預警值再切換成動態(tài)生成的強類型類。5.4 編輯校驗里怎么拿同行其他列動態(tài)行做校驗有個天然難題編輯模板里DataContext雖然是行對象但你無法預知要校驗哪幾個字段。我的做法是提供一個Validate(string column, object? value)方法到DynamicRow上然后用附加行為攔截DataGrid.RowEditEnding或單元格的LostFocus事件。private void OnRowEditEnding(object? sender, DataGridRowEditEndingEventArgs e) { if (e.EditAction ! DataGridEditAction.Commit) return; var row e.Row.DataContext as DynamicRow; if (row null) return; var error row.ValidateAll(); if (!string.IsNullOrEmpty(error)) { e.Cancel true; MessageBox.Show(error); } }這樣校驗邏輯集中在DynamicRow里ViewModel不需要知道UI細節(jié)也符合MVVM的邊界劃分。5.5 虛擬化與Column Span的關系如果用了動態(tài)列又想開啟EnableColumnVirtualization要注意模板列的寬度和凍結(jié)列設置。列寬不固定的時候橫向虛擬化容易計算出錯表現(xiàn)是滾動到后面出現(xiàn)空白列。解決方法是統(tǒng)一給動態(tài)列設置默認寬度或者用DataGridLength.SizeToCells在列數(shù)少的時候使用。列很多且寬度不定時寧可關閉EnableColumnVirtualization?？v向虛擬化穩(wěn)定優(yōu)先。6. 和MVVM框架配合時的邊界控制6.1 DynamicRow繼承ObservableObject如果用CommunityToolkit.Mvvm直接讓DynamicRow繼承ObservableObject索引器里調(diào)用OnPropertyChanged就行。如果用Prism同理也可以繼承BindableBase。我建議不要把動態(tài)行綁定到某個固定框架的內(nèi)部類型上而是自己寫一個極簡的INPC實現(xiàn)避免框架升級帶來的遷移成本。CommunityToolkit.Mvvm的ObservableObject是可繼承的直接繼承即可不必重復造輪子。6.2 代碼后臺不是洪水猛獸MVVM社區(qū)里有一種極端傾向View的代碼后臺一行都不能寫。但DataGrid這種控件列集合本來就是UI層面的東西綁定不了就直接在后臺代碼里做轉(zhuǎn)換是正常且合理的。我在這套方案里附加屬性承載了后臺邏輯但從使用方的角度看XAML里只需要一行DataGrid ItemsSource{Binding RowsView} controls:DataGridColumnsBehavior.BindableColumns{Binding Columns} /業(yè)務代碼完全不用關心DataGrid.Columns怎么生成這就是MVVM的核心價值而不是代碼后臺零行數(shù)。6.3 列配置持久化動態(tài)列還有一個隱藏需求用戶調(diào)好的列寬、順序、顯隱下次打開程序要還原。因為ColumnMeta本身是普通數(shù)據(jù)對象序列化很方便public class ColumnLayoutItem { public string BindingPath { get; set; } public double Width { get; set; } public bool Visible { get; set; } public int DisplayIndex { get; set; } }保存時遍歷Columns集合寫入JSON或XML加載時在ViewModel里重建ColumnMeta集合。這里是真正的MVVM甜點區(qū)因為你不需要去序列化DataGridColumn這種UI對象只需要存純數(shù)據(jù)。我實際項目里還加了一個列配置的右鍵菜單切換Visible屬性DataGrid的列就會即時顯隱這個聯(lián)動也是通過ColumnMeta的PropertyChanged驅(qū)動UI層實現(xiàn)的。6.4 給MVVM框架的命令傳參留個口子動態(tài)列的按鈕列比如每一行的詳情按鈕需要綁定命令命令參數(shù)通常是當前行對象。模板工廠里構(gòu)造按鈕時var button new FrameworkElementFactory(typeof(Button)); button.SetBinding(Button.CommandProperty, new Binding(DataContext.YourCommand) { RelativeSource new RelativeSource(RelativeSourceMode.FindAncestor, typeof(DataGrid), 1) }); button.SetBinding(Button.CommandParameterProperty, new Binding());或者更干凈的方式在ColumnMeta上掛一個Command參數(shù)讓Button綁定ColumnMeta.CommandCommandParameter綁定當前行。綁定源用Sourcemeta即可。這樣按鈕命令也能保持在ViewModel層不會散落到UI事件里。這套方案用下來的一點體會動態(tài)列在最開始看起來是個功能做完整套之后回頭看它其實是數(shù)據(jù)模型與UI生成策略的適配問題。把列這個概念從DataGridColumn抽成ColumnMeta把行從固定實體類改成DynamicRow剩下的事情就是翻譯和同步。我這個方案里用了附加屬性、模板工廠、索引器綁定沒有用到任何黑魔法所有環(huán)節(jié)都可以在調(diào)試器里一步步追蹤。如果你手頭只是幾十行數(shù)據(jù)的臨時報表直接用DataTable亂搞也行省事。但只要摻進編輯器可控、列顯隱可配置、要接后端序列化、要長期維護這幾個詞我建議趁早切到列元數(shù)據(jù)驅(qū)動。前期多寫一個ColumnMeta的代價很低后面省下的補丁時間可不止翻倍。最后再分享一個小技巧所有動態(tài)列模板統(tǒng)一走一個資源字典的靜態(tài)類不要在自己寫的每個頁面里各建一套模板否則后期維護每列樣式時你會想罵人。本文還有配套的精品資源點擊獲取 WPF DataGrid 動態(tài)列實現(xiàn)：MVVM下的動態(tài)綁定與編輯器切換
簡介面向WPF/.NET開發(fā)者的DataGrid動態(tài)列源碼示例核心解決表格列需要在運行時按數(shù)據(jù)模型自動生成的問題。實現(xiàn)思路涵蓋反射讀取屬性生成列、列集合動態(tài)管理、自定義編輯模板、保存取消命令及數(shù)據(jù)驗證等環(huán)節(jié)適合正處于MVVM學習階段、或需要為表格實現(xiàn)動態(tài)列與可編輯單元格的C#桌面開發(fā)者參考。壓縮包共43個文件、約88KB主體為17個C#源碼文件包含視圖模型、動態(tài)列生成類、實體模型及兩個XAML界面另有工程配置、編譯產(chǎn)物和輔助調(diào)試文件三層代碼結(jié)構(gòu)完整且可直接運行。該資源已有2931人學習瀏覽體量小而實用讀者可借助源碼掌握動態(tài)列與編輯模板的綁定寫法、雙向同步與校驗邏輯也可先運行編譯好的程序觀察效果再對照代碼理解能有效縮短WPF下MVVM模式的入門與排錯時間。 做動態(tài)列需求前我一直以為WPF里DataGrid的列綁定是件很順手的事。直到接了一個上位機報表的項目接口返回的字段列表是運行時才確定的列名可能今天叫A明天叫B客戶還要求不同的列用不同的輸入控件數(shù)字列要能輸小數(shù)、狀態(tài)列要下拉選擇、日期列要點出日歷。那會兒才意識到DataGrid的Columns在MVVM里就是一塊硬骨頭它根本不支持從ViewModel直接綁定。這篇文章把我后來沉淀下來的完整方案拆開講包括動態(tài)行模型、列定義模型、動態(tài)列生成、單元格編輯器切換以及在刷屏量級數(shù)據(jù)下踩過的各種坑給同樣被動態(tài)列折磨的人一個可以直接抄作業(yè)的存檔。1. 動態(tài)列到底難在哪DataGrid與MVVM的適配層裂縫1.1 從一次上位機報表需求說起當時的需求其實并不復雜數(shù)據(jù)源來自一個通用查詢接口返回字段清單和行數(shù)據(jù)字段數(shù)量、字段類型、字段順序全部動態(tài)。也就是說ViewModel里不可能寫死一個包含固定屬性集合的實體類也不可能在XAML里預置死若干個DataGridTextColumn。客戶還提了兩個附加要求不同字段要用合適的編輯器輸入文本、數(shù)字、下拉、日期以及列的顯示隱藏希望在運行時通過菜單切換。這兩個要求單獨看不難但疊加上MVVM三個字麻煩就來了。如果你用AutoGenerateColumns DataTable偷懶列確實能自動生成但編輯器完全不可控默認文本綁定、類型轉(zhuǎn)換、下拉列、日期列全都得另想辦法更別提把列顯隱和用戶配置序列化回ViewModel了。1.2 為什么 DataGrid.Columns 不能直接綁定DataGrid.Columns是ObservableCollectionDataGridColumn類型按道理是支持監(jiān)聽的。但問題在于DataGrid內(nèi)部并不會在Columns集合變化時重新生成可見列或者準確說它只監(jiān)聽集合的增刪事件來同步UI可你很難把一個DataGridTextColumn序列化為配置存到數(shù)據(jù)庫也很難把它作為純數(shù)據(jù)對象綁定到ViewModel。更本質(zhì)的問題是DataGridColumn不是依賴對象能直接“用數(shù)據(jù)驅(qū)動”的那種模型。它的Header、Binding等屬性雖然有些是依賴屬性但整個Columns集合是控件內(nèi)部的UI集合不屬于DataContext的數(shù)據(jù)范圍。你要在MVVM里動態(tài)生成列本質(zhì)上是在“數(shù)據(jù)模型”和“控件元素”之間做翻譯這個翻譯層要么寫在View的代碼后臺要么封裝成附加行為。1.3 三個必須拆分的設計層面做完這個項目后我的結(jié)論是動態(tài)列必須拆成三層來看。數(shù)據(jù)源層提供行的數(shù)據(jù)行不再是一個固定實體類而是一個可以按字段名取值的動態(tài)容器。列定義層描述每一列的信息標題、綁定路徑、寬度、類型、編輯器類型、是否只讀、是否可見。UI生成層根據(jù)列定義創(chuàng)建對應的DataGridColumn并處理增刪、顯隱、寬度變化等UI操作。這三層各管各的ViewModel只管前兩層UI生成層用附加屬性或輕量代碼后臺承載。這樣既保住了MVVM的數(shù)據(jù)驅(qū)動優(yōu)勢又不用把UI細節(jié)塞進ViewModel。2. 動態(tài)行的數(shù)據(jù)層設計字典行模型與索引器通知2.1 為什么不用DataTable很多人第一反應是DataTable畢竟它能動態(tài)加列加行配合AutoGenerateColumns也很省事。但DataTable放在MVVM里會有幾個致命問題。第一DataTable的行是DataRowView綁定到DataGrid后類型信息很弱校驗、格式化都得依賴DataTable的列類型配置但列類型又是全局的沒法做到同一個列在不同行有不同的編輯器行為。第二DataTable和ViewModel之間缺一層映射你很難把業(yè)務校驗、命令、按鈕列這些邏輯掛到行對象上。第三DataTable自帶的通知機制在WPF里偶爾會有刷新時機的問題尤其是編輯后立即排序、篩選偶爾會出現(xiàn)值對不上的詭異現(xiàn)象。所以對于中大型項目我更推薦自己做一個“動態(tài)行”容器而不是直接用DataTable。2.2 DynamicRow內(nèi)核字典加索引器加INPC動態(tài)行的核心其實就是一個字典加一個索引器屬性public class DynamicRow : ObservableObject { private readonly Dictionarystring, object? _values new(StringComparer.OrdinalIgnoreCase); public object? this[string key] { get _values.TryGetValue(key, out var v) ? v : null; set { if (_values.TryGetValue(key, out var old) Equals(old, value)) return; _values[key] value; OnPropertyChanged(key); // 通知對應列的綁定刷新 OnPropertyChanged(Item[]); // 兼容集合索引器監(jiān)聽 } } public IReadOnlyDictionarystring, object? Values _values; }這里有一個細節(jié)必須提醒如果只發(fā)OnPropertyChanged(key)在多數(shù)場景下DataGrid的單元格能刷新但如果有人用CollectionViewSource對動態(tài)行做了分組或排序或者綁定了ItemsSource的路徑索引就必須額外發(fā)一個Item[]通知否則部分場景刷新不到。2.3 索引器通知觸發(fā)機制的原理為什么CollectionView會監(jiān)聽Item[]這種偽屬性名因為WPF的綁定引擎把this[string key]這類索引器當成一個名為Item[]的屬性來看待。當綁定路徑是[OrderQty]時綁定引擎實際監(jiān)聽的是Item[]這個屬性的PropertyChanged事件然后把變更結(jié)果映射到對應索引鍵上。所以只發(fā)OrderQty通知能作用到顯式綁定{Binding OrderQty}的地方但索引器綁定{Binding [OrderQty]}不一定都能收到穩(wěn)妥做法是兩者都發(fā)。實際項目里我還遇到過一個坑如果字典里存的是decimal而綁定的源是double值寫進去再讀出來類型是不一致的。所以DynamicRow的賦值入口我會做一層統(tǒng)一轉(zhuǎn)換public void SetValue(string key, object? value, Type targetType) { if (value ! null targetType ! null) { var converted Convert.ChangeType(value, targetType); this[key] converted; } else { this[key] value; } }這樣列定義里只要聲明類型寫入的值就不會因為數(shù)據(jù)結(jié)構(gòu)混亂導致后端序列化出問題。3. 列定義模型把Columns翻譯成ViewModel能管的數(shù)據(jù)3.1 ColumnMeta列的一切信息都在這里動態(tài)列的源頭是ColumnMeta它是列在ViewModel世界里的化身。我給它的最小定義大致是這樣public enum CellEditorKind { Text, // 文本框 Numeric, // 數(shù)字輸入 ComboBox, // 下拉選擇 DatePicker, // 日期選擇 CheckBox, // 布爾勾選 Button // 命令按鈕 } public class ColumnMeta : ObservableObject { public string BindingPath { get; set; } string.Empty; public string Header { get; set; } string.Empty; public Type DataType { get; set; } typeof(string); public int Width { get; set; } 120; private CellEditorKind _editorKind CellEditorKind.Text; public CellEditorKind EditorKind { get _editorKind; set { if (SetProperty(ref _editorKind, value)) OnPropertyChanged(nameof(Template)); } } public bool IsReadOnly { get; set; } private bool _visible true; public bool Visible { get _visible; set SetProperty(ref _visible, value); } public IEnumerable? Options { get; set; } // ComboBox數(shù)據(jù)源 public ICommand? Command { get; set; } // 按鈕列命令 public string? CommandParameterPath { get; set; } public ObservableCollectionColumnMeta? Children { get; set; } // 表頭分組的進階玩法 }這里我把EditorKind與模板資源隔離ViewModel里面不直接持有一個DataTemplate對象只聲明編輯器類型。UI生成層拿到EditorKind再去查對應的模板資源這樣ViewModel可以不引用任何UI命名空間。3.2 附加屬性讓Columns變得可觀察有了列定義集合后View層需要把它翻譯成DataGrid.Columns。我封裝了一個附加屬性掛在DataGrid上public static class DataGridColumnsBehavior { public static readonly DependencyProperty BindableColumnsProperty DependencyProperty.RegisterAttached( BindableColumns, typeof(ObservableCollectionColumnMeta), typeof(DataGridColumnsBehavior), new PropertyMetadata(null, OnBindableColumnsChanged)); public static void SetBindableColumns(DependencyObject element, ObservableCollectionColumnMeta value) element.SetValue(BindableColumnsProperty, value); public static ObservableCollectionColumnMeta GetBindableColumns(DependencyObject element) (ObservableCollectionColumnMeta)element.GetValue(BindableColumnsProperty); private static void OnBindableColumnsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is not DataGrid grid) return; if (e.OldValue is ObservableCollectionColumnMeta oldList) oldList.CollectionChanged - OnColumnCollectionChanged; if (e.NewValue is ObservableCollectionColumnMeta newList) newList.CollectionChanged OnColumnCollectionChanged; grid.Columns.Clear(); foreach (var meta in (IEnumerableColumnMeta?)e.NewValue ?? Enumerable.EmptyColumnMeta()) { grid.Columns.Add(CreateColumn(meta)); } } private static void OnColumnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e) { // 拿到DataGrid實例根據(jù)e.Action對grid.Columns做增量處理 } }這段代碼的核心思想是ViewModel里維護一個ObservableCollectionColumnMeta所有列的新增、刪除、順序調(diào)整都走集合事件附加屬性負責把變更同步到UI的DataGrid.Columns。有一個關鍵點DataGrid.Columns里每一項是DataGridColumn它們不是普通的輕量對象頻繁整體Clear再重建會導致視覺閃爍、列寬丟失還有可能短暫破壞虛擬化狀態(tài)。所以集合事件里盡量做增量增刪而不是每次都清空重建。3.3 創(chuàng)建DataGridColumn的方法每個ColumnMeta對應一個DataGridTemplateColumn模板根據(jù)EditorKind來選private static DataGridColumn CreateColumn(ColumnMeta meta) { var column new DataGridTemplateColumn { Header meta.Header, Width new DataGridLength(meta.Width), IsReadOnly meta.IsReadOnly }; if (!meta.IsReadOnly) { column.CellTemplate CellTemplateFactory.CreateDisplayTemplate(meta); column.CellEditingTemplate CellTemplateFactory.CreateEditTemplate(meta); } else { column.CellTemplate CellTemplateFactory.CreateDisplayTemplate(meta); } return column; }CellTemplateFactory是一個純UI層的輔助類負責按EditorKind構(gòu)建具體模板。這個工廠放在View層很正常它解決的是把列定義轉(zhuǎn)成UI這個純表現(xiàn)問題。重要提醒DataGridTemplateColumn在非編輯態(tài)默認不加載CellEditingTemplate所以要在展示和編輯之間做不同的樣式這個機制是天然的不要為了編輯樣式去污染CellTemplate。4. 單元格編輯器動態(tài)切換從文本到下拉到日期4.1 顯示模板與編輯模板的分工在DataGrid里CellTemplate負責非編輯狀態(tài)下的呈現(xiàn)一般是一個只讀的TextBlockCellEditingTemplate才是編輯器真正的交互控件在進入編輯模式以后才會被加載。這個分工是我實現(xiàn)動態(tài)編輯器的關鍵顯示模板決定看起來是什么編輯模板決定點進去怎么改。比如Numeric類型的列顯示模板我還是用TextBlock直接展示數(shù)值編輯模板換成帶數(shù)值校驗的TextBoxComboBox類型的列顯示模板是TextBlock顯示當前選中值編輯模板是ComboBox下拉。這樣列在視覺上很干凈編輯體驗又靈活。4.2 動態(tài)構(gòu)造編輯模板我用的方法是代碼動態(tài)構(gòu)造DataTemplate。雖然FrameworkElementFactory在.NET Core 3.0以后進入了維護模式官方更推薦XamlReader或者直接寫XAML模板但在動態(tài)生成、模板結(jié)構(gòu)由枚舉值決定的場景下FrameworkElementFactory仍然是最直接的工具實測在.NET 8的WPF項目里能穩(wěn)定工作。文本編輯器的構(gòu)建public static DataTemplate CreateEditTemplate(ColumnMeta meta) { var textBox new FrameworkElementFactory(typeof(TextBox)); textBox.SetBinding(TextBox.TextProperty, new Binding($[{meta.BindingPath}]) { Mode BindingMode.TwoWay, UpdateSourceTrigger UpdateSourceTrigger.PropertyChanged }); var template new DataTemplate { VisualTree textBox }; template.Seal(); return template; }Numeric可以在需要時給TextBox的PreviewTextInput掛事件但事件掛在工廠上會比較繞。我一般換成在控件里放一個輕量驗證的依賴屬性或者干脆依賴綁定層的類型轉(zhuǎn)換。下拉編輯器public static DataTemplate CreateComboBoxEditTemplate(ColumnMeta meta) { var combo new FrameworkElementFactory(typeof(ComboBox)); combo.SetBinding(ComboBox.SelectedValueProperty, new Binding($[{meta.BindingPath}]) { Mode BindingMode.TwoWay, UpdateSourceTrigger UpdateSourceTrigger.PropertyChanged }); combo.SetBinding(ComboBox.ItemsSourceProperty, new Binding(nameof(ColumnMeta.Options)) { Source meta }); var template new DataTemplate { VisualTree combo }; template.Seal(); return template; }注意這里ItemsSource的Binding把Source指定為ColumnMeta實例本身而不是行數(shù)據(jù)。這保證所有行的下拉列表共享同一個Options集合不受DataContext變化的影響。這也是我前文說的列元數(shù)據(jù)閉包技巧。日期和勾選列同理只是換成DatePicker和CheckBox。4.3 運行時切換編輯器類型如果需求是用戶切換某列類型后編輯器跟著變那ColumnMeta里必須有EditorKind變更的通知然后UI層要處理列模板的替換。在附加屬性的集合事件里對單列的EditorKind變更我建議直接找到DataGrid.Columns里對應的那一列替換它的CellTemplate和CellEditingTemplateprivate static void OnColumnMetaEditorKindChanged(ColumnMeta meta) { if (meta.Tag is DataGridTemplateColumn column) { column.CellTemplate CellTemplateFactory.CreateDisplayTemplate(meta); column.CellEditingTemplate CellTemplateFactory.CreateEditTemplate(meta); column.IsReadOnly meta.IsReadOnly; } }為了讓ColumnMeta能快速定位到UI列可以在創(chuàng)建列時給DataGridTemplateColumn.Tag賦上ColumnMeta實例也可以在字典里維護映射。我習慣用Tag簡單直接但Tag本身是object類型使用時要小心線程訪問。5. 穩(wěn)定性和性能刷新、篩選、大數(shù)據(jù)量的實操復盤5.1 數(shù)據(jù)刷新不閃爍最早我偷懶刷新時直接dataGrid.ItemsSource null; dataGrid.ItemsSource rows;這種寫法在數(shù)據(jù)量小的時候還能忍數(shù)據(jù)量一上來就是明顯的白屏閃爍、滾動位置丟失體驗很差。應改用ICollectionView統(tǒng)一管理public ICollectionView RowsView { get; } RowsView CollectionViewSource.GetDefaultView(Rows); // 刷新時 RowsView.Refresh();如果你的數(shù)據(jù)源是ObservableCollectionDynamicRow且行內(nèi)修改走的是索引器INPC其實多數(shù)情況下不需要全局Refresh。只有篩選條件、排序規(guī)則變化時才需要調(diào)用Refresh。配合ICollectionView的LiveFiltering還能實現(xiàn)動態(tài)篩選但要注意開啟IsLiveFiltering需要數(shù)據(jù)源支持屬性通知DynamicRow已經(jīng)天然支持了。5.2 列集合增量更新OnColumnCollectionChanged里不要梭哈Clear和Addall。增刪列的時候?qū)紻ataGrid.Columns的Index位置做Insert和RemoveAt視覺上幾乎無感。排序變化則用Move方法。這里有一個我踩過的坑DataGridTemplateColumn的引用一旦從Columns里移除再插回去模板和綁定經(jīng)常會丟狀態(tài)尤其是那列正在被編輯時。所以我處理刪除時如果那列正處于編輯態(tài)會先讓DataGrid結(jié)束編輯再刪grid.CommitEdit(DataGridEditingUnit.Cell, true); grid.CancelEdit(DataGridEditingUnit.Row);否則偶爾會拋出指定元素已經(jīng)是另一個元素的邏輯子元素之類的異常排查起來相當費時間。5.3 大數(shù)據(jù)量下的字典性能DynamicRow用Dictionary存儲行數(shù)到十萬級時滾動性能受兩個因素影響。一是每次綁定取值都要查字典但DataGrid在虛擬化模式下只求值可見單元格所以實際開銷可控二是排序和分組的時候CollectionView會頻繁調(diào)用屬性獲取字典查找比實體類字段反射慢不少。經(jīng)驗數(shù)據(jù)十萬行、三十列以內(nèi)普通機器上滾動流暢度還能接受超過這個量級建議把DynamicRow改為編譯后的強類型行或改用表達式樹生成的屬性訪問器。在項目里我一般提供兩層實現(xiàn)小的動態(tài)模型先用字典數(shù)據(jù)量到了預警值再切換成動態(tài)生成的強類型類。5.4 編輯校驗里怎么拿同行其他列動態(tài)行做校驗有個天然難題編輯模板里DataContext雖然是行對象但你無法預知要校驗哪幾個字段。我的做法是提供一個Validate(string column, object? value)方法到DynamicRow上然后用附加行為攔截DataGrid.RowEditEnding或單元格的LostFocus事件。private void OnRowEditEnding(object? sender, DataGridRowEditEndingEventArgs e) { if (e.EditAction ! DataGridEditAction.Commit) return; var row e.Row.DataContext as DynamicRow; if (row null) return; var error row.ValidateAll(); if (!string.IsNullOrEmpty(error)) { e.Cancel true; MessageBox.Show(error); } }這樣校驗邏輯集中在DynamicRow里ViewModel不需要知道UI細節(jié)也符合MVVM的邊界劃分。5.5 虛擬化與Column Span的關系如果用了動態(tài)列又想開啟EnableColumnVirtualization要注意模板列的寬度和凍結(jié)列設置。列寬不固定的時候橫向虛擬化容易計算出錯表現(xiàn)是滾動到后面出現(xiàn)空白列。解決方法是統(tǒng)一給動態(tài)列設置默認寬度或者用DataGridLength.SizeToCells在列數(shù)少的時候使用。列很多且寬度不定時寧可關閉EnableColumnVirtualization?？v向虛擬化穩(wěn)定優(yōu)先。6. 和MVVM框架配合時的邊界控制6.1 DynamicRow繼承ObservableObject如果用CommunityToolkit.Mvvm直接讓DynamicRow繼承ObservableObject索引器里調(diào)用OnPropertyChanged就行。如果用Prism同理也可以繼承BindableBase。我建議不要把動態(tài)行綁定到某個固定框架的內(nèi)部類型上而是自己寫一個極簡的INPC實現(xiàn)避免框架升級帶來的遷移成本。CommunityToolkit.Mvvm的ObservableObject是可繼承的直接繼承即可不必重復造輪子。6.2 代碼后臺不是洪水猛獸MVVM社區(qū)里有一種極端傾向View的代碼后臺一行都不能寫。但DataGrid這種控件列集合本來就是UI層面的東西綁定不了就直接在后臺代碼里做轉(zhuǎn)換是正常且合理的。我在這套方案里附加屬性承載了后臺邏輯但從使用方的角度看XAML里只需要一行DataGrid ItemsSource{Binding RowsView} controls:DataGridColumnsBehavior.BindableColumns{Binding Columns} /業(yè)務代碼完全不用關心DataGrid.Columns怎么生成這就是MVVM的核心價值而不是代碼后臺零行數(shù)。6.3 列配置持久化動態(tài)列還有一個隱藏需求用戶調(diào)好的列寬、順序、顯隱下次打開程序要還原。因為ColumnMeta本身是普通數(shù)據(jù)對象序列化很方便public class ColumnLayoutItem { public string BindingPath { get; set; } public double Width { get; set; } public bool Visible { get; set; } public int DisplayIndex { get; set; } }保存時遍歷Columns集合寫入JSON或XML加載時在ViewModel里重建ColumnMeta集合。這里是真正的MVVM甜點區(qū)因為你不需要去序列化DataGridColumn這種UI對象只需要存純數(shù)據(jù)。我實際項目里還加了一個列配置的右鍵菜單切換Visible屬性DataGrid的列就會即時顯隱這個聯(lián)動也是通過ColumnMeta的PropertyChanged驅(qū)動UI層實現(xiàn)的。6.4 給MVVM框架的命令傳參留個口子動態(tài)列的按鈕列比如每一行的詳情按鈕需要綁定命令命令參數(shù)通常是當前行對象。模板工廠里構(gòu)造按鈕時var button new FrameworkElementFactory(typeof(Button)); button.SetBinding(Button.CommandProperty, new Binding(DataContext.YourCommand) { RelativeSource new RelativeSource(RelativeSourceMode.FindAncestor, typeof(DataGrid), 1) }); button.SetBinding(Button.CommandParameterProperty, new Binding());或者更干凈的方式在ColumnMeta上掛一個Command參數(shù)讓Button綁定ColumnMeta.CommandCommandParameter綁定當前行。綁定源用Sourcemeta即可。這樣按鈕命令也能保持在ViewModel層不會散落到UI事件里。這套方案用下來的一點體會動態(tài)列在最開始看起來是個功能做完整套之后回頭看它其實是數(shù)據(jù)模型與UI生成策略的適配問題。把列這個概念從DataGridColumn抽成ColumnMeta把行從固定實體類改成DynamicRow剩下的事情就是翻譯和同步。我這個方案里用了附加屬性、模板工廠、索引器綁定沒有用到任何黑魔法所有環(huán)節(jié)都可以在調(diào)試器里一步步追蹤。如果你手頭只是幾十行數(shù)據(jù)的臨時報表直接用DataTable亂搞也行省事。但只要摻進編輯器可控、列顯隱可配置、要接后端序列化、要長期維護這幾個詞我建議趁早切到列元數(shù)據(jù)驅(qū)動。前期多寫一個ColumnMeta的代價很低后面省下的補丁時間可不止翻倍。最后再分享一個小技巧所有動態(tài)列模板統(tǒng)一走一個資源字典的靜態(tài)類不要在自己寫的每個頁面里各建一套模板否則后期維護每列樣式時你會想罵人。本文還有配套的精品資源點擊獲取