Databind zu einem ListView oder TreeView mit einer Observable Collection mit mehreren Array-Eigenschaften

Question

Ich kann nicht scheinen, um die Ausgabe zu erhalten, wie ich will. Ich bin neu bei XAML. Momentan sieht mein output wie aus: enter image description here

Wenn Sie auf den Screenshot schauen, ist die Ausgabe fast korrekt. Die ersten beiden Spalten sind Eigenschaften meines LiveCameraResult Objekts, die zu meiner beobachtbaren Sammlung hinzugefügt werden. Die nächsten vier Spalten (FaceID, Alter, Geschlecht, Emotion) auch von einer Eigenschaft des Objekts LiveCameraResult kommen aber die Eigenschaft ist ein Array (Faces) und ich möchte ouput aller Gesichter in diesem Objekt werden angezeigt. Bisher war die einzige Möglichkeit, die Ausgabe für diese vier Spalten überhaupt anzuzeigen, nur das Anzeigen der ersten Entität in dem Array durch Indizieren nach [0]. Wie kann ich meine Ausgabe korrigieren, um mehrere Faces Daten anzuzeigen. Hier ist, was meine LiveCameraResult Klasse wie folgt aussieht:

public class LiveCameraResult 
{ 
    public DateTime TimeStamp { get; set; } 
    public string SelectedCamera { get; set; } = null; 
    public string TopEmotion { get; set; } = null; 
    public string FirstIdentity { get; set; } 
    public List<String> Identity = new List<string>(); 
    public Microsoft.ProjectOxford.Face.Contract.Face[] Faces { get; set; } = null; 
    public Microsoft.ProjectOxford.Common.Contract.EmotionScores[] EmotionScores { get; set; } = null; 
    public string[] CelebrityNames { get; set; } = null; 
    public Microsoft.ProjectOxford.Vision.Contract.Tag[] Tags { get; set; } = null; 
} 

ich folgende XAML-Code ohne Glück versucht:

 <Grid Grid.ColumnSpan="2" Margin="5,0,0,-74.173" Grid.Row="2"> 
     <DockPanel x:Name="scrollViewContent" Margin="0,10,-5,-16.571" Height="154.901" VerticalAlignment="Top" > 
      <!--<ListView Name="LogView" ItemsSource="{Binding}" Background="#FFD4C9C9" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0,0,5,0" MinHeight="153.143" DockPanel.Dock="Top" IsSynchronizedWithCurrentItem="True" >--> 
       <!--<ListView.View >--> 
       <TreeView ItemsSource="{Binding}"> 
            
        <!-- Conference template --> 
            
        <TreeView.ItemTemplate> 
         <HierarchicalDataTemplate ItemsSource="{Binding}"> 
          <TextBlock Foreground="Red" Text="{Binding TimeStamp}" /> 
          <!-- Team template --> 
          <HierarchicalDataTemplate.ItemTemplate> 
           <HierarchicalDataTemplate> 
           <TextBlock Foreground="Red" Text="{Binding Path=Faces.FaceAttributes.Gender}"/> 

            <!-- Player template --> 
            <HierarchicalDataTemplate.ItemTemplate> 
             <DataTemplate> 
              <TextBlock Text="{Binding}" /> 
             </DataTemplate> 
            </HierarchicalDataTemplate.ItemTemplate> 
           </HierarchicalDataTemplate> 
          </HierarchicalDataTemplate.ItemTemplate> 
         </HierarchicalDataTemplate> 
        </TreeView.ItemTemplate> 
       </TreeView> 

Meine ursprüngliche XAML sah dies wie:

<Grid Grid.ColumnSpan="2" Margin="5,0,0,-74.173" Grid.Row="2"> 
     <DockPanel x:Name="scrollViewContent" Margin="0,10,-5,-16.571" Height="154.901" VerticalAlignment="Top" > 
      <ListView Name="LogView" ItemsSource="{Binding}" Background="#FFD4C9C9" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0,0,5,0" MinHeight="153.143" DockPanel.Dock="Top" IsSynchronizedWithCurrentItem="True" > 
       <ListView.View > 
        <GridView ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True" > 
         <GridViewColumn Width="auto" > 
          <GridViewColumnHeader Tag="Timestamp" Content="Timestamp" Padding="10,0,2,0" > 
           <GridViewColumnHeader.Background> 
            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
             <GradientStop Color="White" Offset="0"/> 
             <GradientStop Color="White" Offset="0.4091"/> 
             <GradientStop Color="#FFF7F8F9" Offset="1"/> 
            </LinearGradientBrush> 
           </GridViewColumnHeader.Background> 
          </GridViewColumnHeader> 
          <GridViewColumn.CellTemplate> 
           <DataTemplate> 
            <Grid> 
             <TextBlock Text="{Binding TimeStamp}"/> 
            </Grid> 
           </DataTemplate> 
          </GridViewColumn.CellTemplate> 
         </GridViewColumn> 
         <GridViewColumn Width="auto" > 
          <GridViewColumnHeader Tag="Source" Content="Source" Padding="10,0,2,0" ScrollViewer.CanContentScroll="True" /> 
          <GridViewColumn.CellTemplate> 
           <DataTemplate> 
            <Grid> 
             <TextBlock Text="{Binding SelectedCamera}"/> 
            </Grid> 
           </DataTemplate> 
          </GridViewColumn.CellTemplate> 
         </GridViewColumn> 
         <GridViewColumn Width="auto" > 
          <GridViewColumnHeader Tag="Face ID" Content="Face ID" Padding="10,0,2,0" MinWidth="159.413" /> 
          <GridViewColumn.CellTemplate> 
           <DataTemplate> 
            <Grid> 
             <TextBlock DataContext="{Binding Path=Faces}" Text="{Binding Path=FaceId}"/> 
            </Grid> 
           </DataTemplate> 
          </GridViewColumn.CellTemplate> 
         </GridViewColumn> 
         <GridViewColumn Width="auto" > 
          <GridViewColumnHeader Tag="Gender" Content="Gender" Padding="10,0,2,0" MinWidth="61.102" /> 
          <GridViewColumn.CellTemplate> 
           <DataTemplate> 
            <Grid> 
             <TextBlock Text="{Binding Path=Faces[0].FaceAttributes.Gender}"/> 
            </Grid> 
           </DataTemplate> 
          </GridViewColumn.CellTemplate> 
         </GridViewColumn> 
         <GridViewColumn Width="auto" > 
          <GridViewColumnHeader Tag="Age" Content="Age" Padding="10,0,2,0" MinWidth="42.797" /> 
          <GridViewColumn.CellTemplate> 
           <DataTemplate> 
            <Grid> 
             <TextBlock Text="{Binding Path=Faces[0].FaceAttributes.Age}"/> 
            </Grid> 
           </DataTemplate> 
          </GridViewColumn.CellTemplate> 
         </GridViewColumn> 
         <GridViewColumn Width="auto" > 
          <GridViewColumnHeader Tag="Emotion" Content="Emotion" Padding="10,0,2,0" MinWidth="110" /> 
          <GridViewColumn.CellTemplate> 
           <DataTemplate> 
            <Grid> 
             <TextBlock Text="{Binding Path=TopEmotion}"/> 
            </Grid> 
           </DataTemplate> 
          </GridViewColumn.CellTemplate> 
         </GridViewColumn> 
         <GridViewColumn Width="auto" > 
          <GridViewColumnHeader Tag="Identity" Content="Identity" Padding="10,0,2,0" MinWidth="119.388" /> 
          <GridViewColumn.CellTemplate> 
           <DataTemplate> 
            <Grid> 
             <TextBlock Text="{Binding Path=FirstIdentity}"/> 
            </Grid> 
           </DataTemplate> 
          </GridViewColumn.CellTemplate> 
         </GridViewColumn> 
        </GridView> 
       </ListView.View> 
      </ListView> 
     </DockPanel> 
    </Grid> 

Hier ist nur ein LiveCameraResult-Objekt im JSON-Format:

{"TimeStamp":"2017-09-30T17:34:26.3317547-04:00","SelectedCamera":"Camera 1","TopEmotion":null,"Faces":[{"FaceId":"9b512175-59f3-4a1c-b19e-d650cda0bffc","FaceRectangle":{"Width":159,"Height":159,"Left":311,"Top":233},"FaceLandmarks":null,"FaceAttributes":{"Age":48.4,"Gender":"male","HeadPose":{"Roll":1.9,"Yaw":7.6,"Pitch":0.0},"Smile":0.0,"FacialHair":{"Moustache":0.5,"Beard":0.5,"Sideburns":0.3},"Emotion":{"Anger":0.0,"Contempt":0.0,"Disgust":0.0,"Fear":0.0,"Happiness":0.0,"Neutral":0.997,"Sadness":0.003,"Surprise":0.0},"Glasses":"NoGlasses","Blur":null,"Exposure":null,"Noise":null,"Makeup":{"EyeMakeup":false,"LipMakeup":false},"Accessories":null,"Occlusion":null,"Hair":{"Bald":0.17,"Invisible":false,"HairColor":[{"Color":"Black","Confidence":0.99},{"Color":"Other","Confidence":0.64},{"Color":"Gray","Confidence":0.59},{"Color":"Brown","Confidence":0.56},{"Color":"Red","Confidence":0.09},{"Color":"Blond","Confidence":0.04}]}}},{"FaceId":"19f12175-59f3-4a1c-b19e-83cccda06aa2","FaceRectangle":{"Width":120,"Height":120,"Left":211,"Top":133},"FaceLandmarks":null,"FaceAttributes":{"Age":36.4,"Gender":"female","HeadPose":{"Roll":1.9,"Yaw":7.6,"Pitch":0.0},"Smile":0.0,"FacialHair":{"Moustache":0.0,"Beard":0.0,"Sideburns":0.3},"Emotion":{"Anger":1.0,"Contempt":0.0,"Disgust":0.0,"Fear":0.0,"Happiness":0.0,"Neutral":0.597,"Sadness":0.003,"Surprise":0.0},"Glasses":"SunGlasses","Blur":null,"Exposure":null,"Noise":null,"Makeup":{"EyeMakeup":true,"LipMakeup":false},"Accessories":null,"Occlusion":null,"Hair":{"Bald":0.17,"Invisible":false,"HairColor":[{"Color":"Black","Confidence":0.99},{"Color":"Other","Confidence":0.64},{"Color":"Gray","Confidence":0.59},{"Color":"Brown","Confidence":0.56},{"Color":"Red","Confidence":0.09},{"Color":"Blond","Confidence":0.04}]}}}],,"EmotionScores":null,"CelebrityNames":null,"Tags":[{"Name":"person","Confidence":0.99842345714569092,"Hint":null},{"Name":"man","Confidence":0.981597900390625,"Hint":null},{"Name":"indoor","Confidence":0.95850932598114014,"Hint":null},{"Name":"window","Confidence":0.9486764669418335,"Hint":null}],"Animal":null,"Building":null,"Trans":null,"People":null,"Object":null,"Food":null,"Text":null,"Plant":null,"Indoor":null,"Dark":null,"Sky":null,"Outdoor":null,"Abstract":null,"Ocr":null} 

Zusammenfassend: Dieses Protokoll wird alle drei Sekunden aktualisiert und gibt Echtzeitdaten aus. Die TimeStamp- und Camera-Ausgabe ist richtig, aber die restlichen Spalten stammen aus Eigenschaften, bei denen es sich um Arrays innerhalb eines Objekts handelt, die Daten für mehrere Flächen enthalten. Wie kann ich Daten anzeigen, so dass, wenn um 10:30 von Kamera 1 4 Gesichter aufgenommen werden, ich ihre Gesicht IDs, Geschlecht, Alter und Identitäten sehen kann.

Answer 1

Ich habe versucht, eine Listbox und ein Datatemplate verwendet, check it out:

<StackPanel HorizontalAlignment="Left"> 
    <StackPanel.ScrollOwner> 
     <ScrollViewer/> 
    </StackPanel.ScrollOwner> 
    <StackPanel Orientation="Horizontal" Background="White"> 
     <Border BorderThickness="2" BorderBrush="#FFCB9C9C"> 
      <TextBlock x:Name="TimeStampTextBLK" TextWrapping="Wrap" Text="Time Stamp" FontSize="24" Padding="50,10"/> 
     </Border> 
     <Border BorderThickness="2" BorderBrush="#FFCB9C9C"> 
      <TextBlock x:Name="SourceTextBLK" TextWrapping="Wrap" Text="Source" FontSize="24" Padding="20,10"/> 
     </Border> 
     <Border BorderThickness="2" BorderBrush="#FFCB9C9C"> 
      <TextBlock x:Name="FaceIDTextBLK" TextWrapping="Wrap" Text="Face ID" FontSize="24" Padding="150,10"/> 
     </Border> 
     <Border BorderThickness="2" BorderBrush="#FFCB9C9C"> 
      <TextBlock x:Name="GenderTextBLK" TextWrapping="Wrap" Text="Gender" FontSize="24" Padding="30,10"/> 
     </Border> 
     <Border BorderThickness="2" BorderBrush="#FFCB9C9C"> 
      <TextBlock x:Name="AgeTextBLK" TextWrapping="Wrap" Text="Age" FontSize="24" Padding="30,10"/> 
     </Border> 
     <Border BorderThickness="2" BorderBrush="#FFCB9C9C"> 
      <TextBlock x:Name="EmotionTextBLK" TextWrapping="Wrap" Text="Emotion" FontSize="24" Padding="60,10"/> 
     </Border> 
     <Border BorderThickness="2" BorderBrush="#FFCB9C9C"> 
      <TextBlock x:Name="IdentityTextBLK" TextWrapping="Wrap" Text="Identity" FontSize="24" Padding="60,10"/> 
     </Border> 
    </StackPanel> 
    <ListBox x:Name="MainListBox" Background="#FFCB9C9C" BorderBrush="{x:Null}" BorderThickness="0"> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <Border Width="{Binding ActualWidth, ElementName=TimeStampTextBLK, Mode=OneWay}"> 
         <TextBlock Text="{Binding Path=TimeStamp}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Margin="5"/> 
        </Border> 
        <Border Width="{Binding ActualWidth, ElementName=SourceTextBLK, Mode=OneWay}"> 
         <TextBlock Text="{Binding Path=SelectedCamera}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Margin="5"/> 
        </Border> 
        <Border Width="{Binding ActualWidth, ElementName=FaceIDTextBLK, Mode=OneWay}"> 
         <TextBlock Text="{Binding Path=Faces}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Margin="5"/> 
        </Border> 
        <Border Width="{Binding ActualWidth, ElementName=GenderTextBLK, Mode=OneWay}"> 
         <TextBlock Text="{Binding Path=Faces[0].FaceAttributes.Gender}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Margin="5"/> 
        </Border> 
        <Border Width="{Binding ActualWidth, ElementName=AgeTextBLK, Mode=OneWay}"> 
         <TextBlock Text="{Binding Path=Path=Faces[0].FaceAttributes.Age}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Margin="5"/> 
        </Border> 
        <Border Width="{Binding ActualWidth, ElementName=EmotionTextBLK, Mode=OneWay}"> 
         <TextBlock Text="{Binding Path=TopEmotion}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Margin="5"/> 
        </Border> 
        <Border Width="{Binding ActualWidth, ElementName=IdentityTextBLK, Mode=OneWay}"> 
         <TextBlock Text="{Binding Path=FirstIdentity}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Margin="5"/> 
        </Border> 
       </StackPanel> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 
</StackPanel>