moodmeter/AffdexMe/MainWindow.xaml

<Window x:Class="AffdexMe.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="AffdexMe" 
        Height="640" Width="480"
        MinHeight="640" MinWidth="480"
        MaxHeight="640" MaxWidth="480"
        ResizeMode="NoResize"
        Loaded="Window_Loaded"
        Closing="Window_Closing">


    <Window.Resources>
        <Style TargetType="{x:Type ButtonBase}" x:Key="CustomButtonStyle">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF2778BB" Offset="0.51"/>
                        <GradientStop Color="#FF2683C5" Offset="0.484"/>
                        <GradientStop Color="#FF8CD4FF" Offset="1"/>
                        <GradientStop Color="#FF1973AE" Offset="0.497"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="BorderBrush" Value="#FF2B5F91"/>
            <Setter Property="Margin" Value="1"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="MinWidth" Value="20"/>
            <Setter Property="FontSize" Value="11"/>
            <Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Rectangle Stroke="{TemplateBinding BorderBrush}" RadiusX="15" RadiusY="15" Fill="{TemplateBinding Background}"/>
                            <Rectangle VerticalAlignment="Top" Height="10" Margin="7,2,7,1" RadiusX="10" RadiusY="10">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#11FFFFFF" Offset="1"/>
                                        <GradientStop Color="#B2FFFFFF" Offset="0"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="rectangle" RadiusX="15" RadiusY="15" Fill="White" Margin="1" Opacity="0"/>
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" IsHitTestVisible="False" Margin="{TemplateBinding Padding}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Opacity" TargetName="rectangle" Value="0.2"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Opacity" TargetName="rectangle" Value="0.3"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Fill" TargetName="rectangle" Value="#666"/>
                                <Setter Property="Opacity" TargetName="rectangle" Value="0.6"/>
                                <Setter Property="Opacity" TargetName="contentPresenter" Value="0.3"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type ButtonBase}" x:Key="PointsOnButtonStyle">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF3CB371" Offset="0.51"/>
                        <GradientStop Color="#FF3CB371" Offset="0.484"/>
                        <GradientStop Color="#FF3CB371" Offset="1"/>
                        <GradientStop Color="#FF1973AE" Offset="0.497"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="BorderBrush" Value="#FF2B5F91"/>
            <Setter Property="Margin" Value="1"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="MinWidth" Value="20"/>
            <Setter Property="FontSize" Value="11"/>
            <Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Rectangle Stroke="{TemplateBinding BorderBrush}" RadiusX="15" RadiusY="15" Fill="{TemplateBinding Background}"/>
                            <Rectangle VerticalAlignment="Top" Height="10" Margin="7,2,7,1" RadiusX="10" RadiusY="10">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#11FFFFFF" Offset="1"/>
                                        <GradientStop Color="#B2FFFFFF" Offset="0"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="rectangle" RadiusX="15" RadiusY="15" Fill="White" Margin="1" Opacity="0"/>
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" IsHitTestVisible="False" Margin="{TemplateBinding Padding}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Opacity" TargetName="rectangle" Value="0.2"/>
                            </Trigger>
                            <Trigger Property
                                     ="IsPressed" Value="True">
                                <Setter Property="Opacity" TargetName="rectangle" Value="0.3"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Fill" TargetName="rectangle" Value="#666"/>
                                <Setter Property="Opacity" TargetName="rectangle" Value="0.6"/>
                                <Setter Property="Opacity" TargetName="contentPresenter" Value="0.3"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    
    <Grid Name="gridMainDisplay" Margin="0,0,0,0" >

        <Grid Name="gridContentDisplay" DockPanel.Dock="Top">

       
            <StackPanel Name="stackPanelImage" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

                <Grid Name="gridAffdexFaceDisplay" VerticalAlignment="Stretch" Width="auto" Height="560" >
                    <Image Name="imgAffdexFaceDisplay" Visibility="Hidden" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="UniformToFill"/>
                    
                    <Image Name="imgAffdexLogoDisplay" Margin="40" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                            Height="auto" Source="AffectivaLogo1.png" Visibility="Visible"/>

                    <Canvas Name="canvasFacePoints" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    <TextBlock Name="interocularDistanceDisplay" Visibility="Hidden" Text="Interocular Distance: " FontWeight="SemiBold" Foreground="White" VerticalAlignment="Center" Margin="10,131,0,413"/>
                    <TextBlock Name="pitchDisplay" Visibility="Hidden" Text="pitch: " FontWeight="SemiBold" Foreground="White" VerticalAlignment="Center" Margin="10,131,0,380"/>
                    <TextBlock Name="yawDisplay" Visibility="Hidden" Text="Yaw: " FontWeight="SemiBold" Foreground="White" VerticalAlignment="Center" Margin="10,131,0,347"/>
                    <TextBlock Name="rollDisplay" Visibility="Hidden" Text="Roll: " FontWeight="SemiBold" Foreground="White" VerticalAlignment="Center" Margin="10,131,0,314"/>

                </Grid>
            </StackPanel>

            <StackPanel Name="stackPanelClassifiersBackground" Orientation="Vertical" Background="Gainsboro" Height="130" HorizontalAlignment="Stretch" VerticalAlignment="Top" Opacity=".3" />

            
            <StackPanel Name="stackPanelClassifiers" Orientation="Vertical" Background="Transparent" Height="130" HorizontalAlignment="Stretch" VerticalAlignment="Top" >
                
                <Grid Name="gridClassifierDisplay" VerticalAlignment="Stretch" Background="Transparent" Margin="0,5,0,0"
                      Width="auto" Height="130px" >
                    
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.36*" />
                        <ColumnDefinition Width="0.28*" />
                        <ColumnDefinition Width="0.36*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                        <RowDefinition Height="40" />
                        <RowDefinition Height="40" />
                    </Grid.RowDefinitions>

                    <StackPanel Name="stackPanel0" Orientation="Vertical" Grid.Row="0" Grid.Column="0" Margin="0,0,0,0">
                        <TextBlock Name="stackPanel0Name" Text="STACKPANEL0" Foreground="OrangeRed" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center"/>
                        <Grid>
                            <TextBlock Name="stackPanel0ValueBackgroud" Width="50" Background="LimeGreen" HorizontalAlignment="Center"/>
                            <TextBlock Name="stackPanel0Value" Width="50" TextAlignment="Center" Text="10%" FontWeight="SemiBold" Foreground="Black" HorizontalAlignment="Center"/>
                        </Grid>
                    </StackPanel>

                    <StackPanel Name="stackPanel1" Orientation="Vertical" Grid.Row="0" Grid.Column="2" Margin="0,0,0,0" >
                        <TextBlock Name="stackPanel1Name" Text="STACKPANEL1" Foreground="OrangeRed" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center"/>
                        <Grid>
                            <TextBlock Name="stackPanel1ValueBackgroud" Width="50" Background="LimeGreen" HorizontalAlignment="Center" />
                            <TextBlock Name="stackPanel1Value" Width="50" TextAlignment="Center" Text="10%" FontWeight="SemiBold" Foreground="Black" HorizontalAlignment="Center" />
                        </Grid>
                    </StackPanel>

                    <StackPanel Name="stackPanel2" Orientation="Vertical" Grid.Row="1" Grid.Column="0" Margin="0,0,0,0" >
                        <TextBlock Name="stackPanel2Name" Text="STACKPANEL2" Foreground="OrangeRed" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center"/>
                        <Grid>
                            <TextBlock Name="stackPanel2ValueBackgroud" Width="50" Background="LimeGreen" HorizontalAlignment="Center" />
                            <TextBlock Name="stackPanel2Value" Width="50" TextAlignment="Center" Text="10%" FontWeight="SemiBold" Foreground="Black" HorizontalAlignment="Center" />
                        </Grid>
                    </StackPanel>

                    <StackPanel Name="stackPanel3" Orientation="Vertical" Grid.Row="1" Grid.Column="2" Margin="0,0,0,0" >
                        <TextBlock Name="stackPanel3Name" Text="STACKPANEL3" Foreground="OrangeRed" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center"/>
                        <Grid>
                            <TextBlock Name="stackPanel3ValueBackgroud" Width="50" Background="LimeGreen" HorizontalAlignment="Center" />
                            <TextBlock Name="stackPanel3Value" Width="50" TextAlignment="Center" Text="10%" FontWeight="SemiBold" Foreground="Black" HorizontalAlignment="Center"/>
                        </Grid>
                    </StackPanel>

                    <StackPanel Name="stackPanel4" Orientation="Vertical" Grid.Row="2" Grid.Column="0" Margin="0,0,0,0" >
                        <TextBlock Name="stackPanel4Name" Text="STACKPANEL4" Foreground="OrangeRed" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center"/>
                        <Grid>
                            <TextBlock Name="stackPanel4ValueBackgroud" Width="50" Background="LimeGreen" HorizontalAlignment="Center" />
                            <TextBlock Name="stackPanel4Value" Width="50" TextAlignment="Center" Text="10%" FontWeight="SemiBold" Foreground="Black" HorizontalAlignment="Center" />
                        </Grid>
                    </StackPanel>

                    <StackPanel Name="stackPanel5" Orientation="Vertical" Grid.Row="2" Grid.Column="2" Margin="0,0,0,0" >
                        <TextBlock Name="stackPanel5Name" Text="STACKPANEL5" Foreground="OrangeRed" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" />
                        <Grid>
                            <TextBlock Name="stackPanel5ValueBackgroud" Width="50" Background="LimeGreen" HorizontalAlignment="Center" />
                            <TextBlock Name="stackPanel5Value" Width="50" TextAlignment="Center" Text="10%" FontWeight="SemiBold" Foreground="Black" HorizontalAlignment="Center" />
                        </Grid>
                    </StackPanel>
                </Grid> 
            </StackPanel>

            <StackPanel Name="stackPanelLogoBackground" Orientation="Vertical" Background="Transparent" Height="75" HorizontalAlignment="Stretch" VerticalAlignment="Top" >
                <Grid Name="gridLogoBackground">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.36*" />
                        <ColumnDefinition Width="0.28*" />
                        <ColumnDefinition Width="0.36*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="20" />
                        <RowDefinition Height="35" />
                        <RowDefinition Height="20" />
                    </Grid.RowDefinitions>

                    <Image Name="imgAffdexLogoBackground" Width="auto" Grid.Column="1" Grid.Row="1"
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                            Height="auto" Source="AffectivaLogo1.png" Margin="0,0,0,-34" Grid.RowSpan="2"/>
                </Grid>
            </StackPanel>
        </Grid>

        <DockPanel VerticalAlignment="Bottom" Background="Coral" >

            <Grid HorizontalAlignment="Center">
                <GroupBox Margin="0,5,0,0"  Height="40" VerticalAlignment="Stretch" BorderBrush="Transparent" BorderThickness="0">
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Button Name="btnStartCamera" Style="{StaticResource CustomButtonStyle}" HorizontalAlignment="Center" Margin="0,0,5,0" VerticalAlignment="Top" Width="40" Content="Start" />
                        <Button Name="btnResetCamera" Style="{StaticResource CustomButtonStyle}" HorizontalAlignment="Center" Margin="0,0,5,0" VerticalAlignment="Top" Width="40" Content="Reset" />
                        <Button Name="btnShowPoints" Style="{StaticResource CustomButtonStyle}" HorizontalAlignment="Center" Margin="0,0,5,0" VerticalAlignment="Top" Width="80" Content="Show Points" />
                        <Button Name="btnShowMeasurements" Style="{StaticResource CustomButtonStyle}" HorizontalAlignment="Center" Margin="0,0,5,0" VerticalAlignment="Top" Width="120" Content="Show Measurements" />
                        <Button Name="btnChooseWin" Style="{StaticResource CustomButtonStyle}" HorizontalAlignment="Center" Margin="0,0,5,0" VerticalAlignment="Top" Width="60" Content="Classifiers" Click="btnChooseWin_Click" />
                        <Button Name="btnStopCamera" Style="{StaticResource CustomButtonStyle}" HorizontalAlignment="Center" Margin="0,0,5,0" VerticalAlignment="Top" Width="40" Content="Stop" />
                        <Button Name="btnExit" Style="{StaticResource CustomButtonStyle}" HorizontalAlignment="Center" Margin="0,0,5,0" VerticalAlignment="Bottom" Width="35" Content="Exit" />
                    </StackPanel>
                </GroupBox>
            </Grid>                    
        </DockPanel>
    </Grid>
</Window>