WPF DataGrid make 1 row appear to be 2 rows

Question

normally in a DataGrid, most grid view has soemthing that look like this.....

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

But now, my boss needs me to display the rows appear to be in 2 rows, but actually is still 1 row, it needs to look like this in the view.....

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

Please note the end result is ALSO 3 rows, not 6, so that alternating colors will work the same as before. Also, i am unable to change the underlying data, its structure, or the model. I am only allowed to change the view (just the UI part).

Here's my XAML code (as in the normal single row)

<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>

I just need to make it appear double row.

Answer 1

You may use two DataGridTemplateColumns with appropriate 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>

Or a ListView with similar column CellTemplates:

<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>