How to display WPF Datagrid in bill format

Question

I have requirement to display WPF Datagrid in bill format as follows.

Right now I am able to display simple datagrid in following format.

WPF Datagrid as follows:

<DataGrid Name="gridDetails"  AutoGenerateColumns="False" ItemsSource="{Binding Orders}">
                            <DataGrid.Columns>
                                             <DataGridTextColumn Header="Item Name" Binding="{Binding itemName}" Width="150">
                                    <DataGridTextColumn.ElementStyle>
                                        <Style>
                                            <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
                                            <Setter Property="TextBlock.TextAlignment" Value="Center"/>
                                        </Style>
                                    </DataGridTextColumn.ElementStyle>
                                </DataGridTextColumn>                                

                                <DataGridTemplateColumn Header="Item Addtionals">
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <ItemsControl ItemsSource="{Binding ItemAdditionals}">
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <TextBlock Text="{Binding}"/>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>
                                <DataGridTextColumn Header="Quantity" Binding="{Binding quantity}" />

                                <DataGridTextColumn Header="Price" Binding="{Binding itemPrice}" />
                            </DataGrid.Columns> 

</DataGrid>

Can anyone help me out to achieve the desired output datagrid format.

Answer 1

This looks like treeviews in the Item Name column:

<DataGrid Name="gridDetails"  AutoGenerateColumns="False" ItemsSource="{Binding Orders}">
    <DataGrid.Columns>
         <DataGridTextColumn Header="Item Name" Width="150">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                   <TreeView>
                        <TreeViewItem ItemsSource="{Binding ItemAdditionals}">
                            <TreeViewItem.Header>
                                <TextBlock Text="{Binding itemName}" TextWrapping="Wrap" TextAlignment="Center"/>
                            </TreeViewItem.Header>
                            <TreeViewItem.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Margin="10 0 0 0" Text="{Binding}"/>
                                </DataTemplate>
                            </TreeViewItem.ItemTemplate>
                        </TreeViewItem>
                    </TreeView>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTextColumn>                     
        <DataGridTextColumn Header="Quantity" Binding="{Binding quantity}" />

        <DataGridTextColumn Header="Price" Binding="{Binding itemPrice}" />
    </DataGrid.Columns> 

</DataGrid>

Used a left margin for the indent visual.