★ FEATURED ARTICLE 简介这是一份面向WPF开发者的轻量级DataGrid分页实现方案针对项目中只需分页、无需排序与编辑等复杂交互的场景而设计。作者通过绑定方式自制简易分页逻辑不改动DataGrid原有样式与事件最大限度保留复用与二次定制空间适合具备一定C#与XAML基础、希望快速为列表控件接入分页能力的开发者参考。压缩包共12个文件约7KB包含6个cs源码、2个xaml界面文件以及csproj、settings、resx、config等工程配置与资源文件结构完整可直接编译运行。目前已有1842人学习下载。资源核心价值在于提供一套可拆解的分页模型与页面绑定示例读者可据此理解分页数据源与界面联动的实现思路并将其迁移到自己的WPF项目中减少重复造轮子的时间成本。1. WPF DataGrid 分页为什么你的表格一卡用户就想关窗口WPF DataGrid Paging 分页这件事表面看是给表格加个页码条实际做起来才发现它牵扯的是数据加载策略、UI 虚拟化和内存占用的三角关系。我见过太多项目DataGrid 直接绑一个几千行的 ObservableCollection刚开始跑得挺欢数据涨到两三万行之后滚动条拖一下卡半秒排序点一下等三秒用户嘴上不说手上已经开始找替代方案了。分页不是把数据切一刀就完事它决定了你的应用是「能用」还是「好用」。这篇文章面向的是正在用 WPF 做桌面端管理系统的开发者不管你是在维护一个老项目还是从零搭一个新框架只要 DataGrid 的数据量会持续增长分页就是绕不过去的坎。我会从选型讲到实现从内存分页讲到数据库分页再把踩过的坑一个个翻出来。读完你至少能判断当前项目该用哪种分页策略代码怎么写参数怎么调以及哪些做法看着能跑但迟早翻车。2. 分页策略选型内存分页、数据库分页和混合方案怎么挑2.1 三种分页策略的适用边界在动手写代码之前先想清楚数据从哪来、总量有多大、用户怎么用。这三点决定了你该选哪种分页方式。内存分页是最容易实现的一次性把全部数据读到内存里用 CollectionView 或 LINQ Skip/Take 做切片。优点是翻页零延迟排序和筛选都在本地完成不依赖数据库。缺点是数据量一上来内存就扛不住而且首次加载慢。我一般把内存分页的阈值定在五千行以内超过这个数就得考虑别的方案。数据库分页是每次翻页都去数据库取当前页的数据用 SQL 的 OFFSET/FETCH 或者 ROW_NUMBER() 实现。优点是内存占用恒定不管总量多少页每次只拿一页的数据。缺点是翻页有网络往返延迟而且排序筛选必须传到数据库端执行。适合数据量大、对实时性要求不极端的场景。混合方案是折中做法首次加载时缓存前若干页的数据用户翻到缓存范围之外再去数据库取。这样前几页翻得快后面的页也不会把内存撑爆。实现复杂度比前两种高但在实际项目里往往是最舒服的选择。策略适用数据量首次加载翻页延迟内存占用实现难度内存分页小于 5000 行慢无高低数据库分页大于 10000 行快有网络延迟低中混合方案5000 到 50000 行中等前几页无延迟中等高2.2 用 CollectionView 做内存分页的最小实现如果你的数据量在可控范围内CollectionView 是最省事的做法。它自带排序、筛选和分组能力分页只需要在它上面再包一层。// ViewModel 中的分页逻辑 public class MainViewModel : INotifyPropertyChanged { private ListOrderItem _allItems; // 全量数据 private ICollectionView _pagedView; // 分页后的视图 private int _pageSize 50; // 每页条数 private int _currentPage 1; // 当前页码 public ICollectionView PagedView { get _pagedView; private set { _pagedView value; OnPropertyChanged(); } } public int TotalPages (int)Math.Ceiling((double)_allItems.Count / _pageSize); public void LoadData(ListOrderItem items) { _allItems items; _currentPage 1; ApplyPaging(); } private void ApplyPaging() { // 用 CollectionViewSource 创建视图 var view CollectionViewSource.GetDefaultView(_allItems); // 筛选出当前页的数据 view.Filter item { int index _allItems.IndexOf((OrderItem)item); int start (_currentPage - 1) * _pageSize; return index start index start _pageSize; }; PagedView view; OnPropertyChanged(nameof(TotalPages)); } public void GoToPage(int page) { if (page 1 || page TotalPages) return; _currentPage page; ApplyPaging(); } }这段代码的核心思路是用ICollectionView.Filter做切片。_pageSize控制每页条数_currentPage控制当前页ApplyPaging每次重新设置 Filter 并刷新视图。注意_allItems.IndexOf在数据量大时是 O(n) 操作五千行以内可以接受再大就得换成带索引的数据结构或者直接用 Skip/Take 重建集合。XAML 侧的绑定很直接DataGrid ItemsSource{Binding PagedView} AutoGenerateColumnsFalse CanUserAddRowsFalse IsReadOnlyTrue DataGrid.Columns DataGridTextColumn Header订单号 Binding{Binding OrderId} Width120/ DataGridTextColumn Header客户 Binding{Binding CustomerName} Width150/ DataGridTextColumn Header金额 Binding{Binding Amount, StringFormatC2} Width100/ DataGridTextColumn Header状态 Binding{Binding Status} Width80/ /DataGrid.Columns /DataGridCanUserAddRowsFalse这行必须加否则 DataGrid 底部会多出一行空白编辑行分页时看着很别扭。IsReadOnlyTrue在纯展示场景下能减少不必要的编辑状态开销。2.3 数据库分页的 SQL 与参数传递当数据量超过内存分页的舒适区就得把分页逻辑推到数据库端。以 SQL Server 为例OFFSET/FETCH 是最直观的写法-- 每页 50 条取第 3 页 SELECT OrderId, CustomerName, Amount, Status, CreatedAt FROM Orders WHERE Status Status -- 筛选条件下推 ORDER BY CreatedAt DESC -- 排序必须和前端一致 OFFSET (PageIndex - 1) * PageSize ROWS FETCH NEXT PageSize ROWS ONLY;这里有几个参数必须前后端对齐PageIndex从 1 开始PageSize是每页条数Status是筛选条件。排序字段CreatedAt DESC必须和前端 DataGrid 的默认排序一致否则翻页时数据顺序会跳来跳去用户看着像 bug。对应的 C# 调用层public async TaskPagedResultOrderItem GetOrdersAsync( int pageIndex, int pageSize, string status) { using var conn new SqlConnection(_connectionString); var sql SELECT COUNT(*) FROM Orders WHERE Status Status; SELECT OrderId, CustomerName, Amount, Status, CreatedAt FROM Orders WHERE Status Status ORDER BY CreatedAt DESC OFFSET (PageIndex - 1) * PageSize ROWS FETCH NEXT PageSize ROWS ONLY;; using var cmd new SqlCommand(sql, conn); cmd.Parameters.AddWithValue(Status, status); cmd.Parameters.AddWithValue(PageIndex, pageIndex); cmd.Parameters.AddWithValue(PageSize, pageSize); await conn.OpenAsync(); using var reader await cmd.ExecuteReaderAsync(); // 第一个结果集是总数 await reader.ReadAsync(); int totalCount reader.GetInt32(0); await reader.NextResultAsync(); // 第二个结果集是当前页数据 var items new ListOrderItem(); while (await reader.ReadAsync()) { items.Add(new OrderItem { OrderId reader.GetInt32(0), CustomerName reader.GetString(1), Amount reader.GetDecimal(2), Status reader.GetString(3), CreatedAt reader.GetDateTime(4) }); } return new PagedResultOrderItem { Items items, TotalCount totalCount, PageIndex pageIndex, PageSize pageSize }; }一次往返拿两个结果集总数和当前页数据。PagedResultT是个简单包装类把 Items、TotalCount、PageIndex、PageSize 一起返回给 ViewModel。这样前端拿到数据后直接更新 DataGrid 的 ItemsSource 和页码控件的总页数不需要额外再查一次总数。注意OFFSET/FETCH 在数据量极大时比如百万级性能会下降因为数据库仍然需要扫描前 N 行。如果遇到这种情况考虑用键集分页Keyset Pagination也就是用上一页最后一条记录的排序字段值作为下一页的起点条件。3. 分页控件与 DataGrid 的联动页码条、跳转和状态保持3.1 分页控件的 ViewModel 设计分页控件本身不复杂但要把状态管理清楚。我一般把分页状态单独抽一个类避免和业务 ViewModel 混在一起。public class PaginationState : INotifyPropertyChanged { private int _currentPage 1; private int _pageSize 50; private int _totalCount; public int CurrentPage { get _currentPage; set { if (value 1 || value TotalPages) return; _currentPage value; OnPropertyChanged(); OnPropertyChanged(nameof(CanGoPrevious)); OnPropertyChanged(nameof(CanGoNext)); } } public int PageSize { get _pageSize; set { _pageSize value; OnPropertyChanged(); OnPropertyChanged(nameof(TotalPages)); } } public int TotalCount { get _totalCount; set { _totalCount value; OnPropertyChanged(); OnPropertyChanged(nameof(TotalPages)); } } public int TotalPages (int)Math.Ceiling((double)TotalCount / PageSize); public bool CanGoPrevious CurrentPage 1; public bool CanGoNext CurrentPage TotalPages; public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged([CallerMemberName] string name null) PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); }CurrentPage的 setter 里做了边界检查防止页码越界。CanGoPrevious和CanGoNext是给按钮的 IsEnabled 用的这样第一页时「上一页」按钮自动置灰最后一页时「下一页」按钮置灰用户一眼就知道边界在哪。3.2 翻页时的数据加载与 UI 刷新翻页动作触发后要做三件事更新 CurrentPage、异步加载数据、刷新 DataGrid。顺序很重要先更新页码再加载数据否则用户看到的是旧页码配新数据。public async Task GoToPageAsync(int page) { if (page 1 || page Pagination.TotalPages) return; Pagination.CurrentPage page; // 显示加载状态 IsLoading true; try { var result await _orderService.GetOrdersAsync( page, Pagination.PageSize, _currentFilter); // 更新 DataGrid 数据源 Orders.Clear(); foreach (var item in result.Items) Orders.Add(item); Pagination.TotalCount result.TotalCount; } finally { IsLoading false; } }IsLoading绑定到一个进度条或遮罩层让用户知道数据在加载。Orders是绑定到 DataGrid 的 ObservableCollection用 Clear Add 的方式更新而不是直接替换引用这样 DataGrid 的滚动位置和选中状态会重置符合翻页的预期行为。3.3 排序和筛选与分页的配合排序和筛选是分页最容易出问题的地方。用户在第三页点了「按金额排序」你如果只对当前页的 50 条排序那结果就是错的。正确做法是把排序字段和方向传到数据库端重新从第一页开始查。private string _sortField CreatedAt; private string _sortDirection DESC; public async Task SortAsync(string field) { if (_sortField field) _sortDirection _sortDirection ASC ? DESC : ASC; else { _sortField field; _sortDirection ASC; } // 排序变化后回到第一页 await GoToPageAsync(1); }排序字段和方向作为参数传到 SQL 的 ORDER BY 子句。注意这里不能直接拼接字符串要用白名单校验字段名防止 SQL 注入。常见做法是维护一个允许排序的字段列表传进来的字段不在列表里就忽略。筛选同理筛选条件变化后也要回到第一页并且把筛选条件下推到数据库查询的 WHERE 子句。前端只负责传参不负责过滤数据。4. 避坑与排查分页做完了但用户说不对劲4.1 翻页后 DataGrid 滚动条不回顶现象用户翻到第二页DataGrid 的滚动条还停在上一页的位置看到的是新数据的中间部分以为数据没加载全。原因DataGrid 在 ItemsSource 更新后不会自动重置滚动位置尤其是用 Clear Add 方式更新集合时滚动条位置会被保留。解决翻页后手动把滚动条滚到顶部。可以在 View 的代码后置里找到 DataGrid 内部的 ScrollViewer调用 ScrollToTop()。更简单的做法是给 DataGrid 设置ScrollViewer.CanContentScrollTrue并在数据更新后调用dataGrid.ScrollIntoView(dataGrid.Items[0])。// 在翻页完成后调用 if (Orders.Count 0) { OrderDataGrid.ScrollIntoView(Orders[0]); }4.2 总页数算出来是 0 或者多一页现象数据刚好 100 条每页 50 条总页数显示 3 页第三页是空的。原因整数除法丢精度或者向上取整逻辑写错。100 / 50 2但如果用(total pageSize - 1) / pageSize这种写法在某些边界值上会多算一页。解决用Math.Ceiling((double)totalCount / pageSize)并确保 totalCount 和 pageSize 都是正整数。如果 totalCount 为 0总页数应该是 1 而不是 0因为空数据也应该显示一页空页。4.3 快速连点翻页按钮导致数据错乱现象用户快速点「下一页」按钮DataGrid 里显示的数据和页码对不上有时候显示的是两页之前的数据。原因异步加载没有做取消或防抖多个请求并发返回后发的请求先返回覆盖了先发请求的结果。解决用 CancellationTokenSource 取消上一次未完成的请求或者在翻页时禁用按钮直到加载完成。private CancellationTokenSource _cts; public async Task GoToPageAsync(int page) { _cts?.Cancel(); _cts new CancellationTokenSource(); var token _cts.Token; try { var result await _orderService.GetOrdersAsync( page, Pagination.PageSize, _currentFilter, token); if (token.IsCancellationRequested) return; // 更新 UI... } catch (OperationCanceledException) { /* 忽略取消的请求 */ } }4.4 数据库分页时排序字段不稳定导致数据重复或丢失现象翻页时发现某条数据在第一页出现过在第二页又出现了或者某条数据翻页后找不到了。原因ORDER BY 的字段有重复值数据库对相同值的行返回顺序不确定导致分页边界上的数据漂移。解决在 ORDER BY 里加一个唯一字段作为 tiebreaker比如主键。ORDER BY CreatedAt DESC, OrderId DESC这样即使 CreatedAt 相同OrderId 也能保证顺序稳定。4.5 内存分页时 CollectionView 的 Filter 性能拖垮 UI现象数据量到八千行左右每次翻页 UI 卡顿明显Filter 回调里做 IndexOf 查找耗时太长。原因_allItems.IndexOf是线性查找每次 Filter 对每个元素都要调一次复杂度是 O(n²)。解决换用 Skip/Take 直接构造当前页的集合或者给数据加索引字段用字典做 O(1) 查找。如果数据量确实大老老实实换数据库分页。// 用 Skip/Take 替代 Filter var pagedItems _allItems .Skip((_currentPage - 1) * _pageSize) .Take(_pageSize) .ToList(); // 直接替换 DataGrid 的 ItemsSource Orders.Clear(); foreach (var item in pagedItems) Orders.Add(item);5. 进阶技巧让分页在真实项目里扛住压力5.1 预加载相邻页减少翻页等待数据库分页的痛点是每次翻页都有网络延迟。一个实用的优化是预加载当前页的相邻页用户在第 3 页时后台悄悄把第 2 页和第 4 页的数据也拉回来缓存。用户点「下一页」时直接从缓存取感知上就是零延迟。private Dictionaryint, ListOrderItem _pageCache new(); private const int CacheRadius 1; // 预加载前后各一页 private async Task PreloadAdjacentPagesAsync(int currentPage) { var pagesToLoad new Listint(); for (int i currentPage - CacheRadius; i currentPage CacheRadius; i) { if (i 1 i Pagination.TotalPages !_pageCache.ContainsKey(i)) pagesToLoad.Add(i); } foreach (var page in pagesToLoad) { var result await _orderService.GetOrdersAsync( page, Pagination.PageSize, _currentFilter); _pageCache[page] result.Items; } }缓存要设上限比如最多缓存 10 页超过就按 LRU 淘汰。否则用户翻了几十页之后内存又上去了分页的意义就没了。5.2 用虚拟化让 DataGrid 只渲染可见行即使每页只有 50 条如果 DataGrid 的列很多、单元格模板很复杂渲染开销也不小。WPF DataGrid 默认开启行虚拟化但有些操作会把它关掉比如把 DataGrid 放在 ScrollViewer 里、设置EnableRowVirtualizationFalse、或者用 StackPanel 做 ItemsPanel。检查你的 DataGrid 是否开启了虚拟化DataGrid EnableRowVirtualizationTrue EnableColumnVirtualizationTrue VirtualizingPanel.IsVirtualizingTrue VirtualizingPanel.VirtualizationModeRecyclingVirtualizationModeRecycling比默认的 Standard 模式更省内存它会复用容器而不是每次新建。对于分页场景每页数据量不大虚拟化的收益可能不明显但如果你的 DataGrid 有几十列列虚拟化能省下不少渲染时间。5.3 分页参数的持久化与恢复用户翻到第 5 页切到别的模块再切回来应该还在第 5 页而不是回到第 1 页。这个体验细节很多项目忽略了。做法是在 ViewModel 里保存分页状态页面切换时不销毁 ViewModel或者把状态序列化到导航参数里。如果用 MVVM 框架通常有 ViewModel 缓存机制把分页相关的属性标记为需要保持即可。// 在导航离开时保存状态 public void OnNavigatedFrom() { _stateStore.Save(OrderListPagination, new PaginationSnapshot { CurrentPage Pagination.CurrentPage, PageSize Pagination.PageSize, SortField _sortField, SortDirection _sortDirection, Filter _currentFilter }); } // 在导航进入时恢复 public void OnNavigatedTo() { var snapshot _stateStore.LoadPaginationSnapshot(OrderListPagination); if (snapshot ! null) { Pagination.PageSize snapshot.PageSize; _sortField snapshot.SortField; _sortDirection snapshot.SortDirection; _currentFilter snapshot.Filter; // 异步加载对应页数据 _ GoToPageAsync(snapshot.CurrentPage); } }这个技巧在管理后台类应用里特别有用用户经常在多个列表之间来回切换每次回来都回到第一页会让人很烦躁。5.4 一个容易被忽略的细节空数据状态分页做到最后别忘了空数据的情况。筛选条件查不到结果时DataGrid 应该显示一个友好的空状态提示而不是一片空白。页码控件也应该禁用总页数显示为 1 或者 0 都行但按钮不能还能点。public bool HasData Orders.Count 0; public bool ShowEmptyState !IsLoading !HasData;在 XAML 里用一个 TextBlock 覆盖在 DataGrid 上方通过 Visibility 绑定 ShowEmptyState 来控制显示。文案写「没有找到匹配的数据试试调整筛选条件」比空白强得多。我在实际项目里踩过最深的坑不是技术实现而是分页和业务逻辑的耦合。有一次订单列表的分页做完了测试反馈说「导出全部」按钮导出的还是当前页的数据。原因就是导出逻辑直接读了 DataGrid 的 ItemsSource而分页后 ItemsSource 只有当前页。后来改成导出走独立的查询接口不依赖 UI 状态。分页是一个横切关注点它会影响所有跟列表数据相关的功能做的时候多想一步后面少改十次。希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
