ListView Grid in grid

Question

I have a listview with id, name and price. Each such an item has a sublist with categories.

So "for each" Item I want to display all subitems. This is would it should look like:

But I don't know how to do it. Here is my xaml code.

<ListView.View>
<GridView>
    <GridViewColumn Width="140" Header="ID" DisplayMemberBinding="{Binding ID}"/>
    <GridViewColumn Width="140" Header="Name" DisplayMemberBinding="{Binding Name}" />
    <GridViewColumn Width="300" Header="Price" DisplayMemberBinding="{Binding Price}" />
</GridView>

<!-- ??? -->
<Gridview ItemSource="{Binding Childs}">

I have to add a subgrid I think, but I don't know how.

This is my class structure

public class GroupedItem
{
    public int ID { get; set; }
    public string Name { get; set; }
    public float Price { get; set; }

    public IEnumerable<Item> Childs { get; set; }
}

Has someone an idea?

Answer 1

you can do this with datagrid :

 <w:DataGrid ItemsSource={Binding Source={StaticResource GroupedItemList}}>
    <w:DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <w:DataGrid ItemsSource={Binding Childs }>
                
            </w:DataGrid>
        </DataTemplate>
    </w:DataGrid.RowDetailsTemplate>
    <w:DataGrid.Columns>
        <w:DataGridTextColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
        <w:DataGridTextColumn Header="Price" DisplayMemberBinding="{Binding Price}" />
    </w:DataGrid.Columns>

Also you can use this datagrid in codeplex it's free

WPF Extended DataGrid (this link is no longer available because codeplex is dead)