WPF：如何正确堆叠带Expander的多组DataGrid？

场景与问题回顾 #

需求：展示多组列状数据，每组通过Expander控制显示/隐藏（标题为数据集名称），多组堆叠排列。

遇到的问题：

1. StackPanel布局：Expander展开后覆盖下方控件，尝试通过事件调整Height无效；但DataGrid横向可填满父容器。
2. ListView布局：Expander展开可正常推动下方控件，但DataGrid的ColumnWidth="*"失效，右侧出现空列导致目标列过窄。
   已尝试：后台代码动态赋值、封装包含Expander+DataGrid的UserControl，问题未解决。

1. 解决StackPanel中Expander展开覆盖问题 #

StackPanel的布局逻辑是无限测量子元素高度，若父容器有固定高度限制，超出部分会重叠而非滚动。解决思路如下：

• 用ScrollViewer包裹StackPanel：让超出父容器高度的内容可滚动，避免重叠

  <ScrollViewer VerticalScrollBarVisibility="Auto">
      <StackPanel>
          <Expander Header="数据集1">
              <DataGrid ... />
          </Expander>
          <Expander Header="数据集2">
              <DataGrid ... />
          </Expander>
      </StackPanel>
  </ScrollViewer>
  

• 替换为Grid布局（推荐）：给Grid设置Height="Auto"的行，每行放置一组Expander+DataGrid，展开时行会自动调整高度，不会出现覆盖

  <Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <!-- 按需添加更多行 -->
      </Grid.RowDefinitions>
      <Expander Grid.Row="0" Header="数据集1">
          <DataGrid ... />
      </Expander>
      <Expander Grid.Row="1" Header="数据集2">
          <DataGrid ... />
      </Expander>
  </Grid>
  

• 注意：不要手动设置Expander或DataGrid的固定Height，保持默认Auto即可，让控件自动计算所需高度。

2. 消除ListView中DataGrid的多余空列 #

问题根源是ListView的默认ListViewItem有内置Padding，且HorizontalContentAlignment未设为Stretch，导致DataGrid未填满容器宽度，ColumnWidth="*"计算错误。解决方法：

• 自定义ListView的ItemContainerStyle，移除Padding并设置内容对齐为Stretch

  <ListView ItemsSource="{Binding DataSets}">
      <ListView.ItemContainerStyle>
          <Style TargetType="ListViewItem">
              <Setter Property="Padding" Value="0"/>
              <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
          </Style>
      </ListView.ItemContainerStyle>
      <ListView.ItemTemplate>
          <DataTemplate>
              <Expander Header="{Binding Name}">
                  <DataGrid ItemsSource="{Binding Data}" ColumnWidth="*" HorizontalAlignment="Stretch"/>
              </Expander>
          </DataTemplate>
      </ListView.ItemTemplate>
  </ListView>
  

• 额外检查：若DataGrid列是后台动态生成，确认代码中未误添加空列，确保所有列的Width设置正确。

3. 更优的多组DataGrid堆叠实现方案 #

推荐以下几种更稳定的方案：

• ItemsControl（轻量首选）：比ListView更轻量（无选择功能），默认ItemContainer无额外样式，布局更简洁。设置ItemsPanel为StackPanel，即可实现动态绑定多组数据，且Expander展开正常推动下方控件，DataGrid的ColumnWidth="*"完全生效

  <ItemsControl ItemsSource="{Binding DataSets}">
      <ItemsControl.ItemTemplate>
          <DataTemplate>
              <Expander Header="{Binding Name}" Margin="0,0,0,5">
                  <DataGrid ItemsSource="{Binding Data}" ColumnWidth="*"/>
              </Expander>
          </DataTemplate>
      </ItemsControl.ItemTemplate>
  </ItemsControl>
  

• Grid布局（固定数量场景）：若数据集数量固定，Grid的Auto行高布局最稳定，无滚动或样式问题，DataGrid的布局表现最佳。
• Accordion控件（第三方库）：若使用WPF Toolkit、MahApps.Metro等UI库，Accordion原生支持多组折叠面板，可配置单开/多开模式，自带展开动画，无需手动拼接Expander，布局更专业。

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