Adds zoom buttons to graph controls (#637)

src/Calculator/Resources/en-US/Resources.resw

@@ -3435,6 +3435,42 @@
     <value>^</value>
     <comment>{Locked}This is the character that should trigger this button. Note that it is a character and not a key, so it does not come from the Windows::System::VirtualKey enum.</comment>
   </data>
+  <data name="zoomResetButton.[using:CalculatorApp.Common]KeyboardShortcutManager.VirtualKeyControlChord" xml:space="preserve">
+    <value>Home</value>
+    <comment>{Locked}This is the shortcut for the zoom reset button.</comment>
+  </data>
+  <data name="zoomResetButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
+    <value>Reset View</value>
+    <comment>This is the tool tip automation name for the Calculator zoom reset button.</comment>
+  </data>
+  <data name="zoomResetButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Reset View</value>
+    <comment>Screen reader prompt for the reset zoom button.</comment>
+  </data>
+  <data name="zoomInButton.[using:CalculatorApp.Common]KeyboardShortcutManager.VirtualKeyControlChord" xml:space="preserve">
+    <value>Add</value>
+    <comment>{Locked}This is the shortcut for the zoom in button.</comment>
+  </data>
+  <data name="zoomInButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
+    <value>Zoom In</value>
+    <comment>This is the tool tip automation name for the Calculator zoom in button.</comment>
+  </data>
+  <data name="zoomInButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Zoom In</value>
+    <comment>Screen reader prompt for the zoom in button.</comment>
+  </data>
+  <data name="zoomOutButton.[using:CalculatorApp.Common]KeyboardShortcutManager.VirtualKeyControlChord" xml:space="preserve">
+    <value>Subtract</value>
+    <comment>{Locked}This is the shortcut for the zoom out button.</comment>
+  </data>
+  <data name="zoomOutButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
+    <value>Zoom Out</value>
+    <comment>This is the tool tip automation name for the Calculator zoom out button.</comment>
+  </data>
+  <data name="zoomOutButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Zoom Out</value>
+    <comment>Screen reader prompt for the zoom out button.</comment>
+  </data>
   <data name="EquationInputButtonPlaceholderText" xml:space="preserve">
     <value>Add Equation</value>
     <comment>Placeholder text for the equation input button</comment>

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml

@@ -12,6 +12,22 @@
              mc:Ignorable="d">
 
     <UserControl.Resources>
+        <Style x:Key="ZoomRepeatButtonStyle" TargetType="RepeatButton">
+            <Setter Property="Width" Value="36"/>
+            <Setter Property="Height" Value="36"/>
+            <Setter Property="CornerRadius" Value="18"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="FontSize" Value="12"/>
+            <Setter Property="Delay" Value="500"/>
+            <Setter Property="Interval" Value="40"/>
+        </Style>
+        <Style x:Key="ZoomButtonStyle" TargetType="Button">
+            <Setter Property="Width" Value="36"/>
+            <Setter Property="Height" Value="36"/>
+            <Setter Property="CornerRadius" Value="18"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="FontSize" Value="12"/>
+        </Style>
         <converters:BooleanToVisibilityConverter x:Name="BooleanToVisibilityConverter"/>
         <converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>
     </UserControl.Resources>
@@ -30,8 +46,7 @@
         <Grid x:Name="LeftGrid"
               Grid.Row="1"
               Grid.Column="0">
-
+            <graphControl:Grapher Name="GraphingControl"
-            <graphControl:Grapher Name="GraphingControl" Grid.Row="0"
                                   Margin="4,7,4,4"
                                   EquationsSource="{x:Bind ViewModel.Equations, Mode=OneWay}"
                                   ForceProportionalAxes="True"
@@ -215,6 +230,130 @@
                     </Flyout>
                 </Button.Flyout>
             </Button>
+
+            <Grid>
+                <Grid.Resources>
+                    <ResourceDictionary>
+                        <ResourceDictionary.ThemeDictionaries>
+                            <ResourceDictionary x:Key="Default">
+                                <SolidColorBrush x:Key="RepeatButtonBackground" Color="White"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundPointerOver" Color="White"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundPressed" Color="White"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundDisabled" Color="White"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrush"
+                                                 Opacity="0.6"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushPointerOver"
+                                                 Opacity="0.8"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushPressed"
+                                                 Opacity="1.0"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushDisabled"
+                                                 Opacity="0.2"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="RepeatButtonForeground"
+                                                 Opacity="0.6"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundPointerOver"
+                                                 Opacity="0.8"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundPressed"
+                                                 Opacity="1.0"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundDisabled"
+                                                 Opacity="0.2"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="ButtonBackground" Color="White"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="White"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="White"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="White"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrush"
+                                                 Opacity="0.6"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
+                                                 Opacity="0.8"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushPressed"
+                                                 Opacity="1.0"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushDisabled"
+                                                 Opacity="0.2"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="ButtonForeground"
+                                                 Opacity="0.6"
+                                                 Color="Black"/>
+                                <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                 Opacity="0.8"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                 Opacity="1.0"
+                                                 Color="{ThemeResource SystemAccentColor}"/>
+                                <SolidColorBrush x:Key="ButtonForegroundDisabled"
+                                                 Opacity="0.2"
+                                                 Color="Black"/>
+                            </ResourceDictionary>
+                            <ResourceDictionary x:Key="HighContrast">
+                                <SolidColorBrush x:Key="RepeatButtonBackground" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundPointerOver" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundPressed" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBackgroundDisabled" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrush" Color="{ThemeResource SystemColorWindowTextColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonBorderBrushDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForeground" Color="{ThemeResource SystemColorWindowTextColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="RepeatButtonForegroundDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
+                                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrush" Color="{ThemeResource SystemColorWindowTextColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="ButtonBorderBrushDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
+                                <SolidColorBrush x:Key="ButtonForeground" Color="{ThemeResource SystemColorWindowTextColor}"/>
+                                <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                <SolidColorBrush x:Key="ButtonForegroundDisabled" Color="{ThemeResource SystemColorGrayTextColor}"/>
+                            </ResourceDictionary>
+                        </ResourceDictionary.ThemeDictionaries>
+                    </ResourceDictionary>
+                </Grid.Resources>
+
+                <RepeatButton x:Uid="zoomInButton"
+                              Margin="0,0,12,108"
+                              HorizontalAlignment="Right"
+                              VerticalAlignment="Bottom"
+                              Style="{ThemeResource ZoomRepeatButtonStyle}"
+                              FontFamily="{StaticResource SymbolThemeFontFamily}"
+                              AutomationProperties.AutomationId="zoomInButton"
+                              Command="{x:Bind ZoomInButtonPressed, Mode=OneTime}"
+                              Content="&#xE710;"/>
+
+                <RepeatButton x:Uid="zoomOutButton"
+                              Margin="0,0,12,60"
+                              HorizontalAlignment="Right"
+                              VerticalAlignment="Bottom"
+                              Style="{ThemeResource ZoomRepeatButtonStyle}"
+                              FontFamily="{StaticResource SymbolThemeFontFamily}"
+                              AutomationProperties.AutomationId="zoomOutButton"
+                              Command="{x:Bind ZoomOutButtonPressed, Mode=OneTime}"
+                              Content="&#xE738;"/>
+
+                <Button x:Uid="zoomResetButton"
+                        Margin="0,0,12,12"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Bottom"
+                        Style="{ThemeResource ZoomButtonStyle}"
+                        FontFamily="{StaticResource SymbolThemeFontFamily}"
+                        AutomationProperties.AutomationId="zoomResetButton"
+                        Command="{x:Bind ZoomResetButtonPressed, Mode=OneTime}"
+                        Content="&#xE895;"/>
+            </Grid>
+
         </Grid>
 
         <!-- Right portion of the screen -->

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

@@ -242,3 +242,18 @@ void GraphingCalculator::TextBoxGotFocus(TextBox^ sender, RoutedEventArgs^ e)
 {
     sender->SelectAll();
 }
+
+void GraphingCalculator::OnZoomInCommand(Object ^ /* parameter */)
+{
+    GraphingControl->ZoomFromCenter(zoomInScale);
+}
+
+void GraphingCalculator::OnZoomOutCommand(Object ^ /* parameter */)
+{
+    GraphingControl->ZoomFromCenter(zoomOutScale);
+}
+
+void GraphingCalculator::OnZoomResetCommand(Object ^ /* parameter */)
+{
+    GraphingControl->ResetGrid();
+}

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

@@ -6,12 +6,18 @@
 
 namespace CalculatorApp
 {
+    constexpr double zoomInScale = 1 / 1.0625;
+    constexpr double zoomOutScale = 1.0625;
+
     public ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INotifyPropertyChanged
     {
     public:
         GraphingCalculator();
 
         OBSERVABLE_OBJECT();
+        COMMAND_FOR_METHOD(ZoomOutButtonPressed, GraphingCalculator::OnZoomOutCommand);
+        COMMAND_FOR_METHOD(ZoomInButtonPressed, GraphingCalculator::OnZoomInCommand);
+        COMMAND_FOR_METHOD(ZoomResetButtonPressed, GraphingCalculator::OnZoomResetCommand);
 
         property CalculatorApp::ViewModel::GraphingCalculatorViewModel^ ViewModel
         {
@@ -29,6 +35,10 @@ namespace CalculatorApp
         void TextBoxKeyDown(Windows::UI::Xaml::Controls::TextBox^ textbox, Windows::UI::Xaml::Input::KeyRoutedEventArgs^ e);
         void SubmitTextbox(Windows::UI::Xaml::Controls::TextBox^ textbox);
 
+        void OnZoomInCommand(Object ^ parameter);
+        void OnZoomOutCommand(Object ^ parameter);
+        void OnZoomResetCommand(Object ^ parameter);
+
         double validateDouble(Platform::String^ value, double defaultValue);
 
         CalculatorApp::ViewModel::GraphingCalculatorViewModel^ m_viewModel;

src/GraphControl/Control/Grapher.cpp

@@ -92,6 +92,11 @@ namespace GraphControl
         }
     }
 
+    void Grapher::ZoomFromCenter(double scale)
+    {
+        ScaleRange(0, 0, scale);
+    }
+
     void Grapher::ScaleRange(double centerX, double centerY, double scale)
     {
         if (m_graph != nullptr && m_renderMain != nullptr)
@@ -106,6 +111,20 @@ namespace GraphControl
         }
     }
 
+    void Grapher::ResetGrid()
+    {
+        if (m_graph != nullptr && m_renderMain != nullptr)
+        {
+            if (auto renderer = m_graph->GetRenderer())
+            {
+                if (SUCCEEDED(renderer->ResetRange()))
+                {
+                    m_renderMain->RunRenderPass();
+                }
+            }
+        }
+    }
+
     void Grapher::OnApplyTemplate()
     {
         auto swapChainPanel = dynamic_cast<SwapChainPanel^>(GetTemplateChild(StringReference(s_templateKey_SwapChainPanel)));

src/GraphControl/Control/Grapher.h

@@ -127,6 +127,8 @@ namespace GraphControl
         event Windows::Foundation::EventHandler<Windows::Foundation::Collections::IMap<Platform::String^, double>^>^ VariablesUpdated;
 
         void SetVariable(Platform::String^ variableName, double newValue);
+        void ZoomFromCenter(double scale);
+        void ResetGrid();
 
     protected:
         #pragma region Control Overrides