WPF DataGrid 使 1 行看起来是 2 行答案

【问题标题】：WPF DataGrid make 1 row appear to be 2 rowsWPF DataGrid 使 1 行看起来是 2 行
【发布时间】：2020-01-22 10:01:58
【问题描述】：

通常在 DataGrid 中，大多数网格视图看起来像这样.....

Name    Age     Sex    City
===========================
Tom     64      M      SF  
---------------------------
Sam     23      M      NY
---------------------------
Eva     18      F      LA

但是现在，我的老板需要我显示行看起来是 2 行，但实际上仍然是 1 行，它需要在视图中看起来像这样.....

Name/Age         Sex/City
=========================
Tom                     M
64                     SF
-------------------------
Sam                     M
23                     NY
-------------------------
Eva                     F
18                     LA

请注意，最终结果也是 3 行，而不是 6 行，因此交替颜色的工作方式与以前相同。此外，我无法更改基础数据、其结构或模型。我只能更改视图（仅 UI 部分）。

这是我的 XAML 代码（与普通单行一样）

<DataGrid ItemsSource="{Binding Person}" >
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
        <DataGridTextColumn Header="Sex" Binding="{Binding Sex}" />
        <DataGridTextColumn Header="City" Binding="{Binding City}" />
    </DataGrid.Columns>
</DataGrid>

我只需要让它显示为双排。

【问题讨论】：

也许使用带有适当 CellTemplate 的 ListView 而不是 DataGrid。
这可能有助于stackoverflow.com/questions/3583594/…
仅使用常规数据网格并在单元格上写入 Tom 64 并在其间使用断线怎么样？

标签： wpf xaml data-binding datagrid

【解决方案1】：

您可以将两个 DataGridTemplateColumns 与适当的 CellTemplates 一起使用：

<DataGrid ItemsSource="{Binding Persons}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Name/Age">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="{Binding Age}"/>
                    </StackPanel>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="Sex/City">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Sex}" TextAlignment="Right"/>
                        <TextBlock Text="{Binding City}" TextAlignment="Right"/>
                    </StackPanel>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

或具有类似列 CellTemplates 的 ListView：

<ListView ItemsSource="{Binding Persons}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.View>
        <GridView>
            <GridView.Columns>
                <GridViewColumn Header="Name/Age">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Name}"/>
                                <TextBlock Text="{Binding Age}"/>
                            </StackPanel>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Header="Sex/City">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Sex}" TextAlignment="Right"/>
                                <TextBlock Text="{Binding City}" TextAlignment="Right"/>
                            </StackPanel>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView.Columns>
        </GridView>
    </ListView.View>
</ListView>

【讨论】：