将数据绑定到具有多个数组属性的Observable Collection的ListView或TreeView

Question

我似乎无法获得所需的输出。我是XAML的新手。目前我的输出看起来像：在此处输入图像描述

如果你看一下屏幕截图，输出几乎是正确的。前两列是添加到我的可观察集合中的LiveCameraResult对象的属性。接下来的四列(FaceId，Age、Gender和Emotion)也来自LiveCameraResult对象的一个属性，但该属性是一个数组(Faces。到目前为止，我能够为这四列显示输出的唯一方法是通过索引到[0]来只显示数组中的第一个实体。如何修复我的输出以显示多个面数据。以下是我的LiveCameraResult类的样子：

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

我尝试了以下XAML代码，但没有成功：

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

我原来的XAML是这样的：

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

这里只有一个json格式的LiveCameraResult对象：

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

总之，此日志每三秒更新一次，并提供实时数据。"TimeStamp"one_answers"Camera"输出是正确的，但其余列来自对象内部的数组属性，这些数组包含多个面的数据。我如何显示数据，以便如果在10点30分从1号摄像头上拍摄到4张人脸，我可以看到他们的人脸ID、性别、年龄和身份。

Answer 1

我尝试过使用Listbox和Datatemplate，请查看：

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