List ListView Item

Question

관찰 가능 Collection과 바인딩하는이 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> 

내가

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> 

당신은 데이터 그리드를 사용하려면 사용할 수 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; 
} 
... 

의 ListView 결과 :