FaceDetectionPage.xaml

<!--
//
// Copyright (c) Microsoft. All rights reserved.
// Licensed under the MIT license.
//
// Microsoft Cognitive Services (formerly Project Oxford): https://www.microsoft.com/cognitive-services
//
// Microsoft Cognitive Services (formerly Project Oxford) GitHub:
// https://github.com/Microsoft/Cognitive-Face-Windows
//
// Copyright (c) Microsoft Corporation
// All rights reserved.
//
// MIT License:
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

<Page x:Class="Microsoft.ProjectOxford.Face.Controls.FaceDetectionPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:uc="clr-namespace:Microsoft.ProjectOxford.Face.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="360" d:DesignWidth="710" x:Name="FaceDetectionPane" MinHeight="360" Width="710" FontSize="14">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition Width="96" />
            <ColumnDefinition Width="314" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="64" />
            <RowDefinition Height="45" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Left" Text="{Binding FaceDetectionDescription}" TextWrapping="Wrap"></TextBlock>
        <Grid Width="300" Height="300" Grid.Column="0" Grid.Row="2" VerticalAlignment="Top">
            <ItemsControl HorizontalAlignment="Center" VerticalAlignment="Center" ItemsSource="{Binding ResultCollection, ElementName=FaceDetectionPane}" Panel.ZIndex="999" Height="{Binding MaxImageSize, ElementName=FaceDetectionPane}" Width="{Binding MaxImageSize, ElementName=FaceDetectionPane}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center" Height="{Binding MaxImageSize, ElementName=FaceDetectionPane}" Width="{Binding MaxImageSize, ElementName=FaceDetectionPane}" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="ContentPresenter">
                        <Setter Property="Canvas.Left" Value="{Binding Left}" />
                        <Setter Property="Canvas.Top" Value="{Binding Top}" />
                    </Style>
                </ItemsControl.ItemContainerStyle>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Width="{Binding Width}" Height="{Binding Height}" Stroke="#FF26B8F4" StrokeThickness="1">
                            <Rectangle.LayoutTransform>
                                <RotateTransform Angle="{Binding FaceAngle}"/>
                            </Rectangle.LayoutTransform>
                        </Rectangle>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
            <Image HorizontalAlignment="Center" VerticalAlignment="Center" Height="{Binding MaxImageSize, ElementName=FaceDetectionPane}" Width="{Binding MaxImageSize, ElementName=FaceDetectionPane}" x:Name="ImageDisplay" >
                <Image.Style>
                    <Style TargetType="{x:Type Image}">
                        <Setter Property="Source" Value="{Binding SelectedFile, ElementName=FaceDetectionPane}" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding SelectedFile, ElementName=FaceDetectionPane }" Value="{x:Null}">
                                <Setter Property="Source" Value="/FaceAPI-WPF-Samples;component/Assets/default.jpg" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </Grid>
        <CheckBox Grid.Column="0" Grid.Row="1" Margin="0,-20" IsChecked="{Binding DrawHeadPose, ElementName=FaceDetectionPane}" HorizontalAlignment="Left" VerticalAlignment="Top" Content="Draw Headpose"/>
        <Button Grid.Column="0" Grid.Row="1" Content="Choose Image" Width="300" Height="35" Background="#2196f3" Foreground="White" BorderBrush="Transparent" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0, 0, 0, 0" Click="ImagePicker_Click"/>
        <TextBlock Grid.Column="2" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding DetectedResultsInText, ElementName=FaceDetectionPane}" />
        <ListView Grid.Row="2" Grid.Column="2" ItemsSource="{Binding DetectedFaces, ElementName=FaceDetectionPane}" Margin="0" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="340">
            <ListView.Style>
                <Style TargetType="ListView">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Items.Count}" Value="0">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate />
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ListView.Style>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel MaxWidth="314" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="-3, 5, 5, 5" Width="285" Height="160">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="64" />
                            <ColumnDefinition Width="10" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="16" />
                            <RowDefinition Height="16" />
                            <RowDefinition Height="16" />
                            <RowDefinition Height="16" />
                            <RowDefinition Height="16" />
                            <RowDefinition Height="16" />
                            <RowDefinition Height="16" />
                            <RowDefinition Height="16" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Image Grid.Column="0" Grid.Row="2" Grid.RowSpan="4" Width="64" Height="64">
                            <Image.Source>
                                <CroppedBitmap Source="{Binding ImageFile}" SourceRect="{Binding UIRect}" />
                            </Image.Source>
                        </Image>
                        <TextBlock Grid.Column="2" Grid.Row="3" FontSize="12" HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding ForeheadOcclusion}"/>
                        <TextBlock Grid.Column="2" Grid.Row="3" FontSize="12" HorizontalAlignment="Right" VerticalAlignment="Top" Text="{Binding Blur}"/>
                        <TextBlock Grid.Column="2" Grid.Row="4" FontSize="12" HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding EyeOcclusion}"/>
                        <TextBlock Grid.Column="2" Grid.Row="4" FontSize="12" HorizontalAlignment="Right" VerticalAlignment="Top" Text="{Binding Exposure}"/>
                        <TextBlock Grid.Column="2" Grid.Row="5" FontSize="12" HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding MouthOcclusion}"/>
                        <TextBlock Grid.Column="2" Grid.Row="5" FontSize="12" HorizontalAlignment="Right" VerticalAlignment="Top" Text="{Binding Noise}"/>
                        <TextBlock Grid.Column="2" Grid.Row="6" FontSize="12" HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding Glasses}"/>
                        <TextBlock Grid.Column="2" Grid.Row="7" FontSize="12" HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding HeadPose}"/>
                        <TextBlock Grid.Column="2" Grid.Row="8" FontSize="12" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" Text="{Binding Accessories}"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Transparent"/>
                        </Trigger>
                    </Style.Triggers>
                    <Setter Property="Focusable" Value="False" />
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="true">
                                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected" Value="true"/>
                                            <Condition Property="Selector.IsSelectionActive" Value="false"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>
                                    </MultiTrigger>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
        </ListView>
    </Grid>
</Page>