From 7ef6eaf1b677c4e6f986de6ac84780caacfeb771 Mon Sep 17 00:00:00 2001
From: Rudy Huyn <rudyhuyn@gmail.com>
Date: Fri, 22 Nov 2019 10:36:36 -0800
Subject: [PATCH] Added support for small windows in the graphing calculator
 (#803)

* Add support of small windows

* remove extra space

* Modify how we manage the tooltip

* Fix merge issues
---
 .../Automation/NarratorAnnouncement.cpp       |  10 +
 .../Common/Automation/NarratorAnnouncement.h  |   3 +
 src/Calculator/Calculator.vcxproj.filters     |   6 -
 src/Calculator/Resources/en-US/Resources.resw |  22 +-
 .../GraphingCalculator.xaml                   | 554 ++++++++++++------
 .../GraphingCalculator.xaml.cpp               |  79 ++-
 .../GraphingCalculator.xaml.h                 |  33 +-
 src/Calculator/Views/MainPage.xaml            |   2 +-
 8 files changed, 504 insertions(+), 205 deletions(-)

diff --git a/src/CalcViewModel/Common/Automation/NarratorAnnouncement.cpp b/src/CalcViewModel/Common/Automation/NarratorAnnouncement.cpp
index 5b6d99b..33825b0 100644
--- a/src/CalcViewModel/Common/Automation/NarratorAnnouncement.cpp
+++ b/src/CalcViewModel/Common/Automation/NarratorAnnouncement.cpp
@@ -22,6 +22,7 @@ namespace CalculatorApp::Common::Automation
         StringReference DisplayCopied(L"DisplayCopied");
         StringReference OpenParenthesisCountChanged(L"OpenParenthesisCountChanged");
         StringReference NoParenthesisAdded(L"NoParenthesisAdded");
+        StringReference GraphModeChanged(L"GraphModeChanged");
     }
 }
 
@@ -139,3 +140,12 @@ NarratorAnnouncement ^ CalculatorAnnouncement::GetNoRightParenthesisAddedAnnounc
         AutomationNotificationKind::ActionCompleted,
         AutomationNotificationProcessing::ImportantMostRecent);
 }
+
+NarratorAnnouncement ^ CalculatorAnnouncement::GetGraphModeChangedAnnouncement(Platform::String ^ announcement)
+{
+    return ref new NarratorAnnouncement(
+        announcement,
+        CalculatorActivityIds::GraphModeChanged,
+        AutomationNotificationKind::ActionCompleted,
+        AutomationNotificationProcessing::ImportantMostRecent);
+}
diff --git a/src/CalcViewModel/Common/Automation/NarratorAnnouncement.h b/src/CalcViewModel/Common/Automation/NarratorAnnouncement.h
index c4c0c52..e508675 100644
--- a/src/CalcViewModel/Common/Automation/NarratorAnnouncement.h
+++ b/src/CalcViewModel/Common/Automation/NarratorAnnouncement.h
@@ -92,5 +92,8 @@ public
 
         static NarratorAnnouncement ^ GetOpenParenthesisCountChangedAnnouncement(Platform::String ^ announcement);
         static NarratorAnnouncement ^ GetNoRightParenthesisAddedAnnouncement(Platform::String ^ announcement);
+
+        static NarratorAnnouncement ^ GetGraphModeChangedAnnouncement(Platform::String ^ announcement);
+
     };
 }
diff --git a/src/Calculator/Calculator.vcxproj.filters b/src/Calculator/Calculator.vcxproj.filters
index 1a9988b..6f8b28c 100644
--- a/src/Calculator/Calculator.vcxproj.filters
+++ b/src/Calculator/Calculator.vcxproj.filters
@@ -1489,11 +1489,5 @@
   <ItemGroup>
     <CopyFileToFolders Include="$(GraphingImplDll)" />
     <CopyFileToFolders Include="$(GraphingEngineDll)" />
-    <CopyFileToFolders Include="$(GraphingImplDll)" />
-    <CopyFileToFolders Include="$(GraphingEngineDll)" />
-    <CopyFileToFolders Include="$(GraphingImplDll)" />
-    <CopyFileToFolders Include="$(GraphingEngineDll)" />
-    <CopyFileToFolders Include="$(GraphingImplDll)" />
-    <CopyFileToFolders Include="$(GraphingEngineDll)" />
   </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/src/Calculator/Resources/en-US/Resources.resw b/src/Calculator/Resources/en-US/Resources.resw
index f014efb..6a1b8c0 100644
--- a/src/Calculator/Resources/en-US/Resources.resw
+++ b/src/Calculator/Resources/en-US/Resources.resw
@@ -3698,4 +3698,24 @@
     <value>Unable to calculate the range for this function.</value>
     <comment>Error displayed when Range is not returned from the analyzer.</comment>
   </data>
-</root>
+  <data name="GraphSwitchToEquationMode" xml:space="preserve">
+    <value>Switch to equation mode</value>
+    <comment>Used in Graphing Calculator to switch the view to the equation mode</comment>
+  </data>
+  <data name="GraphSwitchToGraphMode" xml:space="preserve">
+    <value>Switch to graph mode</value>
+    <comment>Used in Graphing Calculator to switch the view to the graph mode</comment>
+  </data>
+  <data name="SwitchModeToggleButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Switch to equation mode</value>
+    <comment>Used in Graphing Calculator to switch the view to the equation mode</comment>
+  </data>
+  <data name="GraphSwitchedToEquationModeAnnouncement" xml:space="preserve">
+    <value>Current mode is equation mode</value>
+    <comment>Announcement used in Graphing Calculator when switching to the equation mode</comment>
+  </data>
+  <data name="GraphSwitchedToGraphModeAnnouncement" xml:space="preserve">
+    <value>Current mode is graph mode</value>
+    <comment>Announcement used in Graphing Calculator when switching to the graph mode</comment>
+  </data>
+</root>
\ No newline at end of file
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
index 3a83f90..8947a61 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
@@ -1,6 +1,7 @@
 <UserControl x:Class="CalculatorApp.GraphingCalculator"
              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:controls="using:CalculatorApp.Controls"
              xmlns:converters="using:CalculatorApp.Converters"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -8,162 +9,326 @@
              xmlns:local="using:CalculatorApp"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:vm="using:CalculatorApp.ViewModel"
+             x:Name="Control"
              DataContextChanged="GraphingCalculator_DataContextChanged"
              mc:Ignorable="d">
 
     <UserControl.Resources>
-        <Style x:Key="GraphButtonStyle" TargetType="Button">
-            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
-            <Setter Property="Background" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
-            <Setter Property="BorderThickness" Value="1"/>
-            <Setter Property="Margin" Value="0"/>
-            <Setter Property="Padding" Value="8"/>
-            <Setter Property="HorizontalAlignment" Value="Stretch"/>
-            <Setter Property="VerticalAlignment" Value="Stretch"/>
-            <Setter Property="HorizontalContentAlignment" Value="Center"/>
-            <Setter Property="VerticalContentAlignment" Value="Center"/>
-            <Setter Property="FontSize" Value="{StaticResource CaptionFontSize}"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="Button">
-                        <ContentPresenter x:Name="ContentPresenter"
-                                          Padding="{TemplateBinding Padding}"
-                                          HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                                          VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                          Background="{TemplateBinding Background}"
-                                          BorderBrush="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"
-                                          BorderThickness="{TemplateBinding BorderThickness}"
-                                          FontSize="{TemplateBinding FontSize}"
-                                          FontWeight="SemiBold"
-                                          AutomationProperties.AccessibilityView="Raw"
-                                          Content="{TemplateBinding Content}"
-                                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                                          ContentTransitions="{TemplateBinding ContentTransitions}">
-                            <VisualStateManager.VisualStateGroups>
-                                <VisualStateGroup x:Name="CommonStates">
-                                    <VisualState x:Name="Normal"/>
-                                    <VisualState x:Name="PointerOver">
-                                        <VisualState.Setters>
-                                            <Setter Target="ContentPresenter.Background" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
-                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
-                                        </VisualState.Setters>
-                                    </VisualState>
-                                    <VisualState x:Name="Pressed">
-                                        <VisualState.Setters>
-                                            <Setter Target="ContentPresenter.Background" Value="{ThemeResource AppControlPressedButtonFaceBrush}"/>
-                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
-                                        </VisualState.Setters>
-                                    </VisualState>
-                                    <VisualState x:Name="Disabled">
-                                        <VisualState.Setters>
-                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
-                                        </VisualState.Setters>
-                                    </VisualState>
-                                </VisualStateGroup>
-                            </VisualStateManager.VisualStateGroups>
-                        </ContentPresenter>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
+        <ResourceDictionary>
+            <Style x:Key="GraphButtonStyle" TargetType="Button">
+                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
+                <Setter Property="Background" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
+                <Setter Property="BorderThickness" Value="1"/>
+                <Setter Property="Margin" Value="0"/>
+                <Setter Property="Padding" Value="8"/>
+                <Setter Property="HorizontalAlignment" Value="Stretch"/>
+                <Setter Property="VerticalAlignment" Value="Stretch"/>
+                <Setter Property="HorizontalContentAlignment" Value="Center"/>
+                <Setter Property="VerticalContentAlignment" Value="Center"/>
+                <Setter Property="FontSize" Value="{StaticResource CaptionFontSize}"/>
+                <Setter Property="Template">
+                    <Setter.Value>
+                        <ControlTemplate TargetType="Button">
+                            <ContentPresenter x:Name="ContentPresenter"
+                                              Padding="{TemplateBinding Padding}"
+                                              HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                                              VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                              Background="{TemplateBinding Background}"
+                                              BorderBrush="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"
+                                              BorderThickness="{TemplateBinding BorderThickness}"
+                                              FontSize="{TemplateBinding FontSize}"
+                                              FontWeight="SemiBold"
+                                              AutomationProperties.AccessibilityView="Raw"
+                                              Content="{TemplateBinding Content}"
+                                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                                              ContentTransitions="{TemplateBinding ContentTransitions}">
+                                <VisualStateManager.VisualStateGroups>
+                                    <VisualStateGroup x:Name="CommonStates">
+                                        <VisualState x:Name="Normal"/>
+                                        <VisualState x:Name="PointerOver">
+                                            <VisualState.Setters>
+                                                <Setter Target="ContentPresenter.Background" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                        <VisualState x:Name="Pressed">
+                                            <VisualState.Setters>
+                                                <Setter Target="ContentPresenter.Background" Value="{ThemeResource AppControlPressedButtonFaceBrush}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                        <VisualState x:Name="Disabled">
+                                            <VisualState.Setters>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                    </VisualStateGroup>
+                                </VisualStateManager.VisualStateGroups>
+                            </ContentPresenter>
+                        </ControlTemplate>
+                    </Setter.Value>
+                </Setter>
+            </Style>
 
-        <Style x:Key="GraphRepeatButtonStyle" TargetType="RepeatButton">
-            <Setter Property="Background" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
-            <Setter Property="Foreground" Value="{ThemeResource RepeatButtonForeground}"/>
-            <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
-            <Setter Property="BorderThickness" Value="1"/>
-            <Setter Property="Margin" Value="0"/>
-            <Setter Property="Padding" Value="0"/>
-            <Setter Property="HorizontalAlignment" Value="Stretch"/>
-            <Setter Property="VerticalAlignment" Value="Stretch"/>
-            <Setter Property="HorizontalContentAlignment" Value="Center"/>
-            <Setter Property="VerticalContentAlignment" Value="Center"/>
-            <Setter Property="Delay" Value="500"/>
-            <Setter Property="Interval" Value="40"/>
-            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
-            <Setter Property="FontWeight" Value="Normal"/>
-            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
-            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
-            <Setter Property="FocusVisualMargin" Value="-3"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="RepeatButton">
-                        <ContentPresenter x:Name="ContentPresenter"
-                                          Padding="{TemplateBinding Padding}"
-                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                          Background="{TemplateBinding Background}"
-                                          BorderBrush="{TemplateBinding BorderBrush}"
-                                          BorderThickness="{TemplateBinding BorderThickness}"
-                                          AutomationProperties.AccessibilityView="Raw"
-                                          Content="{TemplateBinding Content}"
-                                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                                          ContentTransitions="{TemplateBinding ContentTransitions}"
-                                          CornerRadius="{TemplateBinding CornerRadius}">
+            <Style x:Key="GraphRepeatButtonStyle" TargetType="RepeatButton">
+                <Setter Property="Background" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
+                <Setter Property="Foreground" Value="{ThemeResource RepeatButtonForeground}"/>
+                <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
+                <Setter Property="BorderThickness" Value="1"/>
+                <Setter Property="Margin" Value="0"/>
+                <Setter Property="Padding" Value="0"/>
+                <Setter Property="HorizontalAlignment" Value="Stretch"/>
+                <Setter Property="VerticalAlignment" Value="Stretch"/>
+                <Setter Property="HorizontalContentAlignment" Value="Center"/>
+                <Setter Property="VerticalContentAlignment" Value="Center"/>
+                <Setter Property="Delay" Value="500"/>
+                <Setter Property="Interval" Value="40"/>
+                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
+                <Setter Property="FontWeight" Value="Normal"/>
+                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
+                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
+                <Setter Property="FocusVisualMargin" Value="-3"/>
+                <Setter Property="Template">
+                    <Setter.Value>
+                        <ControlTemplate TargetType="RepeatButton">
+                            <ContentPresenter x:Name="ContentPresenter"
+                                              Padding="{TemplateBinding Padding}"
+                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                              Background="{TemplateBinding Background}"
+                                              BorderBrush="{TemplateBinding BorderBrush}"
+                                              BorderThickness="{TemplateBinding BorderThickness}"
+                                              AutomationProperties.AccessibilityView="Raw"
+                                              Content="{TemplateBinding Content}"
+                                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                                              ContentTransitions="{TemplateBinding ContentTransitions}"
+                                              CornerRadius="{TemplateBinding CornerRadius}">
+                                <VisualStateManager.VisualStateGroups>
+                                    <VisualStateGroup x:Name="CommonStates">
+                                        <VisualState x:Name="Normal"/>
 
-                            <VisualStateManager.VisualStateGroups>
-                                <VisualStateGroup x:Name="CommonStates">
-                                    <VisualState x:Name="Normal"/>
+                                        <VisualState x:Name="PointerOver">
 
-                                    <VisualState x:Name="PointerOver">
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
 
-                                        <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
+                                        <VisualState x:Name="Pressed">
 
-                                    <VisualState x:Name="Pressed">
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
 
-                                        <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlForegroundAccentBrush}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
+                                        <VisualState x:Name="Disabled">
 
-                                    <VisualState x:Name="Disabled">
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RepeatButtonBorderBrushDisabled}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RepeatButtonForegroundDisabled}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
 
-                                        <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RepeatButtonBorderBrushDisabled}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RepeatButtonForegroundDisabled}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
+                                    </VisualStateGroup>
 
-                                </VisualStateGroup>
+                                </VisualStateManager.VisualStateGroups>
+                            </ContentPresenter>
 
-                            </VisualStateManager.VisualStateGroups>
-                        </ContentPresenter>
+                        </ControlTemplate>
+                    </Setter.Value>
+                </Setter>
+            </Style>
 
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
+            <Style x:Key="SwitchModeToggleButtonStyle" TargetType="ToggleButton">
+                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
+                <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundTransparentBrush}"/>
+                <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
+                <Setter Property="BorderThickness" Value="1"/>
+                <Setter Property="Padding" Value="{ThemeResource ButtonPadding}"/>
+                <Setter Property="HorizontalAlignment" Value="Left"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
+                <Setter Property="FontWeight" Value="Normal"/>
+                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
+                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
+                <Setter Property="FocusVisualMargin" Value="-3"/>
+                <Setter Property="Template">
+                    <Setter.Value>
+                        <ControlTemplate TargetType="ToggleButton">
+                            <Grid x:Name="RootGrid"
+                                  Background="{TemplateBinding Background}"
+                                  CornerRadius="{TemplateBinding CornerRadius}">
+                                <VisualStateManager.VisualStateGroups>
+                                    <VisualStateGroup x:Name="CommonStates">
+                                        <VisualState x:Name="Normal">
+                                            <Storyboard>
+                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="PointerOver">
+                                            <VisualState.Setters>
+                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver"/>
+                                                <Setter Target="RootGrid.Background" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
+                                            </VisualState.Setters>
+                                            <Storyboard>
+                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="Pressed">
+                                            <VisualState.Setters>
+                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed"/>
+                                                <Setter Target="RootGrid.Background" Value="{ThemeResource AppControlPressedButtonFaceBrush}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
+                                            </VisualState.Setters>
+                                            <Storyboard>
+                                                <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="Disabled">
+                                            <VisualState.Setters>
+                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundDisabled}"/>
+                                                <Setter Target="ContentPresenter.Opacity" Value="0.5"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                        <VisualState x:Name="Checked">
+                                            <VisualState.Setters>
+                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ToggleButtonRevealBorderBrushChecked}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemAccentColor}"/>
+                                            </VisualState.Setters>
+                                            <Storyboard>
+                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="CheckedPointerOver">
+                                            <VisualState.Setters>
+                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver"/>
+                                                <Setter Target="RootGrid.Background" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemAccentColor}"/>
+                                            </VisualState.Setters>
+                                            <Storyboard>
+                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="CheckedPressed">
+                                            <VisualState.Setters>
+                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed"/>
+                                                <Setter Target="RootGrid.Background" Value="{ThemeResource AppControlPressedButtonFaceBrush}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemAccentColor}"/>
+                                            </VisualState.Setters>
+                                            <Storyboard>
+                                                <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="CheckedDisabled">
+                                            <VisualState.Setters>
+                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundDisabled}"/>
+                                                <Setter Target="ContentPresenter.Opacity" Value="0.5"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemAccentColor}"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                        <VisualState x:Name="Indeterminate">
+                                            <VisualState.Setters>
+                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundIndeterminate}"/>
+                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ToggleButtonRevealBorderBrushIndeterminate}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundIndeterminate}"/>
+                                            </VisualState.Setters>
+                                            <Storyboard>
+                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="IndeterminatePointerOver">
+                                            <VisualState.Setters>
+                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver"/>
+                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundIndeterminatePointerOver}"/>
+                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ToggleButtonRevealBorderBrushIndeterminatePointerOver}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundIndeterminatePointerOver}"/>
+                                            </VisualState.Setters>
+                                            <Storyboard>
+                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="IndeterminatePressed">
+                                            <VisualState.Setters>
+                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed"/>
+                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundIndeterminatePressed}"/>
+                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ToggleButtonRevealBorderBrushIndeterminatePressed}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundIndeterminatePressed}"/>
+                                            </VisualState.Setters>
+                                            <Storyboard>
+                                                <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="IndeterminateDisabled">
+                                            <VisualState.Setters>
+                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundIndeterminateDisabled}"/>
+                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ToggleButtonRevealBorderBrushIndeterminateDisabled}"/>
+                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundIndeterminateDisabled}"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                    </VisualStateGroup>
+                                </VisualStateManager.VisualStateGroups>
+                                <ContentPresenter x:Name="ContentPresenter"
+                                                  Padding="{TemplateBinding Padding}"
+                                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                                  BorderThickness="{TemplateBinding BorderThickness}"
+                                                  AutomationProperties.AccessibilityView="Raw"
+                                                  Content="{TemplateBinding Content}"
+                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
+                                                  CornerRadius="{TemplateBinding CornerRadius}"/>
+                            </Grid>
+                        </ControlTemplate>
+                    </Setter.Value>
+                </Setter>
+            </Style>
 
-        <converters:BooleanToVisibilityConverter x:Name="BooleanToVisibilityConverter"/>
-        <converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>
+            <converters:BooleanToVisibilityConverter x:Name="BooleanToVisibilityConverter"/>
+            <converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceDictionary x:Key="Default">
+                    <Style x:Key="ThemedSwitchModeToggleButtonStyle"
+                           BasedOn="{StaticResource SwitchModeToggleButtonStyle}"
+                           TargetType="ToggleButton"/>
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="Dark">
+                    <Style x:Key="ThemedSwitchModeToggleButtonStyle"
+                           BasedOn="{StaticResource SwitchModeToggleButtonStyle}"
+                           TargetType="ToggleButton"/>
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="HighContrast">
+                    <Style x:Key="ThemedSwitchModeToggleButtonStyle" TargetType="ToggleButton"/>
+                </ResourceDictionary>
+            </ResourceDictionary.ThemeDictionaries>
+        </ResourceDictionary>
     </UserControl.Resources>
 
     <Grid x:Name="RootGrid">
@@ -175,11 +340,49 @@
             <ColumnDefinition Width="2*"/>
             <ColumnDefinition Width="1*"/>
         </Grid.ColumnDefinitions>
-
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup>
+                <VisualState x:Name="ColumnsState">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="800"/>
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState x:Name="SmallState">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="0"/>
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="Control.IsSmallState" Value="True"/>
+                        <Setter Target="LeftGrid.(Grid.ColumnSpan)" Value="2"/>
+                        <Setter Target="RightGrid.(Grid.ColumnSpan)" Value="2"/>
+                        <Setter Target="RightGrid.(Grid.Column)" Value="0"/>
+                        <Setter Target="SwitchModeToggleButton.Visibility" Value="Visible"/>
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <!-- Top panel -->
+        <Grid Grid.ColumnSpan="2">
+            <ToggleButton x:Name="SwitchModeToggleButton"
+                          x:Uid="SwitchModeToggleButton"
+                          Margin="0,2,4,2"
+                          HorizontalAlignment="Right"
+                          VerticalAlignment="Stretch"
+                          Style="{ThemeResource ThemedSwitchModeToggleButtonStyle}"
+                          AutomationProperties.AutomationId="SwitchModeToggleButton"
+                          AutomationProperties.Name="{x:Bind GetInfoForSwitchModeToggleButton(SwitchModeToggleButton.IsChecked.Value), Mode=OneWay}"
+                          Checked="SwitchModeToggleButton_Checked"
+                          ToolTipService.ToolTip="{x:Bind GetInfoForSwitchModeToggleButton(SwitchModeToggleButton.IsChecked.Value), Mode=OneWay}"
+                          Unchecked="SwitchModeToggleButton_Checked"
+                          Visibility="Collapsed">
+                <!-- TODO: update this icon -->
+                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph=""/>
+            </ToggleButton>
+        </Grid>
         <!-- Left portion of the screen -->
         <Grid x:Name="LeftGrid"
               Grid.Row="1"
-              Grid.Column="0">
+              Visibility="{x:Bind ShouldDisplayPanel(IsSmallState, SwitchModeToggleButton.IsChecked.Value, x:True), Mode=OneWay}">
             <Grid Grid.Row="0" Margin="0,4,0,0">
                 <graphControl:Grapher Name="GraphingControl"
                                       ForceProportionalAxes="True"
@@ -192,17 +395,16 @@
                     </graphControl:Grapher.Background>
                 </graphControl:Grapher>
 
-                <StackPanel Grid.Row="0"
-                            Margin="0,12,12,0"
+                <StackPanel Margin="0,12,12,0"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Top"
                             Orientation="Horizontal">
 
                     <!-- Temporary button until the final UI is created -->
                     <Button x:Name="VariableEditing"
-                            Margin="0,0,4,0"
-                            MinHeight="44"
                             MinWidth="44"
+                            MinHeight="44"
+                            Margin="0,0,4,0"
                             Style="{StaticResource GraphButtonStyle}"
                             RequestedTheme="Light">
                         <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE70F;"/>
@@ -369,9 +571,9 @@
                     </Button>
 
                     <Button x:Name="ActiveTracing"
-                            Margin="0,0,4,0"
-                            MinHeight="44"
                             MinWidth="44"
+                            MinHeight="44"
+                            Margin="0,0,4,0"
                             Style="{StaticResource GraphButtonStyle}"
                             Click="OnActiveTracingClick"
                             RequestedTheme="Light">
@@ -379,9 +581,9 @@
                     </Button>
 
                     <Button x:Name="Share"
-                            Margin="0"
-                            MinHeight="44"
                             MinWidth="44"
+                            MinHeight="44"
+                            Margin="0"
                             Style="{StaticResource GraphButtonStyle}"
                             Click="OnShareClick"
                             RequestedTheme="Light">
@@ -396,9 +598,9 @@
                             Orientation="Vertical">
 
                     <RepeatButton x:Uid="zoomInButton"
-                                  Margin="0,0,0,4"
-                                  MinHeight="44"
                                   MinWidth="44"
+                                  MinHeight="44"
+                                  Margin="0,0,0,4"
                                   Style="{ThemeResource GraphRepeatButtonStyle}"
                                   FontFamily="{StaticResource SymbolThemeFontFamily}"
                                   AutomationProperties.AutomationId="zoomInButton"
@@ -416,9 +618,9 @@
                     </RepeatButton>
 
                     <RepeatButton x:Uid="zoomOutButton"
-                                  Margin="0,0,0,4"
-                                  MinHeight="44"
                                   MinWidth="44"
+                                  MinHeight="44"
+                                  Margin="0,0,0,4"
                                   Style="{ThemeResource GraphRepeatButtonStyle}"
                                   FontFamily="{StaticResource SymbolThemeFontFamily}"
                                   AutomationProperties.AutomationId="zoomOutButton"
@@ -436,9 +638,9 @@
                     </RepeatButton>
 
                     <Button x:Uid="zoomResetButton"
-                            Margin="0,0,0,0"
-                            MinHeight="44"
                             MinWidth="44"
+                            MinHeight="44"
+                            Margin="0,0,0,0"
                             Style="{ThemeResource GraphButtonStyle}"
                             AutomationProperties.AutomationId="zoomResetButton"
                             Command="{x:Bind ZoomResetButtonPressed, Mode=OneTime}"
@@ -456,22 +658,24 @@
                     </Button>
                 </StackPanel>
 
-                <Popup x:Name="TraceValuePopup"
-                       Grid.Row="0"
-                       RenderTransformOrigin="0,1">
-                    <Popup.RenderTransform>
-                        <TranslateTransform x:Name="TraceValuePopupTransform" X="50" Y="150"/>
-                    </Popup.RenderTransform>
-                    <Grid Background="{StaticResource ToolTipBackground}"
-                          BorderBrush="{StaticResource ToolTipBorderBrush}"
-                          BorderThickness="3,3,3,3">
-                        <TextBlock x:Name="TraceValue"
-                                   Margin="5,5,5,5"
-                                   Foreground="{StaticResource ToolTipForeground}"
-                                   Text="x=0,y=0"/>
-                    </Grid>
-                </Popup>
-
+                <Border x:Name="TraceValuePopup"
+                        Padding="{ThemeResource ToolTipBorderThemePadding}"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Top"
+                        Background="{ThemeResource ToolTipBackground}"
+                        BorderBrush="{ThemeResource ToolTipBorderBrush}"
+                        BorderThickness="{ThemeResource ToolTipBorderThemeThickness}"
+                        contract7Present:BackgroundSizing="OuterBorderEdge"
+                        IsHitTestVisible="False"
+                        SizeChanged="TraceValuePopup_SizeChanged"
+                        Visibility="Collapsed">
+                    <Border.RenderTransform>
+                        <TranslateTransform x:Name="TraceValuePopupTransform"/>
+                    </Border.RenderTransform>
+                    <TextBlock x:Name="TraceValue"
+                               Foreground="{ThemeResource ToolTipForeground}"
+                               Text="x=0,y=0"/>
+                </Border>
             </Grid>
 
         </Grid>
@@ -481,7 +685,7 @@
               Grid.Row="1"
               Grid.RowSpan="2"
               Grid.Column="1"
-              Margin="0,0,0,0">
+              Visibility="{x:Bind ShouldDisplayPanel(IsSmallState, SwitchModeToggleButton.IsChecked.Value, x:False), Mode=OneWay}">
             <Grid.RowDefinitions>
                 <RowDefinition Height="5*"/>
                 <RowDefinition Height="3*"/>
@@ -498,9 +702,9 @@
             <!-- This control should be within a grid that limits the hight to keep the sticky footer functionality from breaking -->
             <local:EquationInputArea x:Name="EquationInputAreaControl"
                                      Margin="0,4,0,0"
-                                     Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"
                                      Equations="{x:Bind ViewModel.Equations}"
-                                     KeyGraphFeaturesRequested="OnEquationKeyGraphFeaturesRequested"/>
+                                     KeyGraphFeaturesRequested="OnEquationKeyGraphFeaturesRequested"
+                                     Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"/>
 
             <Grid x:Name="ButtonContainerGrid"
                   Grid.Row="1"
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
index e38fd1a..4dfab23 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.cpp
@@ -5,7 +5,10 @@
 #include "GraphingCalculator.xaml.h"
 #include "CalcViewModel/Common/TraceLogger.h"
 #include "CalcViewModel/Common/LocalizationSettings.h"
+#include "CalcViewModel/Common/AppResourceProvider.h"
 #include "CalcViewModel/Common/KeyboardShortcutManager.h"
+#include "CalcViewModel/Common/Automation/NarratorAnnouncement.h"
+#include "CalcViewModel/Common/Automation/NarratorNotifier.h"
 #include "Controls/CalculationResult.h"
 #include "CalcManager/NumberFormattingUtils.h"
 #include "Calculator/Controls/EquationTextBox.h"
@@ -14,6 +17,7 @@
 
 using namespace CalculatorApp;
 using namespace CalculatorApp::Common;
+using namespace CalculatorApp::Common::Automation;
 using namespace CalculatorApp::Controls;
 using namespace CalculatorApp::ViewModel;
 using namespace CalcManager::NumberFormattingUtils;
@@ -42,6 +46,8 @@ using namespace Windows::UI::Popups;
 
 constexpr auto sc_ViewModelPropertyName = L"ViewModel";
 
+DEPENDENCY_PROPERTY_INITIALIZATION(GraphingCalculator, IsSmallState);
+
 GraphingCalculator::GraphingCalculator()
     : ActiveTracingOn(false)
 {
@@ -64,14 +70,9 @@ GraphingCalculator::GraphingCalculator()
 
 void GraphingCalculator::OnShowTracePopupChanged(bool newValue)
 {
-    if (TraceValuePopup->IsOpen != newValue)
+    if ((TraceValuePopup->Visibility == ::Visibility::Visible) != newValue)
     {
-        TraceValuePopup->IsOpen = newValue;
-        if (TraceValuePopup->IsOpen)
-        {
-            // Set the keyboard focus to the graph control so we can use the arrow keys safely.
-            GraphingControl->Focus(::FocusState::Programmatic);
-        }
+        TraceValuePopup->Visibility = newValue ? ::Visibility::Visible : ::Visibility::Collapsed;
     }
 }
 
@@ -118,10 +119,8 @@ void GraphingCalculator::OnEquationsVectorChanged(IObservableVector<EquationView
 
 void GraphingCalculator::OnTracePointChanged(Windows::Foundation::Point newPoint)
 {
-    TraceValuePopupTransform->X = (int)GraphingControl->TraceLocation.X + 15;
-    TraceValuePopupTransform->Y = (int)GraphingControl->TraceLocation.Y - 30;
-
     TraceValue->Text = "(" + newPoint.X.ToString() + ", " + newPoint.Y.ToString() + ")";
+    PositionGraphPopup();
 }
 
 GraphingCalculatorViewModel ^ GraphingCalculator::ViewModel::get()
@@ -377,3 +376,63 @@ void GraphingCalculator::OnKeyGraphFeaturesClosed(Object ^ sender, RoutedEventAr
 {
     IsKeyGraphFeaturesVisible = false;
 }
+
+Visibility GraphingCalculator::ShouldDisplayPanel(bool isSmallState, bool isEquationModeActivated, bool isGraphPanel)
+{
+    return (!isSmallState || isEquationModeActivated ^ isGraphPanel) ? ::Visibility::Visible : ::Visibility::Collapsed;
+}
+
+Platform::String ^ GraphingCalculator::GetInfoForSwitchModeToggleButton(bool isChecked)
+{
+    if (isChecked)
+    {
+        return AppResourceProvider::GetInstance().GetResourceString(L"GraphSwitchToGraphMode");
+    }
+    else
+    {
+        return AppResourceProvider::GetInstance().GetResourceString(L"GraphSwitchToEquationMode");
+    }
+}
+
+void GraphingCalculator::SwitchModeToggleButton_Checked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e)
+{
+    auto narratorNotifier = ref new NarratorNotifier();
+    String ^ announcementText;
+    if (SwitchModeToggleButton->IsChecked->Value)
+    {
+        announcementText = AppResourceProvider::GetInstance().GetResourceString(L"GraphSwitchedToEquationModeAnnouncement");
+    }
+    else
+    {
+        announcementText = AppResourceProvider::GetInstance().GetResourceString(L"GraphSwitchedToGraphModeAnnouncement");
+    }
+
+    auto announcement = CalculatorAnnouncement::GetGraphModeChangedAnnouncement(announcementText);
+    narratorNotifier->Announce(announcement);
+}
+
+void GraphingCalculator::PositionGraphPopup()
+{
+    if (GraphingControl->TraceLocation.X + 15 + TraceValuePopup->ActualWidth >= GraphingControl->ActualWidth)
+    {
+        TraceValuePopupTransform->X = (int)GraphingControl->TraceLocation.X - 15 - TraceValuePopup->ActualWidth;
+    }
+    else
+    {
+        TraceValuePopupTransform->X = (int)GraphingControl->TraceLocation.X + 15;
+    }
+
+    if (GraphingControl->TraceLocation.Y >= 30)
+    {
+        TraceValuePopupTransform->Y = (int)GraphingControl->TraceLocation.Y - 30;
+    }
+    else
+    {
+        TraceValuePopupTransform->Y = (int)GraphingControl->TraceLocation.Y;
+    }
+}
+
+void GraphingCalculator::TraceValuePopup_SizeChanged(Platform::Object ^ sender, Windows::UI::Xaml::SizeChangedEventArgs ^ e)
+{
+    PositionGraphPopup();
+}
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h
index 004f36f..f2de531 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml.h
@@ -13,16 +13,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 ref class GraphingCalculator sealed : public Windows::UI::Xaml::Data::INotifyPropertyChanged
     {
     public:
         GraphingCalculator();
 
         OBSERVABLE_OBJECT();
+        DEPENDENCY_PROPERTY_OWNER(GraphingCalculator);
         COMMAND_FOR_METHOD(ZoomOutButtonPressed, GraphingCalculator::OnZoomOutCommand);
         COMMAND_FOR_METHOD(ZoomInButtonPressed, GraphingCalculator::OnZoomInCommand);
         COMMAND_FOR_METHOD(ZoomResetButtonPressed, GraphingCalculator::OnZoomResetCommand);
         OBSERVABLE_PROPERTY_RW(bool, IsKeyGraphFeaturesVisible);
+        DEPENDENCY_PROPERTY(bool, IsSmallState);
 
         property CalculatorApp::ViewModel::GraphingCalculatorViewModel^ ViewModel
         {
@@ -30,39 +32,43 @@ namespace CalculatorApp
             void set(CalculatorApp::ViewModel::GraphingCalculatorViewModel^ vm);
         }
 
+        Windows::UI::Xaml::Visibility ShouldDisplayPanel(bool isSmallState, bool isEquationModeActivated, bool isGraphPanel);
+        Platform::String ^ GetInfoForSwitchModeToggleButton(bool isChecked);
     private:
-        void GraphingCalculator_DataContextChanged(Windows::UI::Xaml::FrameworkElement^ sender, Windows::UI::Xaml::DataContextChangedEventArgs^ args);
+        void GraphingCalculator_DataContextChanged(Windows::UI::Xaml::FrameworkElement ^ sender, Windows::UI::Xaml::DataContextChangedEventArgs ^ args);
 
-        void OnVariableChanged(Platform::Object^ sender, CalculatorApp::ViewModel::VariableChangedEventArgs args);
+        void GraphVariablesUpdated(Platform::Object ^ sender, Object ^ args);
+        void OnVariableChanged(Platform::Object ^ sender, CalculatorApp::ViewModel::VariableChangedEventArgs args);
         void OnEquationsVectorChanged(
             Windows::Foundation::Collections::IObservableVector<CalculatorApp::ViewModel::EquationViewModel ^> ^ sender,
             Windows::Foundation::Collections::IVectorChangedEventArgs ^ event);
 
-        void TextBoxLosingFocus(Windows::UI::Xaml::Controls::TextBox^ textbox, Windows::UI::Xaml::Input::LosingFocusEventArgs^ args);
-        void TextBoxKeyDown(Windows::UI::Xaml::Controls::TextBox^ textbox, Windows::UI::Xaml::Input::KeyRoutedEventArgs^ e);
-        void SubmitTextbox(Windows::UI::Xaml::Controls::TextBox^ textbox);
+        void TextBoxLosingFocus(Windows::UI::Xaml::Controls::TextBox ^ textbox, Windows::UI::Xaml::Input::LosingFocusEventArgs ^ args);
+        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);
+        double validateDouble(Platform::String ^ value, double defaultValue);
 
-        CalculatorApp::ViewModel::GraphingCalculatorViewModel^ m_viewModel;
+        CalculatorApp::ViewModel::GraphingCalculatorViewModel ^ m_viewModel;
 
-        void OnShareClick(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+        void OnShareClick(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
 
         void OnShowTracePopupChanged(bool newValue);
         void OnTracePointChanged(Windows::Foundation::Point newPoint);
 
-
     private:
         Windows::Foundation::EventRegistrationToken m_dataRequestedToken;
         Windows::Foundation::EventRegistrationToken m_vectorChangedToken;
         Windows::Foundation::EventRegistrationToken m_variableUpdatedToken;
-        void OnDataRequested(Windows::ApplicationModel::DataTransfer::DataTransferManager^ sender, Windows::ApplicationModel::DataTransfer::DataRequestedEventArgs^ e);
+        void OnDataRequested(
+            Windows::ApplicationModel::DataTransfer::DataTransferManager ^ sender,
+            Windows::ApplicationModel::DataTransfer::DataRequestedEventArgs ^ e);
 
-        void TextBoxGotFocus(Windows::UI::Xaml::Controls::TextBox^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+        void TextBoxGotFocus(Windows::UI::Xaml::Controls::TextBox ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
         void OnActiveTracingClick(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
         void GraphingControl_LostFocus(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
         void GraphingControl_LosingFocus(Windows::UI::Xaml::UIElement ^ sender, Windows::UI::Xaml::Input::LosingFocusEventArgs ^ args);
@@ -70,6 +76,9 @@ namespace CalculatorApp
         void OnEquationKeyGraphFeaturesRequested(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
         void OnKeyGraphFeaturesClosed(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
         bool ActiveTracingOn;
+        void SwitchModeToggleButton_Checked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
+        void TraceValuePopup_SizeChanged(Platform::Object ^ sender, Windows::UI::Xaml::SizeChangedEventArgs ^ e);
+        void PositionGraphPopup();
     };
 
 }
diff --git a/src/Calculator/Views/MainPage.xaml b/src/Calculator/Views/MainPage.xaml
index d7f8bf5..cb0c8d1 100644
--- a/src/Calculator/Views/MainPage.xaml
+++ b/src/Calculator/Views/MainPage.xaml
@@ -96,7 +96,7 @@
             <Border x:Name="DateCalcHolder">
                 <!-- PLACEHOLDER!!!! This is where the date calculator goes when it is delay loaded -->
             </Border>
-            <Border x:Name="GraphingCalcHolder" Grid.Row="1">
+            <Border x:Name="GraphingCalcHolder">
                 <!-- PLACEHOLDER!!!! This is where the graphing calculator goes when it is delay loaded -->
              </Border>            
             <Border x:Name="ConverterHolder">