From 3a808b502278e92fe73673edcf405a13c7d5b48f Mon Sep 17 00:00:00 2001
From: Pepe Rivera <joseartrivera@gmail.com>
Date: Thu, 9 Apr 2020 16:58:18 -0700
Subject: [PATCH] Update styling of graph settings textbox and add shadow
 (#1079)

* Update internal package vers

* fix more bugs

* PR comments

* PR comments

* Undo last PR changes

* Pr comments
---
 src/Calculator/App.xaml                       | 63 +++++++++++++++++++
 .../GraphingCalculator/EquationInputArea.xaml | 47 --------------
 .../GraphingCalculator.xaml                   |  5 ++
 .../GraphingCalculator.xaml.cpp               |  7 ++-
 .../GraphingCalculator/GraphingSettings.xaml  | 44 ++++++-------
 .../GraphingSettings.xaml.cpp                 |  4 +-
 6 files changed, 99 insertions(+), 71 deletions(-)

diff --git a/src/Calculator/App.xaml b/src/Calculator/App.xaml
index e4ba11d2..7082c752 100644
--- a/src/Calculator/App.xaml
+++ b/src/Calculator/App.xaml
@@ -85,6 +85,19 @@
                     <SolidColorBrush x:Key="EquationBrush13" Color="#B0896D"/>
                     <SolidColorBrush x:Key="EquationBrush14" Color="#FFFFFF"/>
                     <SolidColorBrush x:Key="DividerBrush" Color="#60FFFFFF"/>
+                    <SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="#33EB5757"/>
+                    <SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="#FFEB5757"/>
+                    <SolidColorBrush x:Key="SliderLegendBrush" Color="#B2ffffff"/>
+
+                    <Style x:Key="VariableContainerStyle" TargetType="Border">
+                        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
+                    </Style>
+                    <Style x:Key="ThemedVariableTextBoxStyle"
+                           BasedOn="{StaticResource VariableTextBoxStyle}"
+                           TargetType="TextBox">
+                        <Setter Property="BorderBrush" Value="#50ffffff"/>
+                    </Style>
+
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
                     <Thickness x:Key="HighContrastThicknessTop">0,0,0,0</Thickness>
@@ -164,6 +177,18 @@
                     <SolidColorBrush x:Key="EquationBrush13" Color="#FF8E562E"/>
                     <SolidColorBrush x:Key="EquationBrush14" Color="#FF000000"/>
                     <SolidColorBrush x:Key="DividerBrush" Color="#33000000"/>
+                    <SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="#33EB5757"/>
+                    <SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="#FFEB5757"/>
+                    <SolidColorBrush x:Key="SliderLegendBrush" Color="#B2000000"/>
+
+                    <Style x:Key="VariableContainerStyle" TargetType="Border">
+                        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
+                    </Style>
+                    <Style x:Key="ThemedVariableTextBoxStyle"
+                           BasedOn="{StaticResource VariableTextBoxStyle}"
+                           TargetType="TextBox">
+                        <Setter Property="BorderBrush" Value="#70000000"/>
+                    </Style>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
                     <Thickness x:Key="HighContrastThicknessTop">0,1,0,0</Thickness>
@@ -199,6 +224,25 @@
                     <SolidColorBrush x:Key="EquationBrush3" Color="{ThemeResource SystemColorHotlightColor}"/>
                     <SolidColorBrush x:Key="EquationBrush4" Color="{ThemeResource SystemColorWindowTextColor}"/>
                     <SolidColorBrush x:Key="DividerBrush" Color="Transparent"/>
+                    <SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                    <SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="Red"/>
+                    <SolidColorBrush x:Key="SliderLegendBrush" Color="{StaticResource SystemColorWindowTextColor}"/>
+
+                    <Style x:Key="VariableContainerStyle" TargetType="Border">
+                        <Setter Property="Background" Value="{StaticResource SystemColorWindowColor}"/>
+                        <Setter Property="BorderThickness" Value="1"/>
+                        <Setter Property="BorderBrush" Value="{StaticResource SystemColorWindowTextColor}"/>
+                    </Style>
+                    <Style x:Key="ThemedVariableTextBoxStyle" TargetType="TextBox">
+                        <Setter Property="Margin" Value="1,0,0,0"/>
+                        <Setter Property="Padding" Value="2,6,2,2"/>
+                        <Setter Property="TextAlignment" Value="Center"/>
+                        <Setter Property="Background" Value="Transparent"/>
+                        <Setter Property="BorderThickness" Value="0,0,0,1"/>
+                        <Setter Property="FontSize" Value="14"/>
+                        <Setter Property="InputScope" Value="Number"/>
+                        <Setter Property="MinWidth" Value="30"/>
+                    </Style>
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
 
@@ -1766,6 +1810,25 @@
                     </Setter.Value>
                 </Setter>
             </Style>
+
+            <Style x:Key="VariableTextBoxStyle" TargetType="TextBox">
+                <Setter Property="Margin" Value="1,0,0,0"/>
+                <Setter Property="Padding" Value="2,6,2,2"/>
+                <Setter Property="TextAlignment" Value="Center"/>
+                <Setter Property="Background" Value="Transparent"/>
+                <Setter Property="BorderThickness" Value="0,0,0,1"/>
+                <Setter Property="FontSize" Value="14"/>
+                <Setter Property="InputScope" Value="Number"/>
+                <Setter Property="MinWidth" Value="30"/>
+            </Style>
+
+            <Style x:Key="VariableTextErrorBoxStyle"
+                   BasedOn="{StaticResource VariableTextBoxStyle}"
+                   TargetType="TextBox">
+                <Setter Property="BorderBrush" Value="{ThemeResource GraphSettingsErrorBorderBrush}"/>
+                <Setter Property="Background" Value="{ThemeResource GraphSettingsErrorBackgroundBrush}"/>
+            </Style>
+
         </ResourceDictionary>
     </Application.Resources>
 </Application>
diff --git a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
index 49cb4173..f504900e 100644
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
@@ -23,68 +23,21 @@
                       Tapped="VariableAreaTapped">
                     <Grid.Resources>
                         <ResourceDictionary>
-
-                            <Style x:Key="VariableTextBoxStyle" TargetType="TextBox">
-                                <Setter Property="Margin" Value="1,0,0,0"/>
-                                <Setter Property="Padding" Value="2,6,2,2"/>
-                                <Setter Property="TextAlignment" Value="Center"/>
-                                <Setter Property="Background" Value="Transparent"/>
-                                <Setter Property="BorderThickness" Value="0,0,0,1"/>
-                                <Setter Property="FontSize" Value="14"/>
-                                <Setter Property="InputScope" Value="Number"/>
-                                <Setter Property="MinWidth" Value="30"/>
-                            </Style>
-
                             <ResourceDictionary.ThemeDictionaries>
                                 <ResourceDictionary x:Key="Default">
                                     <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
                                     <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
                                     <SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
-                                    <SolidColorBrush x:Key="SliderLegendBrush" Color="#B2ffffff"/>
-                                    <Style x:Key="VariableContainerStyle" TargetType="Border">
-                                        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
-                                    </Style>
-                                    <Style x:Key="ThemedVariableTextBoxStyle"
-                                           BasedOn="{StaticResource VariableTextBoxStyle}"
-                                           TargetType="TextBox">
-                                        <Setter Property="BorderBrush" Value="#50ffffff"/>
-                                    </Style>
                                 </ResourceDictionary>
                                 <ResourceDictionary x:Key="Light">
                                     <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
                                     <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
                                     <SolidColorBrush x:Key="TextControlForegroundFocused" Color="Black"/>
-                                    <SolidColorBrush x:Key="SliderLegendBrush" Color="#B2000000"/>
-                                    <Style x:Key="VariableContainerStyle" TargetType="Border">
-                                        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
-                                    </Style>
-                                    <Style x:Key="ThemedVariableTextBoxStyle"
-                                           BasedOn="{StaticResource VariableTextBoxStyle}"
-                                           TargetType="TextBox">
-                                        <Setter Property="BorderBrush" Value="#70000000"/>
-                                    </Style>
                                 </ResourceDictionary>
                                 <ResourceDictionary x:Key="HighContrast">
                                     <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{StaticResource SystemColorButtonFaceColor}"/>
                                     <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="{StaticResource SystemColorButtonFaceColor}"/>
                                     <SolidColorBrush x:Key="TextControlForegroundFocused" Color="{StaticResource SystemColorButtonTextColor}"/>
-                                    <SolidColorBrush x:Key="VariablesBackgroundBrush" Color="{StaticResource SystemColorBackgroundColor}"/>
-                                    <SolidColorBrush x:Key="SliderLegendBrush" Color="{StaticResource SystemColorWindowTextColor}"/>
-                                    <Style x:Key="VariableContainerStyle" TargetType="Border">
-                                        <Setter Property="Background" Value="{StaticResource SystemColorWindowColor}"/>
-                                        <Setter Property="BorderThickness" Value="1"/>
-                                        <Setter Property="BorderBrush" Value="{StaticResource SystemColorWindowTextColor}"/>
-                                    </Style>
-                                    <Style x:Key="ThemedVariableTextBoxStyle" TargetType="TextBox">
-                                        <Setter Property="Margin" Value="1,0,0,0"/>
-                                        <Setter Property="Padding" Value="2,6,2,2"/>
-                                        <Setter Property="TextAlignment" Value="Center"/>
-                                        <Setter Property="Background" Value="Transparent"/>
-                                        <Setter Property="BorderThickness" Value="0,0,0,1"/>
-                                        <Setter Property="FontSize" Value="14"/>
-                                        <Setter Property="InputScope" Value="Number"/>
-                                        <Setter Property="MinWidth" Value="30"/>
-                                    </Style>
                                 </ResourceDictionary>
                             </ResourceDictionary.ThemeDictionaries>
                         </ResourceDictionary>
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
index 399cdd09..b539770e 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
@@ -2,6 +2,7 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
+             xmlns:contract8Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 8)"
              xmlns:converters="using:CalculatorApp.Converters"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:graphControl="using:GraphControl"
@@ -12,6 +13,8 @@
              mc:Ignorable="d">
     <UserControl.Resources>
         <ResourceDictionary>
+            <contract8Present:ThemeShadow x:Name="SharedShadow"/>
+
             <Style x:Key="GraphToggleButtonStyle" TargetType="ToggleButton">
                 <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                 <Setter Property="Background" Value="Transparent"/>
@@ -630,6 +633,8 @@
                     HorizontalAlignment="Left"
                     VerticalAlignment="Top"
                     Style="{ThemeResource GraphTooltipStyle}"
+                    contract8Present:Shadow="{StaticResource SharedShadow}"
+                    contract8Present:Translation="0,0,32"
                     IsHitTestVisible="False"
                     SizeChanged="TraceValuePopup_SizeChanged"
                     Visibility="Collapsed">
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
index dc096877..62ffb2aa 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
@@ -91,6 +91,11 @@ GraphingCalculator::GraphingCalculator()
     virtualKey->Modifiers = VirtualKeyModifiers::Control;
     ZoomInButton->KeyboardAccelerators->Append(virtualKey);
 
+    if (Windows::Foundation::Metadata::ApiInformation::IsTypePresent(L"Windows.UI.Xaml.Media.ThemeShadow"))
+    {
+        SharedShadow->Receivers->Append(GraphingControl);
+    }
+    
     m_accessibilitySettings->HighContrastChanged +=
         ref new TypedEventHandler<AccessibilitySettings ^, Object ^>(this, &GraphingCalculator::OnHighContrastChanged);
 
@@ -619,7 +624,7 @@ void CalculatorApp::GraphingCalculator::AddTracePointerShadow()
     dropShadow->Mask = CursorPath->GetAlphaMask();
 
     auto shadowSpriteVisual = compositor->CreateSpriteVisual();
-    shadowSpriteVisual->Size = ::Numerics::float2(static_cast<float>(CursorPath->ActualWidth), static_cast<float>(CursorPath->ActualHeight));
+    shadowSpriteVisual->Size = ::Numerics::float2(18, 18);
     shadowSpriteVisual->Shadow = dropShadow;
     ::Hosting::ElementCompositionPreview::SetElementChildVisual(CursorShadow, shadowSpriteVisual);
 }
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml b/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml
index ba2cec43..f40eb260 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml
+++ b/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml
@@ -1,28 +1,14 @@
 <UserControl x:Class="CalculatorApp.GraphingSettings"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:converters="using:CalculatorApp.Converters"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="using:CalculatorApp"
-             xmlns:converters="using:CalculatorApp.Converters"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
              mc:Ignorable="d">
     <UserControl.Resources>
         <ResourceDictionary>
-            <ResourceDictionary.ThemeDictionaries>
-                <ResourceDictionary x:Key="Default">
-                    <SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="#33EB5757"/>
-                    <SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="#FFEB5757"/>
-                </ResourceDictionary>
-                <ResourceDictionary x:Key="Light">
-                    <SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="#33EB5757"/>
-                    <SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="#FFEB5757"/>
-                </ResourceDictionary>
-                <ResourceDictionary x:Key="HighContrast">
-                    <SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
-                    <SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="Red"/>
-                </ResourceDictionary>
-            </ResourceDictionary.ThemeDictionaries>
             <Style x:Key="TrigUnitsRadioButtonStyle" TargetType="RadioButton">
                 <Setter Property="MinHeight" Value="38"/>
                 <Setter Property="MinWidth" Value="90"/>
@@ -86,15 +72,28 @@
                 <Setter Property="FontWeight" Value="Medium"/>
             </Style>
 
-            <Style x:Key="ErrorTextBoxStyle" TargetType="TextBox">
-                <Setter Property="BorderBrush" Value="{ThemeResource GraphSettingsErrorBorderBrush}"/>
-                <Setter Property="Background" Value="{ThemeResource GraphSettingsErrorBackgroundBrush}"/>
-            </Style>
             <DataTemplate x:Key="XYTextBoxHeaderTemplate" x:DataType="x:String">
                 <TextBlock FontSize="14" Text="{x:Bind}"/>
             </DataTemplate>
 
             <converters:BooleanNegationConverter x:Key="BooleanNegationConverter"/>
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceDictionary x:Key="Default">
+                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
+                    <SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="Light">
+                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
+                    <SolidColorBrush x:Key="TextControlForegroundFocused" Color="Black"/>
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="HighContrast">
+                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{StaticResource SystemColorButtonFaceColor}"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="{StaticResource SystemColorButtonFaceColor}"/>
+                    <SolidColorBrush x:Key="TextControlForegroundFocused" Color="{StaticResource SystemColorButtonTextColor}"/>
+                </ResourceDictionary>
+            </ResourceDictionary.ThemeDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
 
@@ -133,6 +132,7 @@
                 <TextBox x:Name="SettingsXMin"
                          x:Uid="GraphSettingsXMin"
                          MaxWidth="160"
+                         HorizontalAlignment="Left"
                          Style="{x:Bind SelectTextBoxStyle(ViewModel.XError, ViewModel.XMinError), Mode=OneWay}"
                          HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
                          PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
@@ -141,6 +141,7 @@
                          x:Uid="GraphSettingsXMax"
                          Grid.Column="2"
                          MaxWidth="160"
+                         HorizontalAlignment="Left"
                          Style="{x:Bind SelectTextBoxStyle(ViewModel.XError, ViewModel.XMaxError), Mode=OneWay}"
                          HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
                          PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
@@ -150,6 +151,7 @@
                          x:Uid="GraphSettingsYMin"
                          Grid.Row="2"
                          MaxWidth="160"
+                         HorizontalAlignment="Left"
                          Style="{x:Bind SelectTextBoxStyle(ViewModel.YError, ViewModel.YMinError), Mode=OneWay}"
                          HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
                          PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
@@ -159,6 +161,7 @@
                          Grid.Row="2"
                          Grid.Column="2"
                          MaxWidth="160"
+                         HorizontalAlignment="Left"
                          Style="{x:Bind SelectTextBoxStyle(ViewModel.YError, ViewModel.YMaxError), Mode=OneWay}"
                          HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
                          PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
@@ -223,8 +226,7 @@
                        AutomationProperties.HeadingLevel="Level2"/>
 
             <StackPanel Orientation="Vertical">
-                <RadioButton x:Uid="AlwaysLightTheme"
-                             IsChecked="{x:Bind IsMatchAppTheme, Mode=TwoWay, Converter={StaticResource BooleanNegationConverter}}"/>
+                <RadioButton x:Uid="AlwaysLightTheme" IsChecked="{x:Bind IsMatchAppTheme, Mode=TwoWay, Converter={StaticResource BooleanNegationConverter}}"/>
                 <RadioButton x:Uid="MatchAppTheme"
                              Margin="1,0"
                              IsChecked="{x:Bind IsMatchAppTheme, Mode=TwoWay}"/>
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml.cpp b/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml.cpp
index 4445c411..7bd0386a 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml.cpp
+++ b/src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml.cpp
@@ -39,11 +39,11 @@ Style ^ GraphingSettings::SelectTextBoxStyle(bool incorrectRange, bool error)
 {
     if (incorrectRange || error)
     {
-        return static_cast<::Style ^>(this->Resources->Lookup(L"ErrorTextBoxStyle"));
+        return static_cast<::Style ^>(Application::Current->Resources->Lookup(L"VariableTextErrorBoxStyle"));
     }
     else
     {
-        return nullptr;
+        return static_cast<::Style ^>(Application::Current->Resources->Lookup(L"ThemedVariableTextBoxStyle"));
     }
 }