WinUI3进阶：DataGrid控件的自定义列与数据绑定实战

1. WinUI3 DataGrid控件基础回顾DataGrid作为WinUI3中最常用的数据展示控件之一在企业管理、数据分析等场景中扮演着重要角色。记得我第一次在项目中使用DataGrid时被它强大的功能惊艳到了——不仅能自动生成列还能直接编辑单元格内容这比传统的ListView控件方便太多了。要使用DataGrid首先需要通过NuGet安装社区工具包。在Visual Studio的包管理器控制台中输入以下命令Install-Package CommunityToolkit.WinUI.UI.Controls.DataGrid安装完成后在XAML文件中添加命名空间引用xmlns:controlsusing:CommunityToolkit.WinUI.UI.Controls然后就可以像这样定义一个基础的DataGridcontrols:DataGrid x:NamedataGrid Height600 Margin12 AutoGenerateColumnsTrue GridLinesVisibilityAll/这里有几个关键属性需要注意AutoGenerateColumns设为True时会根据数据源自动生成列GridLinesVisibility控制网格线显示All/None/Horizontal/VerticalCanUserSortColumns是否允许用户点击列头排序CanUserResizeColumns是否允许调整列宽2. 自定义列样式实战2.1 手动定义列类型当AutoGenerateColumns设为False时我们需要手动定义每一列。DataGrid支持多种列类型controls:DataGrid.Columns !-- 文本列 -- controls:DataGridTextColumn Header姓名 Binding{Binding Name} Width*/ !-- 数字列 -- controls:DataGridTextColumn Header年龄 Binding{Binding Age} ElementStyle{StaticResource RightAlignStyle}/ !-- 复选框列 -- controls:DataGridCheckBoxColumn Header在职 Binding{Binding IsActive}/ !-- 模板列自定义内容 -- controls:DataGridTemplateColumn Header操作 controls:DataGridTemplateColumn.CellTemplate DataTemplate Button Content详情 ClickDetailButton_Click/ /DataTemplate /controls:DataGridTemplateColumn.CellTemplate /controls:DataGridTemplateColumn /controls:DataGrid.Columns2.2 列样式自定义技巧要让DataGrid看起来更专业可以自定义列样式。比如实现交替行颜色效果controls:DataGrid.RowStyle Style TargetTypecontrols:DataGridRow Setter PropertyBackground ValueTransparent/ Setter PropertyTemplate Setter.Value ControlTemplate TargetTypecontrols:DataGridRow Grid Background{Binding RelativeSource{RelativeSource TemplatedParent}, PathIndex, Converter{StaticResource AlternatingRowConverter}} ContentPresenter/ /Grid /ControlTemplate /Setter.Value /Setter /Style /controls:DataGrid.RowStyle对应的转换器代码public class AlternatingRowConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return (int)value % 2 0 ? new SolidColorBrush(Colors.LightGray) : new SolidColorBrush(Colors.White); } }3. 高级数据绑定技术3.1 动态数据源绑定DataGrid最强大的功能之一就是支持动态数据绑定。我们可以绑定到实现了INotifyPropertyChanged接口的集合public class Employee : INotifyPropertyChanged { private string _name; public string Name { get _name; set { _name value; OnPropertyChanged(); } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } // 在ViewModel中 public ObservableCollectionEmployee Employees { get; } new();然后在XAML中绑定controls:DataGrid ItemsSource{x:Bind ViewModel.Employees, ModeOneWay}/3.2 分组与排序DataGrid内置了对数据分组和排序的支持。要实现分组功能// 创建分组集合视图 var groupedView new CollectionViewSource { Source Employees, IsSourceGrouped true }; // 设置分组描述 groupedView.GroupDescriptions.Add(new PropertyGroupDescription(Department)); // 绑定到DataGrid dataGrid.ItemsSource groupedView.View;要让用户可以通过点击列头排序只需设置dataGrid.CanUserSortColumns true;4. 性能优化与实战技巧4.1 虚拟化技术处理大量数据时开启UI虚拟化可以显著提升性能controls:DataGrid EnableRowVirtualizationTrue EnableColumnVirtualizationTrue/4.2 分页加载对于超大数据集建议实现分页加载private int _currentPage 1; private const int PageSize 50; private void LoadNextPage() { var nextPageData dataService.GetEmployees(_currentPage, PageSize); foreach(var item in nextPageData) { Employees.Add(item); } _currentPage; }4.3 常见问题解决在实际项目中我遇到过几个典型问题列宽异常设置Width*的列有时会消失。解决方案是明确设置MinWidthcontrols:DataGridTextColumn Header备注 Binding{Binding Notes} Width* MinWidth120/编辑验证实现IDataErrorInfo接口来验证单元格输入public class Employee : IDataErrorInfo { public string this[string columnName] { get { if (columnName Age Age 18) return 年龄不能小于18岁; return null; } } public string Error null; }样式穿透有时自定义样式不生效这是因为DataGrid内部有复杂的样式继承机制。解决方法是在App.xaml中定义全局样式Style TargetTypecontrols:DataGridCell Setter PropertyPadding Value8/ Setter PropertyFontSize Value14/ /Style5. 企业级应用案例5.1 主从表实现在企业系统中经常需要实现主从表联动效果。下面是一个典型实现Grid Grid.RowDefinitions RowDefinition Height*/ RowDefinition Height2*/ /Grid.RowDefinitions !-- 主表 -- controls:DataGrid x:NamemasterGrid ItemsSource{Binding Departments} SelectedItem{Binding SelectedDepartment, ModeTwoWay}/ !-- 从表 -- controls:DataGrid Grid.Row1 ItemsSource{Binding SelectedDepartment.Employees}/ /Grid5.2 导出Excel功能很多企业需要将表格数据导出到Excel。可以使用ClosedXML库实现private void ExportToExcel() { using var workbook new XLWorkbook(); var worksheet workbook.Worksheets.Add(员工数据); // 添加表头 for (int i 0; i dataGrid.Columns.Count; i) { worksheet.Cell(1, i 1).Value dataGrid.Columns[i].Header; } // 添加数据 for (int row 0; row dataGrid.Items.Count; row) { for (int col 0; col dataGrid.Columns.Count; col) { var cellValue ((TextBlock)dataGrid.Columns[col].GetCellContent(dataGrid.Items[row])).Text; worksheet.Cell(row 2, col 1).Value cellValue; } } // 保存文件 var savePicker new FileSavePicker(); savePicker.SuggestedFileName 员工数据; savePicker.FileTypeChoices.Add(Excel文件, new Liststring { .xlsx }); var file await savePicker.PickSaveFileAsync(); if (file ! null) { using var stream await file.OpenStreamForWriteAsync(); workbook.SaveAs(stream); } }6. 最佳实践与性能调优经过多个项目的实践我总结出以下最佳实践数据绑定优化对于静态数据使用x:Bind代替Binding提升性能对于大型数据集考虑使用ItemsSource的增量加载UI线程优化数据加载放在后台线程使用Dispatcher.BeginInvoke更新UITask.Run(() { var data GetLargeDataSet(); DispatcherQueue.TryEnqueue(() { dataGrid.ItemsSource data; }); });内存管理及时清理不再使用的DataGrid实例对于动态生成的列注意解除事件绑定可访问性设置AutomationProperties确保键盘导航正常工作controls:DataGrid AutomationProperties.Name员工数据表 IsTabStopTrue TabNavigationCycle/主题适配响应系统主题变化提供自定义主题支持public sealed partial class MainWindow : Window { public MainWindow() { this.InitializeComponent(); // 监听主题变化 this.ActualThemeChanged (s, e) { UpdateDataGridTheme(); }; } private void UpdateDataGridTheme() { if (ActualTheme ElementTheme.Dark) { dataGrid.Background new SolidColorBrush(Colors.Black); } else { dataGrid.Background new SolidColorBrush(Colors.White); } } }