如何通过后端SQL或前端VB.NET将DataGrid横向数据转为纵向展示

现有数据表tbl_info中的数据格式如下：

No1 Name1 No2 Name2 No3 Name3
232 Sanp  453 Awerk 374 Wash

我通过SQL语句：

select No1,Name1,No2,Name2,No3,Name3 from tbl_info

将数据导入DataTable，但因为存在50组类似NoX/NameX的列，且仅单条记录，横向展示可读性极差，希望把DataGrid中的数据改成纵向格式，效果如下：

No1   232
Name1 Sanp
No2   453
Name2 Awerk
No3   374
Name3 Wash

方案1：SQL查询层面直接转纵向（数据库支持时优先用） #

以SQL Server为例，用UNPIVOT操作将列转换为行，查询结果直接是纵向结构，绑定DataGrid即可：

SELECT ColumnName, ColumnValue
FROM (
    SELECT CAST(No1 AS VARCHAR) AS No1, Name1,
           CAST(No2 AS VARCHAR) AS No2, Name2,
           CAST(No3 AS VARCHAR) AS No3, Name3
           -- 依次添加剩余47组NoX/NameX列，注意统一转成字符串类型（UNPIVOT要求列类型一致）
    FROM tbl_info
) t
UNPIVOT (
    ColumnValue FOR ColumnName IN (No1, Name1, No2, Name2, No3, Name3 /* 补充剩余列名 */)
) up

方案2：在DataTable中转换数据 #

如果不想修改SQL，可在获取原DataTable后，手动构建纵向结构的新表：

// 假设原数据表为originalDt
DataTable verticalDt = new DataTable();
verticalDt.Columns.Add("属性名", typeof(string));
verticalDt.Columns.Add("值", typeof(string));

// 遍历原表所有列，逐行写入新表
foreach (DataColumn col in originalDt.Columns)
{
    string cellValue = originalDt.Rows[0][col.ColumnName].ToString();
    verticalDt.Rows.Add(col.ColumnName, cellValue);
}

// 将新表绑定到DataGrid
dataGrid.DataSource = verticalDt;

方案3：UI层自定义DataGrid模板（以WPF为例） #

不修改数据源，通过自定义模板实现纵向展示：

<DataGrid ItemsSource="{Binding OriginalData}" AutoGenerateColumns="False">
    <DataGrid.Template>
        <ControlTemplate>
            <ItemsControl ItemsSource="{Binding Columns}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="120"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Text="{Binding ColumnName}" Margin="5"/>
                            <TextBlock Grid.Column="1" Text="{Binding DataContext[ColumnName], RelativeSource={RelativeSource AncestorType=ItemsControl}}" Margin="5"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ControlTemplate>
    </DataGrid.Template>
</DataGrid>

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