From a4b535e64fb37fa5ba211bade6d932d23791484c Mon Sep 17 00:00:00 2001
From: Pepe Rivera <joriv@microsoft.com>
Date: Thu, 23 May 2019 09:55:40 -0700
Subject: [PATCH] Start the UX for the equation text box

---
 src/Calculator/App.xaml                       | 519 ++++++++++++++++++
 src/Calculator/Calculator.vcxproj             |   2 +
 src/Calculator/Calculator.vcxproj.filters     |  14 +
 src/Calculator/Controls/EquationTextBox.cpp   |  56 ++
 src/Calculator/Controls/EquationTextBox.h     |  35 ++
 src/Calculator/Resources/en-US/Resources.resw |   4 +
 src/Calculator/Resources/es-ES/Resources.resw |   4 +-
 src/Calculator/Views/Calculator.xaml.h        |   1 +
 .../GraphingCalculator/EquationInputArea.xaml |  32 +-
 9 files changed, 649 insertions(+), 18 deletions(-)
 create mode 100644 src/Calculator/Controls/EquationTextBox.cpp
 create mode 100644 src/Calculator/Controls/EquationTextBox.h

diff --git a/src/Calculator/App.xaml b/src/Calculator/App.xaml
index cec835fb..114eb86d 100644
--- a/src/Calculator/App.xaml
+++ b/src/Calculator/App.xaml
@@ -1073,6 +1073,525 @@
                     </Setter.Value>
                 </Setter>
             </Style>
+            <Style x:Key="EquationTextBoxStyle" TargetType="Controls:EquationTextBox">
+                <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}"/>
+                <Setter Property="Background" Value="{ThemeResource TextControlBackground}"/>
+                <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}"/>
+                <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}"/>
+                <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="TextBox">
+                            <Grid>
+
+                                <Grid.Resources>
+                                    <Style x:Name="DeleteButtonStyle" TargetType="Button">
+                                        <Setter Property="Template">
+                                            <Setter.Value>
+                                                <ControlTemplate TargetType="Button">
+                                                    <Grid x:Name="ButtonLayoutGrid"
+                                                          Background="{ThemeResource TextControlButtonBackground}"
+                                                          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="{ThemeResource TextControlButtonBackgroundPointerOver}"/>
+                                                                        </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="{ThemeResource TextControlButtonForegroundPointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+
+                                                                <VisualState x:Name="Pressed">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}"/>
+                                                                        </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 TextControlButtonForeground}"
+                                                                   FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                                   FontSize="12"
+                                                                   FontStyle="Normal"
+                                                                   AutomationProperties.AccessibilityView="Raw"
+                                                                   Text="&#xE10A;"/>
+                                                    </Grid>
+                                                </ControlTemplate>
+                                            </Setter.Value>
+                                        </Setter>
+                                    </Style>
+
+                                    <Style x:Name="ColorChooserButtonStyle" TargetType="Button">
+                                        <Setter Property="Template">
+                                            <Setter.Value>
+                                                <ControlTemplate TargetType="Button">
+                                                    <Grid x:Name="ButtonLayoutGrid"
+                                                          Background="{ThemeResource TextControlButtonBackground}"
+                                                          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="{ThemeResource TextControlButtonBackgroundPointerOver}"/>
+                                                                        </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="{ThemeResource TextControlButtonForegroundPointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+
+                                                                <VisualState x:Name="Pressed">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}"/>
+                                                                        </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 TextControlButtonForeground}"
+                                                                   FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                                   FontSize="12"
+                                                                   FontStyle="Normal"
+                                                                   AutomationProperties.AccessibilityView="Raw"
+                                                                   Text="&#xE790;"/>
+                                                    </Grid>
+                                                </ControlTemplate>
+                                            </Setter.Value>
+                                        </Setter>
+                                    </Style>
+
+                                    <Style x:Name="FunctionButtonStyle" TargetType="Button">
+                                        <Setter Property="Template">
+                                            <Setter.Value>
+                                                <ControlTemplate TargetType="Button">
+                                                    <Grid x:Name="ButtonLayoutGrid"
+                                                          Background="{ThemeResource TextControlButtonBackground}"
+                                                          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="{ThemeResource TextControlButtonBackgroundPointerOver}"/>
+                                                                        </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="{ThemeResource TextControlButtonForegroundPointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+
+                                                                <VisualState x:Name="Pressed">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}"/>
+                                                                        </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 TextControlButtonForeground}"
+                                                                   FontSize="12"
+                                                                   FontStyle="Normal"
+                                                                   AutomationProperties.AccessibilityView="Raw"
+                                                                   Text="ƒₓ"/>
+                                                    </Grid>
+                                                </ControlTemplate>
+                                            </Setter.Value>
+                                        </Setter>
+                                    </Style>
+
+                                    <Style x:Name="RemoveButtonStyle" TargetType="Button">
+                                        <Setter Property="Template">
+                                            <Setter.Value>
+                                                <ControlTemplate TargetType="Button">
+                                                    <Grid x:Name="ButtonLayoutGrid"
+                                                          Background="{ThemeResource TextControlButtonBackground}"
+                                                          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="{ThemeResource TextControlButtonBackgroundPointerOver}"/>
+                                                                        </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="{ThemeResource TextControlButtonForegroundPointerOver}"/>
+                                                                        </ObjectAnimationUsingKeyFrames>
+                                                                    </Storyboard>
+                                                                </VisualState>
+
+                                                                <VisualState x:Name="Pressed">
+                                                                    <Storyboard>
+                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}"/>
+                                                                        </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 TextControlButtonForeground}"
+                                                                   FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                                   FontSize="12"
+                                                                   FontStyle="Normal"
+                                                                   AutomationProperties.AccessibilityView="Raw"
+                                                                   Text="&#xECC9;"/>
+                                                    </Grid>
+                                                </ControlTemplate>
+                                            </Setter.Value>
+                                        </Setter>
+                                    </Style>
+                                </Grid.Resources>
+
+                                <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="Normal"/>
+
+                                        <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="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundDisabled}}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
+
+                                        <VisualState x:Name="PointerOver">
+
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundPointerOver}}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}"/>
+                                                </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="Focused">
+
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundFocused}}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}"/>
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
+                                                </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>
+                                    <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>
+
+                                <ContentPresenter x:Name="HeaderContentPresenter"
+                                                  Grid.Row="0"
+                                                  Grid.Column="0"
+                                                  Grid.ColumnSpan="4"
+                                                  Margin="{ThemeResource TextBoxTopHeaderMargin}"
+                                                  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="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
+                                           IsHitTestVisible="False"
+                                           Text="{TemplateBinding PlaceholderText}"
+                                           TextAlignment="{TemplateBinding TextAlignment}"
+                                           TextWrapping="{TemplateBinding TextWrapping}"/>
+                                <Button x:Name="DeleteButton"
+                                        Grid.Row="1"
+                                        Grid.Column="3"
+                                        MinWidth="34"
+                                        Margin="{ThemeResource HelperButtonThemePadding}"
+                                        VerticalAlignment="Stretch"
+                                        Style="{StaticResource DeleteButtonStyle}"
+                                        BorderThickness="{TemplateBinding BorderThickness}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        AutomationProperties.AccessibilityView="Raw"
+                                        IsTabStop="False"
+                                        Visibility="Collapsed"/>
+                                <Button x:Name="RemoveButton"
+                                        Grid.Row="1"
+                                        Grid.Column="3"
+                                        MinWidth="34"
+                                        Margin="{ThemeResource HelperButtonThemePadding}"
+                                        VerticalAlignment="Stretch"
+                                        Style="{StaticResource RemoveButtonStyle}"
+                                        BorderThickness="{TemplateBinding BorderThickness}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        AutomationProperties.AccessibilityView="Raw"
+                                        IsTabStop="False"
+                                        Visibility="Collapsed"/>
+                                <Button x:Name="ColorChooserButton"
+                                        Grid.Row="1"
+                                        Grid.Column="2"
+                                        MinWidth="34"
+                                        Margin="{ThemeResource HelperButtonThemePadding}"
+                                        VerticalAlignment="Stretch"
+                                        Style="{StaticResource ColorChooserButtonStyle}"
+                                        BorderThickness="{TemplateBinding BorderThickness}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        AutomationProperties.AccessibilityView="Raw"
+                                        IsTabStop="False"
+                                        Visibility="Collapsed"/>
+                                <Button x:Name="FunctionButton"
+                                        Grid.Row="1"
+                                        Grid.Column="1"
+                                        MinWidth="34"
+                                        Margin="{ThemeResource HelperButtonThemePadding}"
+                                        VerticalAlignment="Stretch"
+                                        Style="{StaticResource FunctionButtonStyle}"
+                                        BorderThickness="{TemplateBinding BorderThickness}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        AutomationProperties.AccessibilityView="Raw"
+                                        IsTabStop="False"
+                                        Visibility="Collapsed"/>
+                                <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>
         </ResourceDictionary>
     </Application.Resources>
 </Application>
diff --git a/src/Calculator/Calculator.vcxproj b/src/Calculator/Calculator.vcxproj
index 6c40aa2f..68448d7a 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 bc22d788..49e3f267 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" />
@@ -1582,4 +1592,8 @@
   <ItemGroup>
     <ResourceCompile Include="Calculator.rc" />
   </ItemGroup>
+  <ItemGroup>
+    <CopyFileToFolders Include="$(GraphingImplDll)" />
+    <CopyFileToFolders Include="$(GraphingEngineDll)" />
+  </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/src/Calculator/Controls/EquationTextBox.cpp b/src/Calculator/Controls/EquationTextBox.cpp
new file mode 100644
index 00000000..30b02140
--- /dev/null
+++ b/src/Calculator/Controls/EquationTextBox.cpp
@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+#include "pch.h"
+#include "EquationTextBox.h"
+
+using namespace Platform;
+using namespace CalculatorApp;
+using namespace CalculatorApp::Common;
+using namespace CalculatorApp::Controls;
+using namespace Windows::UI::Xaml;
+using namespace Windows::UI::Xaml::Controls;
+using namespace Windows::UI::Xaml::Input;
+
+
+EquationTextBox::EquationTextBox()
+{
+    m_buttonCursor = ref new Windows::UI::Core::CoreCursor(Windows::UI::Core::CoreCursorType::Hand, 0);
+}
+
+void EquationTextBox::OnApplyTemplate()
+{
+    TextBox::OnApplyTemplate();
+
+    m_removeButton = dynamic_cast<Button^>(GetTemplateChild("RemoveButton"));
+    m_colorChooserButton = dynamic_cast<Button^>(GetTemplateChild("ColorChooserButton"));
+    m_functionButton = dynamic_cast<Button^>(GetTemplateChild("FunctionButton"));
+
+    if (m_removeButton != nullptr)
+    {
+        m_removeButton->PointerEntered += ref new PointerEventHandler(this, &EquationTextBox::OnPointerEnteredButton);
+    }
+
+    if (m_colorChooserButton != nullptr)
+    {
+        m_colorChooserButton->PointerEntered += ref new PointerEventHandler(this, &EquationTextBox::OnPointerEnteredButton);
+    }
+
+    if (m_functionButton != nullptr)
+    {
+        m_functionButton->PointerEntered += ref new PointerEventHandler(this, &EquationTextBox::OnPointerEnteredButton);
+    }
+}
+
+
+
+void EquationTextBox::OnPointerEnteredButton(_In_ Object^ sender, _In_ PointerRoutedEventArgs^ e)
+{
+    m_cursorBeforePointerEntered = Window::Current->CoreWindow->PointerCursor;
+    Window::Current->CoreWindow->PointerCursor = m_buttonCursor;
+}
+
+void EquationTextBox::OnPointerExitedButton(_In_ Object^ sender, _In_ PointerRoutedEventArgs^ e)
+{
+
+}
diff --git a/src/Calculator/Controls/EquationTextBox.h b/src/Calculator/Controls/EquationTextBox.h
new file mode 100644
index 00000000..9c170b82
--- /dev/null
+++ b/src/Calculator/Controls/EquationTextBox.h
@@ -0,0 +1,35 @@
+// 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::TextBox
+        {
+        public:
+            EquationTextBox();
+
+            event Windows::UI::Xaml::RoutedEventHandler^ FunctionButtonClicked;
+            event Windows::UI::Xaml::RoutedEventHandler^ ColorChangeButtonClicked;
+            event Windows::UI::Xaml::RoutedEventHandler^ RemoveButtonClicked;
+
+        protected:
+            virtual void OnApplyTemplate() override;
+
+        private:
+            void OnPointerEnteredButton(_In_ Platform::Object^ sender, _In_ Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);
+            void OnPointerExitedButton(_In_ Platform::Object^ sender, _In_ Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);
+
+            Windows::UI::Core::CoreCursor^ m_cursorBeforePointerEntered;
+            Windows::UI::Core::CoreCursor^ m_buttonCursor;
+            Windows::UI::Xaml::Controls::Button^ m_removeButton;
+            Windows::UI::Xaml::Controls::Button^ m_colorChooserButton;
+            Windows::UI::Xaml::Controls::Button^ m_functionButton;
+        };
+    }
+}
diff --git a/src/Calculator/Resources/en-US/Resources.resw b/src/Calculator/Resources/en-US/Resources.resw
index 9233a5ae..acfbb2db 100644
--- a/src/Calculator/Resources/en-US/Resources.resw
+++ b/src/Calculator/Resources/en-US/Resources.resw
@@ -3415,4 +3415,8 @@
     <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="EquationInputButton.PlaceholderText" 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 e2e44b8e..3da471d9 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 5ec5324b..f0f8cd67 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 5da0818f..24726dda 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"
@@ -38,7 +39,7 @@
                   SelectionMode="None">
 
             <ListView.Resources>
-                <x:Double x:Key="ItemHeight">40</x:Double>
+                <x:Double x:Key="ItemHeight">44</x:Double>
             </ListView.Resources>
 
             <ListView.ItemContainerStyle>
@@ -60,24 +61,23 @@
                         <Grid.Resources>
                             <SolidColorBrush x:Key="LineColorBrush" Color="{x:Bind LineColor, Mode=OneWay}"/>
                         </Grid.Resources>
-                        <Grid.Background>
-                            <StaticResource ResourceKey="LineColorBrush"/>
-                        </Grid.Background>
+
+                        <controls:EquationTextBox x:Uid="EquationInputButton"
+                                                  Grid.Column="1"
+                                                  Height="44"
+                                                  Margin="0,0,3,0"
+                                                  Style="{StaticResource EquationTextBoxStyle}"
+                                                  BorderBrush="{StaticResource LineColorBrush}"
+                                                  BorderThickness="0"
+                                                  GotFocus="InputTextBox_GotFocus"
+                                                  KeyUp="InputTextBox_KeyUp"
+                                                  LostFocus="InputTextBox_LostFocus"/>
 
                         <Button Width="{StaticResource ItemHeight}"
                                 Height="{StaticResource ItemHeight}"
-                                Background="{StaticResource LineColorBrush}"/>
-
-                        <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"/>
+                                Background="{StaticResource LineColorBrush}"
+                                Foreground="{StaticResource SystemChromeWhiteColor}"
+                                Content="ƒₓ"/>
                     </Grid>
                 </DataTemplate>
             </ListView.ItemTemplate>