当前位置：首页 > news >正文

WPF中异步代码更新DataGrid控件卡顿问题分析

news 2026/5/12 14:57:34

问题背景

在 WPF 开发中，我们经常需要动态更改 DataGrid 的列结构和数据源。例如，在报表系统中切换不同的数据视图，或在数据分析工具中展示不同结构的数据集。然而，这个看似简单的操作却隐藏着一个容易被忽视的陷阱。

问题复现

假设我们有以下场景：两个 DataTable，列名完全不同，需要在它们之间切换显示。

初始代码

xaml代码如下:

<Window x:Class="WpfApp1.DataGridFreezeDemoWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp1"mc:Ignorable="d"Title="DataGridFreezeDemoWindow" Height="450" Width="800"><Grid><Grid.RowDefinitions><RowDefinition Height="*"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><DataGrid x:Name="dg"/><Button x:Name="btnUpdate" Grid.Row="1" Click="UpdateButton_Click" >Update Columns And Rows</Button></Grid>
</Window>

xaml.cs代码如下:

    public DataGridFreezeDemoWindow(){InitializeComponent();_dt = new DataTable();// 向_dt中添加50列;"Column"开头for (int i = 0; i < 50; i++){_dt.Columns.Add($"Column{i}", typeof(string));}// 添加500行随机数据到_dtRandom random = new Random();for (int i = 0; i < 500; i++){DataRow row = _dt.NewRow();for (int j = 0; j < 50; j++){row[j] = $"Row{i}_Col{j}_{random.Next(1000)}";}_dt.Rows.Add(row);}_dt.AcceptChanges();// 使用不同的列名初始化_dt2,"Field"开头_dt2 = new DataTable();for (int i = 0; i < 50; i++){_dt2.Columns.Add($"Field_{i + 1}", typeof(string));}// 向_dt2添加500行随机数据for (int i = 0; i < 500; i++){DataRow row = _dt2.NewRow();for (int j = 0; j < 50; j++){row[j] = $"Data{i}_F{j + 1}_{random.Next(5000, 10000)}";}_dt2.Rows.Add(row);}_dt2.AcceptChanges();// 设定是否使用的第一个datatable_useFirstDataTable = false;
        ApplyDataGridColumns(_dt);dg.ItemsSource = _dt.DefaultView;}private DataTable _dt;private DataTable _dt2;private bool _useFirstDataTable = true;

   private void ApplyDataGridColumns(DataTable dataTable){// Disable auto-generated columnsdg.AutoGenerateColumns = false;// Clear existing columns
       dg.Columns.Clear();// Manually create columns for the DataTablefor (int i = 0; i < dataTable.Columns.Count; i++){DataGridTextColumn column = new DataGridTextColumn{Header = dataTable.Columns[i].ColumnName,Binding = new Binding($"[{i}]"),IsReadOnly = true};dg.Columns.Add(column);}}

初看之下，切换逻辑很简单

private async void UpdateButton_Click(object sender, RoutedEventArgs e) {    
btnUpdate.IsEnabled = false;    
try{DataTable currentDataTable = _useFirstDataTable ? _dt : _dt2;// 更新列定义
        ApplyDataGridColumns(currentDataTable);//模拟实际项目中的一些耗时的异步操作await Task.Delay(500);// 绑定新数据dg.ItemsSource = currentDataTable.DefaultView;_useFirstDataTable = !_useFirstDataTable;}finally{btnUpdate.IsEnabled = true;}

}

问题所在

这段代码存在一个严重的隐藏问题：在 `await Task.Delay(500)` 期间，WPF 会接管 UI 线程并尝试更新视图，在WPF更新UI时，由于当前DataGrid的列和其绑定数据源(DataTable)的字段不一致，会产生多个绑定错误:

大量的绑定错误会导致UI卡顿甚至卡死。

为了解决这个问题，我们可以在应用新的列数据之前，将DataGrid的数据源设置为null:

 private async void UpdateButton_Click(object sender, RoutedEventArgs e){// Disable the button during executionbtnUpdate.IsEnabled = false;try{// Toggle between the two data tablesDataTable currentDataTable = _useFirstDataTable ? _dt : _dt2;// Apply columns only
         ApplyDataGridColumns(currentDataTable);// Wait for WPF to update the view with the new columnsawait Task.Delay(500);// Bind the data after delaydg.ItemsSource = currentDataTable.DefaultView;// Toggle for next click_useFirstDataTable = !_useFirstDataTable;}finally{// Re-enable the button after execution completesbtnUpdate.IsEnabled = true;}}