I can't seem to get the output to display the way I want. I'm pretty new to XAML. Currently my out put looks like:
[enter image description here][1][^]
If you look at the screenshot, the output is almost correct. The 1st two columns are properties of my **LiveCameraResult** object that are added to my observable collect. The next four columns (**FaceId**, **Age**, **Gender**, **Emotion**) also come from a property of the **LiveCameraResult** object but the property is an array (**Faces**) and I want ouput of ALL the Faces in this object to display. So far the only way I have been able to get output to display at all for those four columns is to only show the 1st entity in the array by indexing to **[0]**. How can I fix my output to show multiple faces data. Here's what my **LiveCameraResult** Class looks like:
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;
}
I tried the following XAML code with no luck:
<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" >
<!--
<!--
<TreeView ItemsSource="{Binding}">
<!--
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding}">
<TextBlock Foreground="Red" Text="{Binding TimeStamp}" />
<!--
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate>
<TextBlock Foreground="Red" Text="{Binding Path=Faces.FaceAttributes.Gender}"/>
<!--
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
My original XAML looked like this:
<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>
Here's just one LiveCameraResult object in 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}
To summarize, This log updates every three seconds and give real time data. The TimeStamp, and Camera output is right but the rest of the columns come from properties that are arrays inside an object that hold data for multiple faces. How can I display data so that if at say 10:30 from camera 1 it picks up 4 faces I can see their face IDs, gender, age and identities.
[1]: https://i.stack.imgur.com/ElOr1.jpg
|