Use path instead of glyph for active tracing (#910)

* Use path instead of glyph

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml

@@ -312,6 +312,11 @@
                         <Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementBrush}"/>
                     </Style>
                     <SolidColorBrush x:Key="SwitchToggleBackground" Color="#40000000"/>
+                    <Style x:Key="TracePointerPathStyle" TargetType="Path">
+                        <Setter Property="Fill" Value="White"/>
+                        <Setter Property="Stroke" Value="Black"/>
+                        <Setter Property="StrokeThickness" Value="1"/>
+                    </Style>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
                     <Style x:Key="ThemedSwitchModeToggleButtonStyle"
@@ -338,6 +343,11 @@
                         <Setter Property="CornerRadius" Value="4"/>
                         <Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementBrush}"/>
                     </Style>
+                    <Style x:Key="TracePointerPathStyle" TargetType="Path">
+                        <Setter Property="Fill" Value="White"/>
+                        <Setter Property="Stroke" Value="Black"/>
+                        <Setter Property="StrokeThickness" Value="1"/>
+                    </Style>
                     <SolidColorBrush x:Key="SwitchToggleBackground" Color="#60ffffff"/>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
@@ -358,6 +368,11 @@
                         <Setter Property="Background" Value="{ThemeResource ToolTipBackground}"/>
                     </Style>
                     <SolidColorBrush x:Key="SwitchToggleBackground" Color="{ThemeResource SystemColorWindowColor}"/>
+                    <Style x:Key="TracePointerPathStyle" TargetType="Path">
+                        <Setter Property="Fill" Value="{ThemeResource SystemColorHighlightTextColor}"/>
+                        <Setter Property="Stroke" Value="{ThemeResource SystemColorWindowTextColor}"/>
+                        <Setter Property="StrokeThickness" Value="2"/>
+                    </Style>
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
         </ResourceDictionary>
@@ -413,6 +428,7 @@
         <Grid x:Name="LeftGrid"
               Grid.Row="1"
               Padding="0,4,0,0"
+              SizeChanged="LeftGrid_SizeChanged"
               Visibility="{x:Bind ShouldDisplayPanel(IsSmallState, SwitchModeToggleButton.IsOn, x:True), Mode=OneWay}">
             <Grid.Resources>
                 <ResourceDictionary>
@@ -507,18 +523,17 @@
                     </Button>
                 </StackPanel>
             </Border>
-            <Border x:Name="TracePointer"
+            <Canvas>
-                    Width="16"
+                <Grid x:Name="TracePointer" Visibility="Collapsed">
-                    Height="18"
+                    <Border x:Name="CursorShadow"/>
-                    Margin="48,50,0,0"
+                    <Path x:Name="CursorPath"
-                    HorizontalAlignment="Left"
+                          Width="18"
-                    VerticalAlignment="Top"
+                          Height="18"
-                    Visibility="Collapsed">
+                          Style="{ThemeResource TracePointerPathStyle}"
-                <FontIcon Foreground="Red"
+                          Data="M0 0 l1371 1371 H538 l-538 538 Z"
-                          FontFamily="{StaticResource CalculatorFontFamily}"
+                          Stretch="Uniform"/>
-                          FontSize="18"
+                </Grid>
-                          Glyph="&#xE3B3;"/>
+            </Canvas>
-            </Border>
             <Border MinWidth="36"
                     Margin="0,0,12,12"
                     HorizontalAlignment="Right"

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp

@@ -48,12 +48,14 @@ using namespace Windows::UI::Xaml::Input;
 using namespace Windows::UI::Xaml::Media;
 using namespace Windows::UI::Xaml::Media::Imaging;
 using namespace Windows::UI::Popups;
+using namespace Windows::UI::ViewManagement;
 
 constexpr auto sc_ViewModelPropertyName = L"ViewModel";
 
 DEPENDENCY_PROPERTY_INITIALIZATION(GraphingCalculator, IsSmallState);
 
 GraphingCalculator::GraphingCalculator()
+    : m_accessibilitySettings{ ref new AccessibilitySettings() }
 {
     InitializeComponent();
 
@@ -82,6 +84,13 @@ GraphingCalculator::GraphingCalculator()
     virtualKey->Key = (VirtualKey)187; // OemAdd key
     virtualKey->Modifiers = VirtualKeyModifiers::Control;
     ZoomInButton->KeyboardAccelerators->Append(virtualKey);
+
+    // add shadow to the trace pointer
+    AddTracePointerShadow();
+    // hide the shadow in high contrast mode
+    CursorShadow->Visibility = m_accessibilitySettings->HighContrast ? ::Visibility::Collapsed : ::Visibility::Visible;
+    m_accessibilitySettings->HighContrastChanged +=
+        ref new TypedEventHandler<AccessibilitySettings ^, Object ^>(this, &GraphingCalculator::OnHighContrastChanged);
 }
 
 void GraphingCalculator::OnShowTracePopupChanged(bool newValue)
@@ -185,8 +194,8 @@ void GraphingCalculator::OnTracePointChanged(Point newPoint)
 void CalculatorApp::GraphingCalculator::OnPointerPointChanged(Windows::Foundation::Point newPoint)
 {
     // Move the pointer glyph to where it is supposed to be.
-    // because the glyph is centered and has some spacing, to get the point to properly line up with the glyph, move the x point over 2 px
+    Canvas::SetLeft(TracePointer, newPoint.X);
-    TracePointer->Margin = Thickness(newPoint.X - 2, newPoint.Y, 0, 0);
+    Canvas::SetTop(TracePointer, newPoint.Y);
 }
 
 GraphingCalculatorViewModel ^ GraphingCalculator::ViewModel::get()
@@ -537,6 +546,21 @@ void GraphingCalculator::DisplayGraphSettings()
     flyoutGraphSettings->ShowAt(GraphSettingsButton);
 }
 
+void CalculatorApp::GraphingCalculator::AddTracePointerShadow()
+{
+    auto compositor = ::Hosting::ElementCompositionPreview::GetElementVisual(CursorPath)->Compositor;
+    auto dropShadow = compositor->CreateDropShadow();
+    dropShadow->BlurRadius = 6;
+    dropShadow->Opacity = 0.33f;
+    dropShadow->Offset = ::Numerics::float3(2, 2, 0); 
+    dropShadow->Mask = CursorPath->GetAlphaMask();
+
+    auto shadowSpriteVisual = compositor->CreateSpriteVisual();
+    shadowSpriteVisual->Size = ::Numerics::float2(static_cast<float>(CursorPath->ActualWidth), static_cast<float>(CursorPath->ActualHeight));
+    shadowSpriteVisual->Shadow = dropShadow;
+    ::Hosting::ElementCompositionPreview::SetElementChildVisual(CursorShadow, shadowSpriteVisual);
+}
+
 void GraphingCalculator::OnSettingsFlyout_Closing(FlyoutBase ^ sender, FlyoutBaseClosingEventArgs ^ args)
 {
     auto flyout = static_cast<Flyout ^>(sender);
@@ -544,6 +568,18 @@ void GraphingCalculator::OnSettingsFlyout_Closing(FlyoutBase ^ sender, FlyoutBas
     args->Cancel = graphingSetting->CanBeClose();
 }
 
+void GraphingCalculator::LeftGrid_SizeChanged(Object ^ /*sender*/, SizeChangedEventArgs ^ e)
+{
+    // Initialize the pointer to the correct location to match initial value in GraphControl\DirectX\RenderMain.cpp
+    Canvas::SetLeft(TracePointer, e->NewSize.Width / 2 + 40);
+    Canvas::SetTop(TracePointer, e->NewSize.Height / 2 - 40);
+}
+
+void GraphingCalculator::OnHighContrastChanged(AccessibilitySettings ^ sender, Object ^ /*args*/)
+{
+    CursorShadow->Visibility = sender->HighContrast ? ::Visibility::Collapsed : ::Visibility::Visible;
+}
+
 void GraphingCalculator::OnEquationFormatRequested(Object ^ sender, MathRichEditBoxFormatRequest ^ e)
 {
     if (!e->OriginalText->IsEmpty())

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h

@@ -74,6 +74,7 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
         void GraphSettingsButton_Click(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
         void SwitchModeToggleButton_Toggled(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
         void DisplayGraphSettings();
+        void AddTracePointerShadow();
 
     private:
         Windows::Foundation::EventRegistrationToken m_dataRequestedToken;
@@ -82,8 +83,11 @@ public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INo
         Windows::Foundation::EventRegistrationToken m_activeTracingKeyUpToken;
         Windows::Foundation::EventRegistrationToken m_ActiveTracingPointerCaptureLost;
         CalculatorApp::ViewModel::GraphingCalculatorViewModel ^ m_viewModel;
+        Windows::UI::ViewManagement::AccessibilitySettings ^ m_accessibilitySettings;
         void
             OnSettingsFlyout_Closing(Windows::UI::Xaml::Controls::Primitives::FlyoutBase ^ sender, Windows::UI::Xaml::Controls::Primitives::FlyoutBaseClosingEventArgs ^ args);
+        void LeftGrid_SizeChanged(Platform::Object ^ sender, Windows::UI::Xaml::SizeChangedEventArgs ^ e);
+        void OnHighContrastChanged(Windows::UI::ViewManagement::AccessibilitySettings ^ sender, Platform::Object ^ args);
         void OnEquationFormatRequested(Platform::Object ^ sender, CalculatorApp::Controls::MathRichEditBoxFormatRequest ^ e);
     };
 

src/Calculator/pch.h

@@ -29,6 +29,7 @@
 #include <string>
 #include <tuple>
 #include <iomanip>
+#include <WindowsNumerics.h>
 
 // C++\WinRT Headers
 #include "winrt/base.h"

src/GraphControl/DirectX/RenderMain.cpp

@@ -44,8 +44,6 @@ namespace GraphControl::DX
         RegisterEventHandlers();
 
         m_drawActiveTracing = false;
-        m_activeTracingPointerLocation.X = 50;
-        m_activeTracingPointerLocation.Y = 50;
     }
 
     RenderMain::~RenderMain()
@@ -65,6 +63,7 @@ namespace GraphControl::DX
                 renderer->SetDpi(dpi, dpi);
 
                 renderer->SetGraphSize(static_cast<unsigned int>(m_swapChainPanel->ActualWidth), static_cast<unsigned int>(m_swapChainPanel->ActualHeight));
+              
             }
         }
     }
@@ -120,6 +119,13 @@ namespace GraphControl::DX
     {
         // TODO: Replace this with the sizedependent initialization of your app's content.
         RunRenderPass();
+
+        if (m_swapChainPanel != nullptr)
+        {
+            // Initialize the active tracing location to just above and to the right of the center of the graph area
+            m_activeTracingPointerLocation.X = m_swapChainPanel->ActualWidth / 2 + 40;
+            m_activeTracingPointerLocation.Y = m_swapChainPanel->ActualHeight / 2 - 40;
+        }
     }
 
     bool RenderMain::RunRenderPass()