如何将循环遍历Dictionary获取的数据在WPF中实现可滚动XAML表格展示

控件选择结论 #

不需要单独使用List或者Grid控件，优先选择DataGrid或者搭配GridView视图的ListView，二者天生自带滚动能力，原生支持多列数据绑定，开发成本最低。

你现有的拆分两个独立List存储键值的逻辑可以直接省略，WPF绑定原生支持遍历KeyValuePair结构，额外拆分反而容易出现索引错位的问题。

方案1：使用DataGrid实现（推荐，代码量最少） #

XAML代码 #

<DataGrid x:Name="ResultDataGrid" 
          AutoGenerateColumns="False"
          CanUserAddRows="False"
          IsReadOnly="True"
          ScrollViewer.VerticalScrollBarVisibility="Auto">
    <DataGrid.Columns>
        <!-- 第一列绑定Key，对应你原来的listFirstColumn -->
        <DataGridTextColumn Header="第一列" Binding="{Binding Key}" />
        <!-- 第二列绑定Value，对应你原来的listSecondColumn -->
        <DataGridTextColumn Header="第二列" Binding="{Binding Value}" />
    </DataGrid.Columns>
</DataGrid>

后台绑定代码 #

直接绑定原始字典，不需要执行你写的foreach循环：

// 假设你的字典变量名为sourceDict
ResultDataGrid.ItemsSource = sourceDict;

如果一定要用你已经拆分好的两个List，可以用Zip方法合并后绑定：

ResultDataGrid.ItemsSource = listFirstColumn.Zip(listSecondColumn, (key, val) => new { Key = key, Value = val });

方案2：使用ListView+GridView实现（自定义样式更灵活） #

XAML代码 #

<ListView x:Name="ResultListView" 
          ScrollViewer.VerticalScrollBarVisibility="Auto">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="第一列" DisplayMemberBinding="{Binding Key}" Width="180"/>
            <GridViewColumn Header="第二列" DisplayMemberBinding="{Binding Value}" Width="180"/>
        </GridView>
    </ListView.View>
</ListView>

后台绑定代码 #

和DataGrid的绑定逻辑完全一致：

ResultListView.ItemsSource = sourceDict;

注意事项 #

• 两个控件默认超出显示区域时自动弹出滚动条，不需要额外嵌套ScrollViewer，除非有特殊的滚动自定义需求
• 如果需要数据动态更新时UI自动刷新，把数据源替换为ObservableCollection<KeyValuePair<string, int>>即可
• 手动用Grid控件实现需要自己循环生成行列定义、赋值、额外加滚动容器，代码量是上述方案的3倍以上，没有特殊需求不推荐

内容的提问来源于stack exchange，提问作者Matic-C