ListView 项下的列表

Question

我有与可观察集合绑定的列表视图，此列表视图显示发票项目，发票中的任何项目都可能有一个子详细信息（选项），（例如项目颜色）， 我想问的是：如何使列表视图将项目选项显示为列表视图中主要项目下的列表，我希望我的问题很清楚..为了更清楚地查看图像：

我想要的是黄色，如何使列表视图看起来像图像？

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

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

如果我使用数据网格也是一样的想法

Answer 1

假设您有以下课程：

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

class InvoiceOption
{
    public string OptionName { 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;
}
...

列表视图结果：