WPF 同一行放置两个DataGrid触发程序无响应故障如何解决？

问题根因 #

你遇到的无响应问题和“同一行放置两个DataGrid”无关，核心原因是横向StackPanel的布局特性：StackPanel在其排列方向（这里是水平方向）上会给子元素提供无限的布局空间，你给两个DataGrid的Width都设置为Auto时，DataGrid会尝试完整渲染所有列内容，不会触发自带的横向滚动条，当列数较多、数据量较大时，会直接占用大量UI线程资源导致程序卡死。你移除第一个DataGrid后程序正常，只是因为剩余单个DataGrid的内容量刚好没达到性能阈值而已。

解决方案 #

按以下步骤调整即可解决：

• 替换布局容器：不要用横向StackPanel，改用Grid定义两列承载两个DataGrid，给列设置明确的宽度规则，避免无限拉伸：

<Grid Grid.Row="2">
    <Grid.ColumnDefinitions>
        <!-- 可根据需求调整宽度规则，比如用*均分、固定值、Auto加MaxWidth限制 -->
        <ColumnDefinition Width="*" MaxWidth="600"/>
        <ColumnDefinition Width="*" MaxWidth="600"/>
    </Grid.ColumnDefinitions>
    <DataGrid
        Grid.Column="0"
        Name="Map"
        Height="Auto"
        HorizontalScrollBarVisibility="Auto"
        EnableRowVirtualization="True"
        VirtualizingStackPanel.IsVirtualizing="True"
        ItemsSource="{Binding MapCollectionView}">
    </DataGrid>
    <DataGrid
        Grid.Column="1"
        Name="Values"
        Height="Auto"
        HorizontalScrollBarVisibility="Auto"
        EnableRowVirtualization="True"
        VirtualizingStackPanel.IsVirtualizing="True"
        ItemsSource="{Binding ValuesDataView}"/>
</Grid>

• 显式开启DataGrid的横向滚动条、行虚拟化属性：如上代码所示，限制DataGrid的最大渲染宽度，同时开启UI虚拟化减少大量数据下的渲染性能消耗。
• 额外排查：可以在调试时查看Visual Studio的输出窗口，确认第一个DataGrid的自定义列头有没有绑定报错，大量绑定错误也会拖慢UI响应速度。

内容的提问来源于stack exchange，提问作者Raya