Databind à ListView ou TreeView avec une collection observable avec plusieurs propriétés de tableau

Question

Je ne parviens pas à afficher la sortie comme je le souhaite. Je suis assez nouveau pour XAML. Actuellement, ma sortie ressemble à: enter image description here

Si vous regardez la capture d'écran, la sortie est presque correcte. Les deux premières colonnes sont les propriétés de mon objet LiveCameraResult qui sont ajoutées à ma collection observable. Les quatre colonnes suivantes (FaceID, Âge, Sexe, Emotion) proviennent également d'une propriété de l'LiveCameraResult objet mais la propriété est un tableau (Faces) et je veux ouput de tous les Visages dans cet objet à afficher. Jusqu'à présent, la seule façon dont j'ai pu afficher la sortie pour ces quatre colonnes est de montrer uniquement la 1ère entité dans le tableau en l'indexant sur [0]. Comment puis-je corriger ma sortie pour afficher plusieurs données de visages. Voici ce que mon LiveCameraResult classe ressemble à:

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

J'ai essayé le code XAML suivant avec pas de chance:

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

Mon XAML originale ressemblait à ceci:

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

est ici juste un objet LiveCameraResult au format json:

{"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} 

En résumé, ce journal est mis à jour toutes les trois secondes et fournit des données en temps réel. La sortie TimeStamp et Camera est correcte, mais le reste des colonnes provient de propriétés qui sont des tableaux dans un objet qui contiennent des données pour plusieurs faces. Comment puis-je afficher les données de sorte que si à 10h30 de la caméra 1, il ramasse 4 visages, je peux voir leurs ID de visage, le sexe, l'âge et les identités.

Answer 1

J'ai essayé d'utiliser une zone de liste et un datatemplate, vérifier:

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