From 1475b49120468e2ef2d72d7cf9961bb1980fff60 Mon Sep 17 00:00:00 2001
From: Pepe Rivera <joriv@microsoft.com>
Date: Tue, 25 Jun 2019 13:40:56 -0700
Subject: [PATCH] Create EquationTextBox control (#547)

---
 .../GraphingCalculator/EquationViewModel.cpp  |   5 +-
 .../GraphingCalculator/EquationViewModel.h    |   1 +
 src/Calculator/App.xaml                       | 651 ++++++++++++++++++
 src/Calculator/Calculator.vcxproj             |   2 +
 src/Calculator/Calculator.vcxproj.filters     |  10 +
 src/Calculator/Controls/EquationTextBox.cpp   | 220 ++++++
 src/Calculator/Controls/EquationTextBox.h     |  66 ++
 src/Calculator/Resources/en-US/Resources.resw |   8 +-
 src/Calculator/Resources/es-ES/Resources.resw |   4 +-
 src/Calculator/Views/Calculator.xaml.h        |   1 +
 .../GraphingCalculator/EquationInputArea.xaml |  80 +--
 .../EquationInputArea.xaml.cpp                |  31 +-
 .../EquationInputArea.xaml.h                  |   1 +
 .../GraphingCalculator.xaml                   |   4 +-
 src/GraphControl/Control/EquationCollection.h |  14 -
 src/GraphControl/Control/Grapher.cpp          |  48 +-
 src/GraphingInterfaces/IGraph.h               |   2 +-
 17 files changed, 1058 insertions(+), 90 deletions(-)
 create mode 100644 src/Calculator/Controls/EquationTextBox.cpp
 create mode 100644 src/Calculator/Controls/EquationTextBox.h

diff --git a/src/CalcViewModel/GraphingCalculator/EquationViewModel.cpp b/src/CalcViewModel/GraphingCalculator/EquationViewModel.cpp
index 6946766..2229669 100644
--- a/src/CalcViewModel/GraphingCalculator/EquationViewModel.cpp
+++ b/src/CalcViewModel/GraphingCalculator/EquationViewModel.cpp
@@ -2,11 +2,14 @@
 #include "EquationViewModel.h"
 
 using namespace Windows::UI;
+using namespace Windows::UI::Xaml;
 
 namespace CalculatorApp::ViewModel
 {
     EquationViewModel::EquationViewModel()
-        : m_LineColor{ Colors::Transparent }
+        : m_LineColor{ Colors::Transparent },
+        m_KeyGraphFeaturesVisibility{ ::Visibility::Collapsed },
+        m_Expression{ "" }
     {
     }
 }
diff --git a/src/CalcViewModel/GraphingCalculator/EquationViewModel.h b/src/CalcViewModel/GraphingCalculator/EquationViewModel.h
index 0920caf..50d23df 100644
--- a/src/CalcViewModel/GraphingCalculator/EquationViewModel.h
+++ b/src/CalcViewModel/GraphingCalculator/EquationViewModel.h
@@ -12,5 +12,6 @@ namespace CalculatorApp::ViewModel
         OBSERVABLE_OBJECT();
         OBSERVABLE_PROPERTY_RW(Platform::String^, Expression);
         OBSERVABLE_PROPERTY_RW(Windows::UI::Color, LineColor);
+        OBSERVABLE_PROPERTY_RW(Windows::UI::Xaml::Visibility, KeyGraphFeaturesVisibility);
     };
 }
diff --git a/src/Calculator/App.xaml b/src/Calculator/App.xaml
index cec835f..4bce469 100644
--- a/src/Calculator/App.xaml
+++ b/src/Calculator/App.xaml
@@ -47,6 +47,8 @@
                                   FallbackColor="{ThemeResource SystemChromeMediumColor}"
                                   TintColor="{ThemeResource SystemChromeLowColor}"
                                   TintOpacity="0.7"/>
+                    <SolidColorBrush x:Key="EquationBoxPointerOverBackgroundBrush" Color="{ThemeResource SystemControlBackgroundAltMediumBrush}"/>
+                    <SolidColorBrush x:Key="EquationBoxHoverButtonForegroundBrush" Color="{ThemeResource SystemBaseHighColor}"/>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
                     <Thickness x:Key="HighContrastThicknessTop">0,0,0,0</Thickness>
@@ -83,6 +85,8 @@
                                   FallbackColor="{ThemeResource SystemChromeMediumColor}"
                                   TintColor="{ThemeResource SystemChromeLowColor}"
                                   TintOpacity="0.7"/>
+                    <SolidColorBrush x:Key="EquationBoxPointerOverBackgroundBrush" Color="{ThemeResource SystemControlBackgroundAltMediumBrush}"/>
+                    <SolidColorBrush x:Key="EquationBoxHoverButtonForegroundBrush" Color="{ThemeResource SystemBaseHighColor}"/>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
                     <Thickness x:Key="HighContrastThicknessTop">0,1,0,0</Thickness>
@@ -105,6 +109,8 @@
                     <SolidColorBrush x:Key="AppControlBackgroundListAccentHighRevealBackgroundBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
                     <SolidColorBrush x:Key="AppControlListLowRevealHighlightBrush" Color="{ThemeResource SystemColorHighlightColor}"/>
                     <SolidColorBrush x:Key="AppChromeAcrylicHostBackdropMediumLowBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+                    <SolidColorBrush x:Key="EquationBoxPointerOverBackgroundBrush" Color="{ThemeResource SystemColorHighlightColor}"/>
+                    <SolidColorBrush x:Key="EquationBoxHoverButtonForegroundBrush" Color="{ThemeResource SystemColorCaptionTextColor}"/>
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
 
@@ -1073,6 +1079,651 @@
                     </Setter.Value>
                 </Setter>
             </Style>
+
+            <Style x:Key="EquationTextBoxStyle" TargetType="Controls:EquationTextBox">
+                <Setter Property="Background" Value="Transparent"/>
+                <Setter Property="BorderThickness" Value="0,1,1,1"/>
+                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
+                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
+                <Setter Property="FontWeight" Value="Normal"/>
+                <Setter Property="Foreground" Value="{ThemeResource TextBoxForegroundThemeBrush}"/>
+                <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/>
+                <Setter Property="IsTabStop" Value="False"/>
+                <Setter Property="Typography.StylisticSet20" Value="True"/>
+                <Setter Property="Template">
+                    <Setter.Value>
+                        <ControlTemplate TargetType="Controls:EquationTextBox">
+                            <Grid>
+
+                                <Grid.Resources>
+                                    <Style x:Name="EquationTextBoxButtonStyle" TargetType="Button">
+                                        <Setter Property="Background" Value="Transparent"/>
+                                        <Setter Property="Foreground" Value="Transparent"/>
+                                        <Setter Property="Template">
+                                            <Setter.Value>
+                                                <ControlTemplate TargetType="Button">
+                                                    <Grid x:Name="ButtonLayoutGrid"
+                                                          Background="Transparent"
+                                                          BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
+                                                          BorderThickness="{TemplateBinding BorderThickness}">
+
+                                                        <VisualStateManager.VisualStateGroups>
+                                                            <VisualStateGroup x:Name="CommonStates">
+                                                                <VisualState x:Name="Normal"/>
+
+                                                                <VisualState x:Name="PointerOver">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+
+                                                                <VisualState x:Name="Pressed">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+
+                                                                <VisualState x:Name="Disabled">
+                                                                    <Storyboard>
+                                                                        <DoubleAnimation Duration="0"
+                                                                                         Storyboard.TargetName="ButtonLayoutGrid"
+                                                                                         Storyboard.TargetProperty="Opacity"
+                                                                                         To="0"/>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                            </VisualStateGroup>
+                                                        </VisualStateManager.VisualStateGroups>
+                                                        <TextBlock x:Name="GlyphElement"
+                                                                   HorizontalAlignment="Center"
+                                                                   VerticalAlignment="Center"
+                                                                   Foreground="{ThemeResource EquationBoxHoverButtonForegroundBrush}"
+                                                                   FontFamily="{TemplateBinding FontFamily}"
+                                                                   FontSize="12"
+                                                                   FontStyle="Normal"
+                                                                   AutomationProperties.AccessibilityView="Raw"
+                                                                   Text="{TemplateBinding Content}"/>
+                                                    </Grid>
+                                                </ControlTemplate>
+                                            </Setter.Value>
+                                        </Setter>
+                                    </Style>
+                                    <Style x:Name="EquationTextBoxToggleButtonStyle" TargetType="ToggleButton">
+                                        <Setter Property="Background" Value="Transparent"/>
+                                        <Setter Property="Foreground" Value="Transparent"/>
+                                        <Setter Property="Template">
+                                            <Setter.Value>
+                                                <ControlTemplate TargetType="ToggleButton">
+                                                    <Grid x:Name="ButtonLayoutGrid"
+                                                          Background="Transparent"
+                                                          BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
+                                                          BorderThickness="{TemplateBinding BorderThickness}">
+
+                                                        <VisualStateManager.VisualStateGroups>
+                                                            <VisualStateGroup x:Name="CommonStates">
+                                                                <VisualState x:Name="Normal"/>
+
+                                                                <VisualState x:Name="PointerOver">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+
+                                                                <VisualState x:Name="Pressed">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+
+                                                                <VisualState x:Name="Disabled">
+                                                                    <Storyboard>
+                                                                        <DoubleAnimation Duration="0"
+                                                                                         Storyboard.TargetName="ButtonLayoutGrid"
+                                                                                         Storyboard.TargetProperty="Opacity"
+                                                                                         To="0"/>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                                <VisualState x:Name="Checked">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushChecked}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <PointerUpThemeAnimation Storyboard.TargetName="ButtonLayoutGrid"/>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                                <VisualState x:Name="CheckedPointerOver">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <PointerUpThemeAnimation Storyboard.TargetName="ButtonLayoutGrid"/>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                                <VisualState x:Name="CheckedPressed">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <PointerDownThemeAnimation Storyboard.TargetName="ButtonLayoutGrid"/>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                                <VisualState x:Name="CheckedDisabled">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundCheckedDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                                <VisualState x:Name="Indeterminate">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminate}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminate}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminate}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <PointerUpThemeAnimation Storyboard.TargetName="ButtonLayoutGrid"/>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                                <VisualState x:Name="IndeterminatePointerOver">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminatePointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminatePointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminatePointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <PointerUpThemeAnimation Storyboard.TargetName="ButtonLayoutGrid"/>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                                <VisualState x:Name="IndeterminatePressed">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminatePressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminatePressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminatePressed}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <PointerDownThemeAnimation Storyboard.TargetName="ButtonLayoutGrid"/>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                                <VisualState x:Name="IndeterminateDisabled">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminateDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminateDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminateDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                            </VisualStateGroup>
+                                                        </VisualStateManager.VisualStateGroups>
+                                                        <TextBlock x:Name="GlyphElement"
+                                                                   HorizontalAlignment="Center"
+                                                                   VerticalAlignment="Center"
+                                                                   Foreground="{ThemeResource EquationBoxHoverButtonForegroundBrush}"
+                                                                   FontFamily="{TemplateBinding FontFamily}"
+                                                                   FontSize="12"
+                                                                   FontStyle="Normal"
+                                                                   AutomationProperties.AccessibilityView="Raw"
+                                                                   Text="{TemplateBinding Content}"/>
+                                                    </Grid>
+                                                </ControlTemplate>
+                                            </Setter.Value>
+                                        </Setter>
+                                    </Style>
+                                    <Style x:Key="EquationTextBoxStyle" TargetType="RichEditBox">
+                                        <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}"/>
+                                        <Setter Property="Background" Value="Transparent"/>
+                                        <Setter Property="ContentLinkForegroundColor" Value="{ThemeResource ContentLinkForegroundColor}"/>
+                                        <Setter Property="ContentLinkBackgroundColor" Value="{ThemeResource ContentLinkBackgroundColor}"/>
+                                        <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}"/>
+                                        <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}"/>
+                                        <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}"/>
+                                        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
+                                        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
+                                        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/>
+                                        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
+                                        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
+                                        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
+                                        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
+                                        <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/>
+                                        <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}"/>
+                                        <Setter Property="ContextFlyout" Value="{StaticResource TextControlCommandBarContextFlyout}"/>
+                                        <Setter Property="Template">
+                                            <Setter.Value>
+                                                <ControlTemplate TargetType="RichEditBox">
+                                                    <Grid>
+                                                        <Grid.RowDefinitions>
+                                                            <RowDefinition Height="Auto"/>
+                                                            <RowDefinition Height="*"/>
+                                                            <RowDefinition Height="Auto"/>
+                                                        </Grid.RowDefinitions>
+
+                                                        <Grid.ColumnDefinitions>
+                                                            <ColumnDefinition Width="*"/>
+                                                            <ColumnDefinition Width="Auto"/>
+                                                            <ColumnDefinition Width="Auto"/>
+                                                            <ColumnDefinition Width="Auto"/>
+                                                        </Grid.ColumnDefinitions>
+
+                                                        <VisualStateManager.VisualStateGroups>
+                                                            <VisualStateGroup x:Name="CommonStates">
+
+                                                                <VisualState x:Name="Disabled">
+
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundDisabled}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                                <VisualState x:Name="Normal"/>
+
+                                                                <VisualState x:Name="PointerOver">
+
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+                                                                <VisualState x:Name="Focused">
+
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="RequestedTheme">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Light"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+
+                                                            </VisualStateGroup>
+                                                        </VisualStateManager.VisualStateGroups>
+
+                                                        <ContentPresenter x:Name="HeaderContentPresenter"
+                                                                          Grid.Row="0"
+                                                                          Grid.Column="0"
+                                                                          Grid.ColumnSpan="4"
+                                                                          Margin="{ThemeResource RichEditBoxTopHeaderMargin}"
+                                                                          VerticalAlignment="Top"
+                                                                          Foreground="{ThemeResource TextControlHeaderForeground}"
+                                                                          FontWeight="Normal"
+                                                                          x:DeferLoadStrategy="Lazy"
+                                                                          Content="{TemplateBinding Header}"
+                                                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                                                          TextWrapping="Wrap"
+                                                                          Visibility="Collapsed"/>
+                                                        <Border x:Name="BorderElement"
+                                                                Grid.Row="1"
+                                                                Grid.RowSpan="1"
+                                                                Grid.Column="0"
+                                                                Grid.ColumnSpan="4"
+                                                                MinWidth="{ThemeResource TextControlThemeMinWidth}"
+                                                                MinHeight="{ThemeResource TextControlThemeMinHeight}"
+                                                                Background="{TemplateBinding Background}"
+                                                                BorderBrush="{TemplateBinding BorderBrush}"
+                                                                BorderThickness="{TemplateBinding BorderThickness}"
+                                                                Control.IsTemplateFocusTarget="True"
+                                                                CornerRadius="{TemplateBinding CornerRadius}"/>
+                                                        <ScrollViewer x:Name="ContentElement"
+                                                                      Grid.Row="1"
+                                                                      Grid.Column="0"
+                                                                      Margin="{TemplateBinding BorderThickness}"
+                                                                      Padding="{TemplateBinding Padding}"
+                                                                      VerticalAlignment="Center"
+                                                                      AutomationProperties.AccessibilityView="Raw"
+                                                                      HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                                                      HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
+                                                                      IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                                                                      IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
+                                                                      IsTabStop="False"
+                                                                      IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
+                                                                      VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
+                                                                      VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
+                                                                      ZoomMode="Disabled"/>
+                                                        <TextBlock x:Name="PlaceholderTextContentPresenter"
+                                                                   Grid.Row="1"
+                                                                   Grid.Column="0"
+                                                                   Grid.ColumnSpan="4"
+                                                                   Margin="{TemplateBinding BorderThickness}"
+                                                                   Padding="{TemplateBinding Padding}"
+                                                                   VerticalAlignment="Center"
+                                                                   Foreground="{ThemeResource TextControlPlaceholderForeground}"
+                                                                   IsHitTestVisible="False"
+                                                                   Text="{TemplateBinding PlaceholderText}"
+                                                                   TextAlignment="{TemplateBinding TextAlignment}"
+                                                                   TextWrapping="{TemplateBinding TextWrapping}"/>
+                                                        <ContentPresenter x:Name="DescriptionPresenter"
+                                                                          Grid.Row="2"
+                                                                          Grid.Column="0"
+                                                                          Grid.ColumnSpan="4"
+                                                                          Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}"
+                                                                          x:Load="False"
+                                                                          AutomationProperties.AccessibilityView="Raw"
+                                                                          Content="{TemplateBinding Description}"/>
+
+                                                    </Grid>
+
+                                                </ControlTemplate>
+                                            </Setter.Value>
+                                        </Setter>
+                                    </Style>
+                                </Grid.Resources>
+
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="*"/>
+                                </Grid.ColumnDefinitions>
+
+                                <Grid.RowDefinitions>
+                                    <RowDefinition MinHeight="44"/>
+                                    <RowDefinition Height="Auto"/>
+                                </Grid.RowDefinitions>
+
+                                <VisualStateManager.VisualStateGroups>
+                                    <VisualStateGroup x:Name="CommonStates">
+                                        <VisualState x:Name="Normal">
+
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EquationBoxBorder" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackground}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EquationBoxBorder" Storyboard.TargetProperty="BorderBrush">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
+
+                                        <VisualState x:Name="PointerOver">
+
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EquationBoxBorder" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackground}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EquationBoxBorder" Storyboard.TargetProperty="BorderBrush">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorChooserButton" Storyboard.TargetProperty="Visibility">
+                                                    <DiscreteObjectKeyFrame KeyTime="0">
+                                                        <DiscreteObjectKeyFrame.Value>
+                                                            <Visibility>Visible</Visibility>
+                                                        </DiscreteObjectKeyFrame.Value>
+                                                    </DiscreteObjectKeyFrame>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FunctionButton" Storyboard.TargetProperty="Visibility">
+                                                    <DiscreteObjectKeyFrame KeyTime="0">
+                                                        <DiscreteObjectKeyFrame.Value>
+                                                            <Visibility>Visible</Visibility>
+                                                        </DiscreteObjectKeyFrame.Value>
+                                                    </DiscreteObjectKeyFrame>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RemoveButton" Storyboard.TargetProperty="Visibility">
+                                                    <DiscreteObjectKeyFrame KeyTime="0">
+                                                        <DiscreteObjectKeyFrame.Value>
+                                                            <Visibility>Visible</Visibility>
+                                                        </DiscreteObjectKeyFrame.Value>
+                                                    </DiscreteObjectKeyFrame>
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
+
+                                        <VisualState x:Name="Disabled">
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EquationBoxBorder" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBackgroundThemeBrush}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EquationBoxBorder" Storyboard.TargetProperty="BorderBrush">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBorderThemeBrush}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EquationTextBox" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
+
+                                        <VisualState x:Name="Focused">
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EquationBoxBorder" Storyboard.TargetProperty="BorderBrush">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EquationBoxBorder" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxBackgroundThemeBrush}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
+                                    </VisualStateGroup>
+
+                                    <VisualStateGroup x:Name="ButtonStates">
+                                        <VisualState x:Name="ButtonVisible">
+
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
+                                                    <DiscreteObjectKeyFrame KeyTime="0">
+                                                        <DiscreteObjectKeyFrame.Value>
+                                                            <Visibility>Visible</Visibility>
+                                                        </DiscreteObjectKeyFrame.Value>
+                                                    </DiscreteObjectKeyFrame>
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="ButtonCollapsed"/>
+                                    </VisualStateGroup>
+
+                                </VisualStateManager.VisualStateGroups>
+
+                                <Button x:Name="EquationButton"
+                                        MinWidth="44"
+                                        MinHeight="44"
+                                        Background="{TemplateBinding EquationColor}"
+                                        Foreground="{StaticResource SystemChromeWhiteColor}"
+                                        Content="ƒₓ">
+                                    <Button.Resources>
+                                        <SolidColorBrush x:Name="ButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                        <SolidColorBrush x:Name="ButtonForegroundPointerOver" Color="{ThemeResource SystemChromeWhiteColor}"/>
+                                        <SolidColorBrush x:Name="ButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
+                                    </Button.Resources>
+                                </Button>
+                                <Border x:Name="EquationBoxBorder"
+                                        Grid.Column="1"
+                                        Background="{ThemeResource TextControlBackground}"
+                                        BorderBrush="{TemplateBinding Background}"
+                                        BorderThickness="{TemplateBinding BorderThickness}">
+
+                                    <Grid>
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="*"/>
+                                            <ColumnDefinition Width="Auto"/>
+                                            <ColumnDefinition Width="Auto"/>
+                                            <ColumnDefinition Width="Auto"/>
+                                        </Grid.ColumnDefinitions>
+                                        <RichEditBox x:Name="EquationTextBox"
+                                                     MinHeight="42"
+                                                     Padding="{TemplateBinding Padding}"
+                                                     VerticalAlignment="Stretch"
+                                                     Style="{StaticResource EquationTextBoxStyle}"
+                                                     BorderThickness="0"
+                                                     FontFamily="{TemplateBinding FontFamily}"
+                                                     FontSize="{TemplateBinding FontSize}"
+                                                     FontWeight="{TemplateBinding FontWeight}"
+                                                     AcceptsReturn="false"
+                                                     InputScope="Text"
+                                                     MaxLength="2048"
+                                                     TextWrapping="NoWrap"/>
+                                        <!-- TODO: Consider overwiting the hover color instead of hijacking the foreground/background property -->
+                                        <Button x:Name="DeleteButton"
+                                                Grid.Column="3"
+                                                MinWidth="34"
+                                                Margin="{ThemeResource HelperButtonThemePadding}"
+                                                VerticalAlignment="Stretch"
+                                                Style="{StaticResource EquationTextBoxButtonStyle}"
+                                                Background="{TemplateBinding EquationColor}"
+                                                Foreground="{TemplateBinding EquationColor}"
+                                                BorderThickness="{TemplateBinding BorderThickness}"
+                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                FontSize="{TemplateBinding FontSize}"
+                                                AutomationProperties.AccessibilityView="Raw"
+                                                Content="&#xE10A;"
+                                                IsTabStop="False"
+                                                Visibility="Collapsed"/>
+                                        <Button x:Name="RemoveButton"
+                                                Grid.Column="3"
+                                                MinWidth="34"
+                                                Margin="{ThemeResource HelperButtonThemePadding}"
+                                                VerticalAlignment="Stretch"
+                                                Style="{StaticResource EquationTextBoxButtonStyle}"
+                                                Background="{TemplateBinding EquationColor}"
+                                                Foreground="{TemplateBinding EquationColor}"
+                                                BorderThickness="{TemplateBinding BorderThickness}"
+                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                FontSize="{TemplateBinding FontSize}"
+                                                AutomationProperties.AccessibilityView="Raw"
+                                                Content="&#xECC9;"
+                                                IsTabStop="False"
+                                                Visibility="Collapsed"/>
+                                        <ToggleButton x:Name="ColorChooserButton"
+                                                      Grid.Column="2"
+                                                      MinWidth="34"
+                                                      Margin="{ThemeResource HelperButtonThemePadding}"
+                                                      VerticalAlignment="Stretch"
+                                                      Style="{StaticResource EquationTextBoxToggleButtonStyle}"
+                                                      Background="{TemplateBinding EquationColor}"
+                                                      Foreground="{TemplateBinding EquationColor}"
+                                                      BorderThickness="{TemplateBinding BorderThickness}"
+                                                      FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                      FontSize="{TemplateBinding FontSize}"
+                                                      AutomationProperties.AccessibilityView="Raw"
+                                                      Content="&#xE790;"
+                                                      IsTabStop="False"
+                                                      Visibility="Collapsed"/>
+                                        <Button x:Name="FunctionButton"
+                                                Grid.Column="1"
+                                                MinWidth="34"
+                                                Margin="{ThemeResource HelperButtonThemePadding}"
+                                                VerticalAlignment="Stretch"
+                                                Style="{StaticResource EquationTextBoxButtonStyle}"
+                                                Background="{TemplateBinding EquationColor}"
+                                                Foreground="{TemplateBinding EquationColor}"
+                                                BorderThickness="{TemplateBinding BorderThickness}"
+                                                FontSize="{TemplateBinding FontSize}"
+                                                AutomationProperties.AccessibilityView="Raw"
+                                                Content="ƒₓ"
+                                                IsTabStop="False"
+                                                Visibility="Collapsed"/>
+                                    </Grid>
+                                </Border>
+
+                                <ContentPresenter x:Name="KeyGraphFeaturesContentPresenter"
+                                                  Grid.Row="1"
+                                                  Grid.Column="0"
+                                                  Grid.ColumnSpan="2"
+                                                  AutomationProperties.AccessibilityView="Raw"
+                                                  Content="{TemplateBinding KeyGraphFeaturesContent}"/>
+                            </Grid>
+                        </ControlTemplate>
+                    </Setter.Value>
+                </Setter>
+            </Style>
         </ResourceDictionary>
     </Application.Resources>
 </Application>
diff --git a/src/Calculator/Calculator.vcxproj b/src/Calculator/Calculator.vcxproj
index 6c40aa2..68448d7 100644
--- a/src/Calculator/Calculator.vcxproj
+++ b/src/Calculator/Calculator.vcxproj
@@ -255,6 +255,7 @@
     <ClInclude Include="Converters\RadixToStringConverter.h" />
     <ClInclude Include="Converters\VisibilityNegationConverter.h" />
     <ClInclude Include="Controls\HorizontalNoOverflowStackPanel.h" />
+    <ClInclude Include="Controls\EquationTextBox.h" />
     <ClInclude Include="pch.h" />
     <ClInclude Include="App.xaml.h">
       <DependentUpon>App.xaml</DependentUpon>
@@ -397,6 +398,7 @@
     <ClCompile Include="Converters\RadixToStringConverter.cpp" />
     <ClCompile Include="Converters\VisibilityNegationConverter.cpp" />
     <ClCompile Include="Controls\HorizontalNoOverflowStackPanel.cpp" />
+    <ClCompile Include="Controls\EquationTextBox.cpp" />
     <ClCompile Include="pch.cpp">
       <PrecompiledHeader Condition="'$(Configuration)|$(Platform)'=='Debug|Win32'">Create</PrecompiledHeader>
       <PrecompiledHeader Condition="'$(Configuration)|$(Platform)'=='Release|Win32'">Create</PrecompiledHeader>
diff --git a/src/Calculator/Calculator.vcxproj.filters b/src/Calculator/Calculator.vcxproj.filters
index bc22d78..75e0a58 100644
--- a/src/Calculator/Calculator.vcxproj.filters
+++ b/src/Calculator/Calculator.vcxproj.filters
@@ -314,6 +314,11 @@
     <ClCompile Include="Controls\HorizontalNoOverflowStackPanel.cpp">
       <Filter>Controls</Filter>
     </ClCompile>
+    <ClCompile Include="Views\GraphingCalculator\EquationInputArea.xaml.cpp" />
+    <ClCompile Include="Views\GraphingCalculator\GraphingCalculator.xaml.cpp" />
+    <ClCompile Include="Controls\EquationTextBox.cpp">
+      <Filter>Controls</Filter>
+    </ClCompile>
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="pch.h" />
@@ -416,6 +421,11 @@
     <ClInclude Include="Controls\HorizontalNoOverflowStackPanel.h">
       <Filter>Controls</Filter>
     </ClInclude>
+    <ClInclude Include="Views\GraphingCalculator\EquationInputArea.xaml.h" />
+    <ClInclude Include="Views\GraphingCalculator\GraphingCalculator.xaml.h" />
+    <ClInclude Include="Controls\EquationTextBox.h">
+      <Filter>Controls</Filter>
+    </ClInclude>
   </ItemGroup>
   <ItemGroup>
     <AppxManifest Include="Package.appxmanifest" />
diff --git a/src/Calculator/Controls/EquationTextBox.cpp b/src/Calculator/Controls/EquationTextBox.cpp
new file mode 100644
index 0000000..6416bcc
--- /dev/null
+++ b/src/Calculator/Controls/EquationTextBox.cpp
@@ -0,0 +1,220 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+#include "pch.h"
+#include "EquationTextBox.h"
+#include "CalcViewModel/GraphingCalculator/EquationViewModel.h"
+
+using namespace std;
+using namespace Platform;
+using namespace CalculatorApp;
+using namespace CalculatorApp::Common;
+using namespace CalculatorApp::Controls;
+using namespace CalculatorApp::ViewModel;
+using namespace Windows::Foundation;
+using namespace Windows::UI::Xaml;
+using namespace Windows::UI::Xaml::Controls;
+using namespace Windows::UI::Xaml::Input;
+using namespace Windows::UI::Xaml::Controls::Primitives;
+using namespace Windows::UI::Text;
+
+DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationColor);
+DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, KeyGraphFeaturesContent);
+DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, ColorChooserFlyout);
+
+void EquationTextBox::OnApplyTemplate()
+{
+    m_equationButton = dynamic_cast<Button^>(GetTemplateChild("EquationButton"));
+    m_richEditBox = dynamic_cast<RichEditBox^>(GetTemplateChild("EquationTextBox"));
+    m_deleteButton = dynamic_cast<Button^>(GetTemplateChild("DeleteButton"));
+    m_removeButton = dynamic_cast<Button^>(GetTemplateChild("RemoveButton"));
+    m_functionButton = dynamic_cast<Button^>(GetTemplateChild("FunctionButton"));
+    m_colorChooserButton = dynamic_cast<ToggleButton^>(GetTemplateChild("ColorChooserButton"));
+
+    if (m_richEditBox != nullptr)
+    {
+        m_richEditBox->GotFocus += ref new RoutedEventHandler(this, &EquationTextBox::OnRichEditBoxGotFocus);
+        m_richEditBox->LostFocus += ref new RoutedEventHandler(this, &EquationTextBox::OnRichEditBoxLostFocus);
+        m_richEditBox->TextChanged += ref new RoutedEventHandler(this, &EquationTextBox::OnRichEditBoxTextChanged);
+    }
+
+    if (m_equationButton != nullptr)
+    {
+        m_equationButton->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnEquationButtonClicked);
+    }
+
+    if (m_deleteButton != nullptr)
+    {
+        m_deleteButton->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnDeleteButtonClicked);
+    }
+
+    if (m_removeButton != nullptr)
+    {
+        m_removeButton->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnRemoveButtonClicked);
+    }
+
+    if (m_colorChooserButton != nullptr)
+    {
+        m_colorChooserButton->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnColorChooserButtonClicked);
+    }
+
+    if (m_functionButton != nullptr)
+    {
+        m_functionButton->Click += ref new RoutedEventHandler(this, &EquationTextBox::OnFunctionButtonClicked);
+    }
+
+    if (ColorChooserFlyout != nullptr)
+    {
+        ColorChooserFlyout->Opened += ref new EventHandler<Object^>(this, &EquationTextBox::OnColorFlyoutOpened);
+        ColorChooserFlyout->Closed += ref new EventHandler<Object^>(this, &EquationTextBox::OnColorFlyoutClosed);
+    }
+}
+
+void EquationTextBox::OnPointerEntered(PointerRoutedEventArgs^ e)
+{
+    m_isPointerOver = true;
+    UpdateCommonVisualState();
+}
+
+void EquationTextBox::OnPointerExited(PointerRoutedEventArgs^ e)
+{
+    m_isPointerOver = false;
+    UpdateCommonVisualState();
+}
+
+void EquationTextBox::OnPointerCanceled(PointerRoutedEventArgs^ e)
+{
+    m_isPointerOver = false;
+    UpdateCommonVisualState();
+}
+
+void EquationTextBox::OnPointerCaptureLost(PointerRoutedEventArgs^ e)
+{
+    m_isPointerOver = false;
+    UpdateCommonVisualState();
+}
+
+void EquationTextBox::OnColorFlyoutOpened(Object^ sender, Object^ e)
+{
+    m_isColorChooserFlyoutOpen = true;
+    UpdateCommonVisualState();
+}
+
+void EquationTextBox::OnColorFlyoutClosed(Object^ sender, Object^ e)
+{
+    m_colorChooserButton->IsChecked = false;
+    m_isColorChooserFlyoutOpen = false;
+    UpdateCommonVisualState();
+}
+
+void EquationTextBox::OnRichEditBoxTextChanged(Object^ sender, RoutedEventArgs^ e)
+{
+    UpdateDeleteButtonVisualState();
+}
+
+void EquationTextBox::OnRichEditBoxGotFocus(Object^ sender, RoutedEventArgs^ e)
+{
+    m_isFocused = true;
+    UpdateCommonVisualState();
+    UpdateDeleteButtonVisualState();
+}
+
+void EquationTextBox::OnRichEditBoxLostFocus(Object^ sender, RoutedEventArgs^ e)
+{
+    m_isFocused = false;
+    UpdateCommonVisualState();
+    UpdateDeleteButtonVisualState();
+}
+
+void EquationTextBox::OnDeleteButtonClicked(Object^ sender, RoutedEventArgs^ e)
+{
+    if (m_richEditBox != nullptr)
+    {
+        m_richEditBox->TextDocument->SetText(::TextSetOptions::None, L"");
+    }
+}
+
+void EquationTextBox::OnEquationButtonClicked(Object^ sender, RoutedEventArgs^ e)
+{
+
+}
+
+void EquationTextBox::OnRemoveButtonClicked(Object^ sender, RoutedEventArgs^ e)
+{
+    RemoveButtonClicked(this, ref new RoutedEventArgs());
+}
+
+void EquationTextBox::OnColorChooserButtonClicked(Object^ sender, RoutedEventArgs^ e)
+{
+    if (ColorChooserFlyout != nullptr && m_richEditBox != nullptr)
+    {
+        ColorChooserFlyout->ShowAt(m_richEditBox);
+    }
+}
+
+void EquationTextBox::OnFunctionButtonClicked(Object^ sender, RoutedEventArgs^ e)
+{
+    auto equationViewModel = static_cast<EquationViewModel^>(DataContext);
+    equationViewModel->KeyGraphFeaturesVisibility = (equationViewModel->KeyGraphFeaturesVisibility == ::Visibility::Collapsed) ? ::Visibility::Visible : ::Visibility::Collapsed;
+    UpdateCommonVisualState();
+}
+
+void EquationTextBox::UpdateDeleteButtonVisualState()
+{
+    String^ state;
+
+    if (ShouldDeleteButtonBeVisible())
+    {
+        state = "ButtonVisible";
+    }
+    else
+    {
+        state = "ButtonCollapsed";
+    }
+
+    VisualStateManager::GoToState(this, state, true);
+}
+
+void EquationTextBox::UpdateCommonVisualState()
+{
+    String^ state = "Normal";
+
+    if (m_isFocused)
+    {
+        state = "Focused";
+    }
+    else if (m_isPointerOver || m_isColorChooserFlyoutOpen)
+    {
+        state = "PointerOver";
+    }
+
+    VisualStateManager::GoToState(this, state, true);
+}
+
+
+Platform::String^ EquationTextBox::GetEquationText()
+{
+    String^ text;
+
+    if (m_richEditBox != nullptr)
+    {
+        m_richEditBox->TextDocument->GetText(::TextGetOptions::NoHidden, &text);
+    }
+
+    return text;
+}
+
+void EquationTextBox::SetEquationText(Platform::String^ equationText)
+{
+    if (m_richEditBox != nullptr)
+    {
+        m_richEditBox->TextDocument->SetText(::TextSetOptions::None, equationText);
+    }
+}
+
+
+bool EquationTextBox::ShouldDeleteButtonBeVisible()
+{
+    return (!GetEquationText()->IsEmpty() && m_isFocused);
+
+}
diff --git a/src/Calculator/Controls/EquationTextBox.h b/src/Calculator/Controls/EquationTextBox.h
new file mode 100644
index 0000000..f5e5238
--- /dev/null
+++ b/src/Calculator/Controls/EquationTextBox.h
@@ -0,0 +1,66 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "CalcViewModel/Common/Utils.h"
+
+namespace CalculatorApp
+{
+    namespace Controls
+    {
+        public ref class EquationTextBox sealed : public Windows::UI::Xaml::Controls::Control
+        {
+        public:
+            EquationTextBox()
+            {
+            }
+
+            DEPENDENCY_PROPERTY_OWNER(EquationTextBox);
+            DEPENDENCY_PROPERTY(Windows::UI::Xaml::Media::SolidColorBrush^, EquationColor);
+            DEPENDENCY_PROPERTY(Windows::UI::Xaml::UIElement^, KeyGraphFeaturesContent);
+            DEPENDENCY_PROPERTY(Windows::UI::Xaml::Controls::Flyout^, ColorChooserFlyout);
+
+            event Windows::UI::Xaml::RoutedEventHandler^ RemoveButtonClicked;
+
+            Platform::String^ GetEquationText();
+            void SetEquationText(Platform::String^ equationText);
+
+        protected:
+            virtual void OnApplyTemplate() override;
+            virtual void OnPointerEntered(Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e) override;
+            virtual void OnPointerExited(Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e) override;
+            virtual void OnPointerCanceled(Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e) override;
+            virtual void OnPointerCaptureLost(Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e) override;
+
+        private:
+            void UpdateCommonVisualState();
+            void UpdateDeleteButtonVisualState();
+            bool ShouldDeleteButtonBeVisible();
+
+            void OnRichEditBoxGotFocus(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+            void OnRichEditBoxLostFocus(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+            void OnRichEditBoxTextChanged(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+
+            void OnDeleteButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+            void OnEquationButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+            void OnRemoveButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+            void OnColorChooserButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+            void OnFunctionButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+
+            void OnColorFlyoutOpened(Platform::Object^ sender, Platform::Object^ e);
+            void OnColorFlyoutClosed(Platform::Object^ sender, Platform::Object^ e);
+
+            Windows::UI::Xaml::Controls::RichEditBox^ m_richEditBox;
+            Windows::UI::Xaml::Controls::Button^ m_equationButton;
+            Windows::UI::Xaml::Controls::Button^ m_deleteButton;
+            Windows::UI::Xaml::Controls::Button^ m_removeButton;
+            Windows::UI::Xaml::Controls::Button^ m_functionButton;
+            Windows::UI::Xaml::Controls::Primitives::ToggleButton^ m_colorChooserButton;
+
+            bool m_isFocused;
+            bool m_isPointerOver;
+            bool m_isColorChooserFlyoutOpen;
+        };
+    }
+}
diff --git a/src/Calculator/Resources/en-US/Resources.resw b/src/Calculator/Resources/en-US/Resources.resw
index 9233a5a..10e8d95 100644
--- a/src/Calculator/Resources/en-US/Resources.resw
+++ b/src/Calculator/Resources/en-US/Resources.resw
@@ -3407,12 +3407,12 @@
     <value>Y</value>
     <comment>{Locked}This is the value that comes from the VirtualKey enum that represents the button. This value is not localized and must be one value that comes from the Windows::System::VirtualKey enum.</comment>
   </data>
-  <data name="EquationInputAreaHeader.Text" xml:space="preserve">
-    <value>Equations</value>
-    <comment>The text that shows as the header for the equation input area in Graphing Calculator mode.</comment>
-  </data>
   <data name="graphingPowerButton.[using:CalculatorApp.Common]KeyboardShortcutManager.Character" xml:space="preserve">
     <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="EquationInputButtonPlaceholderText" xml:space="preserve">
+    <value>Add Equation</value>
+    <comment>Placeholder text for the equation input button</comment>
+  </data>
 </root>
diff --git a/src/Calculator/Resources/es-ES/Resources.resw b/src/Calculator/Resources/es-ES/Resources.resw
index e2e44b8..3da471d 100644
--- a/src/Calculator/Resources/es-ES/Resources.resw
+++ b/src/Calculator/Resources/es-ES/Resources.resw
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <root>
   <!-- 
     Microsoft ResX Schema 
@@ -2907,4 +2907,4 @@
     <value>Contrato de servicios de Microsoft</value>
     <comment>Displayed on a link to the Microsoft Services Agreement in the about this app information</comment>
   </data>
-</root>
\ No newline at end of file
+</root>
diff --git a/src/Calculator/Views/Calculator.xaml.h b/src/Calculator/Views/Calculator.xaml.h
index 5ec5324..f0f8cd6 100644
--- a/src/Calculator/Views/Calculator.xaml.h
+++ b/src/Calculator/Views/Calculator.xaml.h
@@ -12,6 +12,7 @@
 #include "Controls/CalculatorButton.h"
 #include "Controls/CalculationResult.h"
 #include "Controls/OverflowTextBlock.h"
+#include "Controls/EquationTextBox.h"
 #include "CalcViewModel/HistoryViewModel.h"
 #include "Views/CalculatorProgrammerDisplayPanel.xaml.h"
 #include "Views/CalculatorProgrammerOperators.xaml.h"
diff --git a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
index 5da0818..1c09527 100644
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
@@ -1,6 +1,7 @@
 <UserControl x:Class="CalculatorApp.EquationInputArea"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:controls="using:CalculatorApp.Controls"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:vm="using:CalculatorApp.ViewModel"
@@ -11,76 +12,71 @@
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
-            <RowDefinition/>
+            <RowDefinition Height="Auto"/>
         </Grid.RowDefinitions>
 
-        <Grid Grid.Row="0" Margin="0,0,17,0">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition/>
-                <ColumnDefinition Width="Auto"/>
-            </Grid.ColumnDefinitions>
-
-            <TextBlock x:Uid="EquationInputAreaHeader"
-                       Grid.Column="0"
-                       Style="{ThemeResource SubheaderTextBlockStyle}"
-                       FontSize="20"/>
-
-            <Button Grid.Column="1"
-                    Click="AddEquationButton_Click"
-                    Content="+"/>
-        </Grid>
-
         <ListView x:Name="EquationInputList"
-                  Grid.Row="2"
-                  Margin="0,4,0,0"
+                  Grid.Row="0"
+                  Margin="0,8,0,0"
                   IsItemClickEnabled="False"
                   ItemsSource="{x:Bind Equations}"
                   SelectionMode="None">
 
-            <ListView.Resources>
-                <x:Double x:Key="ItemHeight">40</x:Double>
-            </ListView.Resources>
-
             <ListView.ItemContainerStyle>
                 <Style TargetType="ListViewItem">
                     <Setter Property="IsTabStop" Value="False"/>
                     <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                     <Setter Property="Padding" Value="0"/>
-                    <Setter Property="Margin" Value="0,0,17,1"/>
+                    <Setter Property="Margin" Value="0,0,0,2"/>
                 </Style>
             </ListView.ItemContainerStyle>
 
             <ListView.ItemTemplate>
                 <DataTemplate x:DataType="vm:EquationViewModel">
-                    <Grid Height="{StaticResource ItemHeight}">
+                    <Grid>
                         <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="Auto"/>
                             <ColumnDefinition/>
                         </Grid.ColumnDefinitions>
                         <Grid.Resources>
                             <SolidColorBrush x:Key="LineColorBrush" Color="{x:Bind LineColor, Mode=OneWay}"/>
                         </Grid.Resources>
-                        <Grid.Background>
-                            <StaticResource ResourceKey="LineColorBrush"/>
-                        </Grid.Background>
 
-                        <Button Width="{StaticResource ItemHeight}"
-                                Height="{StaticResource ItemHeight}"
-                                Background="{StaticResource LineColorBrush}"/>
+                        <controls:EquationTextBox x:Uid="EquationInputButton"
+                                                  Grid.Column="1"
+                                                  Margin="0,0,3,0"
+                                                  Style="{StaticResource EquationTextBoxStyle}"
+                                                  GotFocus="InputTextBox_GotFocus"
+                                                  KeyUp="InputTextBox_KeyUp"
+                                                  LostFocus="InputTextBox_LostFocus"
+                                                  RemoveButtonClicked="EquationTextBox_RemoveButtonClicked">
+                            <controls:EquationTextBox.EquationColor>
+                                <SolidColorBrush x:Name="EquationLineColor" Color="{x:Bind LineColor, Mode=OneWay}"/>
+                            </controls:EquationTextBox.EquationColor>
+                            <controls:EquationTextBox.KeyGraphFeaturesContent>
+                                <StackPanel x:Name="KeyGraphFeaturesGrid" Visibility="{x:Bind KeyGraphFeaturesVisibility, Mode=OneWay}">
+                                    <TextBlock Text="Key Graph Features"/>
+                                    <TextBlock Text="{x:Bind Expression, Mode=OneWay}"/>
+                                </StackPanel>
+                            </controls:EquationTextBox.KeyGraphFeaturesContent>
+                            <controls:EquationTextBox.ColorChooserFlyout>
+                                <Flyout x:Name="ColorChooserFlyout"
+                                        x:Uid="ColorChooserFlyout"
+                                        Placement="Bottom">
+                                    <StackPanel>
+                                        <ColorPicker x:Name="EquationColorPicker" Color="{x:Bind LineColor, Mode=TwoWay}"/>
+                                    </StackPanel>
+                                </Flyout>
+                            </controls:EquationTextBox.ColorChooserFlyout>
+                        </controls:EquationTextBox>
 
-                        <Rectangle x:Name="InputBackplate"
-                                   Grid.Column="1"
-                                   Margin="0,2,3,2"
-                                   Fill="White"/>
-
-                        <TextBox Grid.Column="1"
-                                 Margin="0,2,3,2"
-                                 GotFocus="InputTextBox_GotFocus"
-                                 KeyUp="InputTextBox_KeyUp"
-                                 LostFocus="InputTextBox_LostFocus"/>
                     </Grid>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
+
+        <Button Grid.Row="1"
+                Margin="4"
+                Click="AddEquationButton_Click"
+                Content="+"/>
     </Grid>
 </UserControl>
diff --git a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
index 5c577ce..72bc0d9 100644
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
@@ -1,10 +1,12 @@
 #include "pch.h"
 #include "EquationInputArea.xaml.h"
 #include "CalcViewModel/Common/KeyboardShortcutManager.h"
+#include "Controls/EquationTextBox.h"
 
 using namespace CalculatorApp;
 using namespace CalculatorApp::Common;
 using namespace CalculatorApp::ViewModel;
+using namespace CalculatorApp::Controls;
 using namespace Platform;
 using namespace std;
 using namespace Windows::System;
@@ -12,6 +14,7 @@ using namespace Windows::UI;
 using namespace Windows::UI::ViewManagement;
 using namespace Windows::UI::Xaml;
 using namespace Windows::UI::Xaml::Controls;
+using namespace Windows::UI::Xaml::Controls::Primitives;
 using namespace Windows::UI::Xaml::Input;
 
 namespace
@@ -51,13 +54,6 @@ void EquationInputArea::OnEquationsPropertyChanged()
     if (Equations != nullptr && Equations->Size == 0)
     {
         AddNewEquation();
-
-        // For now, the first equation needs to be y = 0.
-        // We can remove this when we can create empty graphs.
-        if (EquationViewModel^ eqvm = Equations->GetAt(0))
-        {
-            eqvm->Expression = L"0";
-        }
     }
 }
 
@@ -72,7 +68,6 @@ void EquationInputArea::AddNewEquation()
     eq->LineColor = GetNextLineColor();
 
     Equations->Append(eq);
-    EquationInputList->ScrollIntoView(eq);
 }
 
 void EquationInputArea::InputTextBox_GotFocus(Object^ sender, RoutedEventArgs^ e)
@@ -84,18 +79,18 @@ void EquationInputArea::InputTextBox_LostFocus(Object^ sender, RoutedEventArgs^
 {
     KeyboardShortcutManager::HonorShortcuts(true);
     
-    auto tb = static_cast<TextBox^>(sender);
+    auto tb = static_cast<EquationTextBox^>(sender);
     auto eq = static_cast<EquationViewModel^>(tb->DataContext);
-    tb->Text = eq->Expression;
+    tb->SetEquationText(eq->Expression);
 }
 
 void EquationInputArea::InputTextBox_KeyUp(Object^ sender, KeyRoutedEventArgs^ e)
 {
     if (e->Key == VirtualKey::Enter)
     {
-        auto tb = static_cast<TextBox^>(sender);
+        auto tb = static_cast<EquationTextBox^>(sender);
         auto eq = static_cast<EquationViewModel^>(tb->DataContext);
-        eq->Expression = tb->Text;
+        eq->Expression = tb->GetEquationText();
 
         e->Handled = true;
     }
@@ -106,3 +101,15 @@ Color EquationInputArea::GetNextLineColor()
     m_lastLineColorIndex = (m_lastLineColorIndex + 1) % lineColorsSize;
     return lineColors[m_lastLineColorIndex];
 }
+
+
+void EquationInputArea::EquationTextBox_RemoveButtonClicked(Object^ sender, RoutedEventArgs^ e)
+{
+    auto tb = static_cast<EquationTextBox^>(sender);
+    auto eq = static_cast<EquationViewModel^>(tb->DataContext);
+    unsigned int index;
+    if (Equations->IndexOf(eq, &index))
+    {
+        Equations->RemoveAt(index);
+    }
+}
diff --git a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h
index ad5dee7..ef7a471 100644
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h
@@ -29,5 +29,6 @@ namespace CalculatorApp
 
     private:
         int m_lastLineColorIndex;
+        void EquationTextBox_RemoveButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
     };
 }
diff --git a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
index 24f096f..a1ddbb5 100644
--- a/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
+++ b/src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml
@@ -43,10 +43,10 @@
 
         <!-- Right portion of the screen -->
         <Grid x:Name="RightGrid"
-              Grid.Row="0"
+              Grid.Row="1"
               Grid.RowSpan="2"
               Grid.Column="1"
-              Margin="4,0,4,0">
+              Margin="0,0,0,0">
             <Grid.RowDefinitions>
                 <RowDefinition Height="5*"/>
                 <RowDefinition Height="3*"/>
diff --git a/src/GraphControl/Control/EquationCollection.h b/src/GraphControl/Control/EquationCollection.h
index d048eeb..92a0eed 100644
--- a/src/GraphControl/Control/EquationCollection.h
+++ b/src/GraphControl/Control/EquationCollection.h
@@ -35,8 +35,6 @@ namespace GraphControl
             m_tokens.emplace_back(
                 value->PropertyChanged += ref new GraphControl::PropertyChangedEventHandler(this, &EquationCollection::OnEquationPropertyChanged)
             );
-
-            EquationChanged();
         }
 
         virtual void Clear()
@@ -49,8 +47,6 @@ namespace GraphControl
 
             m_vector->Clear();
             m_tokens.clear();
-
-            EquationChanged();
         }
 
         virtual GraphControl::Equation^ GetAt(unsigned int index)
@@ -80,8 +76,6 @@ namespace GraphControl
                 m_tokens.begin() + index,
                 value->PropertyChanged += ref new PropertyChangedEventHandler(this, &EquationCollection::OnEquationPropertyChanged)
             );
-
-            EquationChanged();
         }
 
         virtual void RemoveAt(unsigned int index)
@@ -90,8 +84,6 @@ namespace GraphControl
 
             m_vector->RemoveAt(index);
             m_tokens.erase(m_tokens.begin() + index);
-
-            EquationChanged();
         }
 
         virtual void RemoveAtEnd()
@@ -104,8 +96,6 @@ namespace GraphControl
             }
 
             m_vector->RemoveAtEnd();
-
-            EquationChanged();
         }
 
         virtual void ReplaceAll(const Platform::Array< GraphControl::Equation^ >^ items)
@@ -124,8 +114,6 @@ namespace GraphControl
             }
 
             m_vector->ReplaceAll(items);
-
-            EquationChanged();
         }
 
         virtual void SetAt(unsigned int index, GraphControl::Equation^ value)
@@ -135,8 +123,6 @@ namespace GraphControl
             m_vector->SetAt(index, value);
             m_tokens[index] =
                 value->PropertyChanged += ref new PropertyChangedEventHandler(this, &EquationCollection::OnEquationPropertyChanged);
-
-            EquationChanged();
         }
         #pragma endregion
 
diff --git a/src/GraphControl/Control/Grapher.cpp b/src/GraphControl/Control/Grapher.cpp
index 9cd33ca..e7a026f 100644
--- a/src/GraphControl/Control/Grapher.cpp
+++ b/src/GraphControl/Control/Grapher.cpp
@@ -300,6 +300,17 @@ namespace GraphControl
 
     void Grapher::OnEquationsVectorChanged(IObservableVector<Equation^>^ sender, IVectorChangedEventArgs^ event)
     {
+        if (event->CollectionChange == ::CollectionChange::ItemInserted || event->CollectionChange == ::CollectionChange::ItemChanged)
+        {
+            auto eq = sender->GetAt(event->Index);
+
+            // Don't update the graph unless the equations being added/modified is valid.
+            if (eq->Expression->IsEmpty())
+            {
+                return;
+            }
+        }
+
         UpdateGraph();
     }
 
@@ -313,9 +324,9 @@ namespace GraphControl
         if (m_renderMain && m_graph != nullptr)
         {
             auto validEqs = GetValidEquations();
+
             if (!validEqs.empty())
             {
-
                 wstringstream ss{};
                 ss << L"show2d(";
 
@@ -333,7 +344,8 @@ namespace GraphControl
                 ss << L")";
 
                 wstring request = ss.str();
-                if (auto graphExpression = m_solver->ParseInput(request))
+                unique_ptr<IExpression> graphExpression;
+                if (graphExpression = m_solver->ParseInput(request))
                 {
                     if (m_graph->TryInitialize(graphExpression.get()))
                     {
@@ -343,6 +355,15 @@ namespace GraphControl
                     }
                 }
             }
+            else
+            {
+                if (m_graph->TryInitialize())
+                {
+                    UpdateGraphOptions(m_graph->GetOptions(), validEqs);
+
+                    m_renderMain->Graph = m_graph;
+                }
+            }
         }
     }
 
@@ -350,18 +371,21 @@ namespace GraphControl
     {
         options.SetForceProportional(ForceProportionalAxes);
 
-        vector<Graphing::Color> graphColors;
-        graphColors.reserve(validEqs.size());
-        for (Equation^ eq : validEqs)
+        if (!validEqs.empty())
         {
-            auto lineColor = eq->LineColor;
-            graphColors.emplace_back(
-                lineColor.R,
-                lineColor.G,
-                lineColor.B,
-                lineColor.A);
+            vector<Graphing::Color> graphColors;
+            graphColors.reserve(validEqs.size());
+            for (Equation^ eq : validEqs)
+            {
+                auto lineColor = eq->LineColor;
+                graphColors.emplace_back(
+                    lineColor.R,
+                    lineColor.G,
+                    lineColor.B,
+                    lineColor.A);
+            }
+            options.SetGraphColors(graphColors);
         }
-        options.SetGraphColors(graphColors);
     }
 
     vector<Equation^> Grapher::GetValidEquations()
diff --git a/src/GraphingInterfaces/IGraph.h b/src/GraphingInterfaces/IGraph.h
index 9cabaf7..6ff2912 100644
--- a/src/GraphingInterfaces/IGraph.h
+++ b/src/GraphingInterfaces/IGraph.h
@@ -12,7 +12,7 @@ namespace Graphing
     {
         virtual ~IGraph() = default;
 
-        virtual std::optional<std::vector<std::shared_ptr<IEquation>>> TryInitialize(const IExpression* graphingExp) = 0;
+        virtual std::optional<std::vector<std::shared_ptr<IEquation>>> TryInitialize(const IExpression* graphingExp = nullptr) = 0;
 
         virtual IGraphingOptions& GetOptions() = 0;