From fe599e31f8c881ff73a1b759b0a2af3bc6915272 Mon Sep 17 00:00:00 2001
From: Rudy Huyn <rudyhuyn@gmail.com>
Date: Mon, 16 Dec 2019 10:41:35 -0800
Subject: [PATCH] Update graph tooltip design and content (#867)

* update graph tooltip

* modify font size
---
 .../GraphingCalculator.xaml                   | 31 ++++++++++++++-----
 .../GraphingCalculator.xaml.cpp               |  2 +-
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
index 5b1c815..acb5fda 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
@@ -231,6 +231,13 @@
                     <Style x:Key="ThemedGraphToggleButtonStyle"
                            BasedOn="{StaticResource GraphToggleButtonStyle}"
                            TargetType="ToggleButton"/>
+
+                    <Style x:Key="GraphTooltipStyle" TargetType="Border">
+                        <Setter Property="BorderBrush" Value="#e0e0e0"/>
+                        <Setter Property="BorderThickness" Value="1"/>
+                        <Setter Property="CornerRadius" Value="4"/>
+                        <Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementBrush}"/>
+                    </Style>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
                     <Style x:Key="ThemedSwitchModeToggleButtonStyle"
@@ -251,6 +258,12 @@
                     <Style x:Key="ThemedGraphToggleButtonStyle"
                            BasedOn="{StaticResource GraphToggleButtonStyle}"
                            TargetType="ToggleButton"/>
+                    <Style x:Key="GraphTooltipStyle" TargetType="Border">
+                        <Setter Property="BorderBrush" Value="#e0e0e0"/>
+                        <Setter Property="BorderThickness" Value="1"/>
+                        <Setter Property="CornerRadius" Value="4"/>
+                        <Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementBrush}"/>
+                    </Style>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
                     <Style x:Key="ThemedSwitchModeToggleButtonStyle" TargetType="ToggleButton"/>
@@ -264,6 +277,11 @@
                     <Style x:Key="ThemedGraphToggleButtonStyle" TargetType="ToggleButton">
                         <Setter Property="Margin" Value="1"/>
                     </Style>
+                    <Style x:Key="GraphTooltipStyle" TargetType="Border">
+                        <Setter Property="BorderBrush" Value="{ThemeResource ToolTipBorderBrush}"/>
+                        <Setter Property="BorderThickness" Value="{ThemeResource ToolTipBorderThemeThickness}"/>
+                        <Setter Property="Background" Value="{ThemeResource ToolTipBackground}"/>
+                    </Style>
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
         </ResourceDictionary>
@@ -368,8 +386,8 @@
                     VerticalAlignment="Top"
                     Style="{ThemeResource GraphControlCommandPanel}"
                     RequestedTheme="Light">
-                    <StackPanel Orientation="Horizontal">
-                        <ToggleButton x:Name="ActiveTracing"
+                <StackPanel Orientation="Horizontal">
+                    <ToggleButton x:Name="ActiveTracing"
                                   MinWidth="40"
                                   Margin="0,-1"
                                   Style="{ThemeResource ThemedGraphToggleButtonStyle}"
@@ -447,10 +465,7 @@
                     Padding="{ThemeResource ToolTipBorderThemePadding}"
                     HorizontalAlignment="Left"
                     VerticalAlignment="Top"
-                    Background="{ThemeResource ToolTipBackground}"
-                    BorderBrush="{ThemeResource ToolTipBorderBrush}"
-                    BorderThickness="{ThemeResource ToolTipBorderThemeThickness}"
-                    contract7Present:BackgroundSizing="OuterBorderEdge"
+                    Style="{ThemeResource GraphTooltipStyle}"
                     IsHitTestVisible="False"
                     SizeChanged="TraceValuePopup_SizeChanged"
                     Visibility="Collapsed">
@@ -459,8 +474,8 @@
                 </Border.RenderTransform>
                 <TextBlock x:Name="TraceValue"
                            Foreground="{ThemeResource ToolTipForeground}"
-                           AutomationProperties.LiveSetting="Polite"
-                           Text="x=0,y=0"/>
+                           FontSize="{ThemeResource ToolTipContentThemeFontSize}"
+                           AutomationProperties.LiveSetting="Polite"/>
             </Border>
         </Grid>
 
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
index cb76110..9c4ea69 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
@@ -152,7 +152,7 @@ void GraphingCalculator::OnTracePointChanged(Windows::Foundation::Point newPoint
     wstringstream traceValueString;
 
     // TODO: The below precision should ideally be dynamic based on the current scale of the graph.
-    traceValueString << "x=" << fixed << setprecision(1) << newPoint.X << ", y=" << fixed << setprecision(1) << newPoint.Y;
+    traceValueString << "(" << fixed << setprecision(1) << newPoint.X << ", " << fixed << setprecision(1) << newPoint.Y << ")";
 
     TraceValue->Text = ref new String(traceValueString.str().c_str());