C# ListView项下的列表

我有一个listview，它绑定了observable Collection，这个listview显示发票项目，发票中的任何项目都可能有一个子细节（选项）（例如项目颜色）， 我想问的是：如何使列表视图在listview的主项下以列表的形式显示项目选项，我希望我的问题是清楚的。。要获得更清晰的信息，请查看图像：

我想要的是黄色，如何使listview看起来像图像

以下是我的发票列表视图代码：

            <ListView x:Name="temsReceipt" ItemsSource="{Binding ocItemsReceipt}">
            <ListView.View>
                <GridView ColumnHeaderContainerStyle="{StaticResource myHeaderStyle}">
                    <GridViewColumn>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Height="40" Width="50"></TextBlock>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Item Name" Width="230" DisplayMemberBinding="{Binding ItemName}"/>
                    <GridViewColumn Header="Item Price" Width="100" DisplayMemberBinding="{Binding ItemPrice}"/>
                </GridView>
            </ListView.View>

---

同样，如果我使用datagrid，假设您有以下类：

class InvoiceItem
{
    public string ItemName { get; set; }
    public List<InvoiceOption> Options { get; set; }
}

class InvoiceOption
{
    public string OptionName { get; set; }
}

类发票项
{
公共字符串ItemName{get；set；}
公共列表选项{get；set；}
}
类发票选项
{
公共字符串选项名称{get；set；}
}

ListView解决方案：

<ListView x:Name="temsReceipt" ItemsSource="{Binding}">
    <ListView.Resources>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.Resources>
    <ListView.View>
        <GridView>
            <GridViewColumn>
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Height="40" Width="50"></TextBlock>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn Header="Item Name" Width="230" >
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>                                   
                            <TextBlock Text="{Binding ItemName}" VerticalAlignment="Center" 
                                       FontWeight="Bold" FontSize="18"/>
                            <ListBox ItemsSource="{Binding Options}" Grid.Row="1" Background="Yellow" 
                                     HorizontalAlignment="Stretch">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding OptionName}" />
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </Grid>                                
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn Header="Item Price" Width="100" DisplayMemberBinding="{Binding ItemPrice}"/>
        </GridView>
    </ListView.View>
</ListView>

如果要使用DataGrid，可以使用RowDetailsTemplate：

<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding ItemName}" />
    </DataGrid.Columns>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <StackPanel Margin="2" Background="Yellow">
                <TextBlock Text="Options:" />
                <ListBox ItemsSource="{Binding Options}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding OptionName}" />
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

样本数据：

...
public MainWindow()
{
    InitializeComponent();

    List<InvoiceItem> _source = new List<InvoiceItem>
    {
        new InvoiceItem
        {
          ItemName = "Item1",
          Options = new List<InvoiceOption>
          {
              new InvoiceOption { OptionName = "Option1" },
              new InvoiceOption { OptionName = "Option2" }
          }
        },
        new InvoiceItem
        {
          ItemName = "Item2",
          Options = new List<InvoiceOption>
          {
              new InvoiceOption { OptionName = "Option3" },
              new InvoiceOption { OptionName = "Option4" }
          }
        }
    };

    this.DataContext = _source;
}
...

。。。
公共主窗口（）
{
初始化组件（）；
列表_source=新列表
{
新发票项
{
ItemName=“Item1”，
选项=新列表
{
新发票选项{OptionName=“Option1”}，
新发票选项{OptionName=“Option2”}
}
},
新发票项
{
ItemName=“Item2”，
选项=新列表
{
新发票选项{OptionName=“Option3”}，
新发票选项{OptionName=“Option4”}
}
}
};
this.DataContext=\u source；
}
...

列表视图结果：

---

我建议删除第一列，它的功能似乎是提供边距，并使用填充。kmatyaszek，我已经将它与listView和datagrid一起使用了，但不起作用，选项列表显示为空，有什么建议吗？@Abdusalamelsher如果再次检查我的答案，我添加了样本数据和结果图像。你能给我看一下你的模型类吗？好的，kmatyaszek，我想念'ElementName'，因为我的选项'Binding'，现在可以了，非常感谢