<UserControl x:Class="CalculatorApp.GraphingCalculator"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
             xmlns:converters="using:CalculatorApp.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:graphControl="using:GraphControl"
             xmlns:local="using:CalculatorApp"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="using:CalculatorApp.ViewModel"
             x:Name="Control"
             DataContextChanged="GraphingCalculator_DataContextChanged"
             mc:Ignorable="d">

    <UserControl.Resources>
        <ResourceDictionary>

            <Style x:Key="GraphToggleButtonStyle" TargetType="ToggleButton">
                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Margin" Value="-1"/>
                <Setter Property="Padding" Value="8"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="FontSize" Value="{StaticResource CaptionFontSize}"/>
                <Setter Property="FontWeight" Value="Normal"/>
            </Style>

            <Style x:Key="GraphButtonStyle" TargetType="Button">
                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Margin" Value="-1"/>
                <Setter Property="Padding" Value="8"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="FontSize" Value="{StaticResource CaptionFontSize}"/>
                <Setter Property="FontWeight" Value="Normal"/>
            </Style>

            <Style x:Key="GraphRepeatButtonStyle" TargetType="RepeatButton">
                <Setter Property="Background" Value="{ThemeResource AppControlTransparentButtonBackgroundBrush}"/>
                <Setter Property="Foreground" Value="{ThemeResource RepeatButtonForeground}"/>
                <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Margin" Value="-1"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Delay" Value="500"/>
                <Setter Property="Interval" Value="40"/>
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
                <Setter Property="FocusVisualMargin" Value="-3"/>
            </Style>

            <Style x:Key="SwitchModeToggleButtonStyle" TargetType="ToggleButton">
                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundTransparentBrush}"/>
                <Setter Property="BorderBrush" Value="{ThemeResource AppControlForegroundTransparentRevealBorderBrush}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Padding" Value="{ThemeResource ButtonPadding}"/>
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
                <Setter Property="FocusVisualMargin" Value="-3"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Grid x:Name="RootGrid"
                                  Background="{TemplateBinding Background}"
                                  CornerRadius="{TemplateBinding CornerRadius}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal">
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver"/>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </VisualState.Setters>
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed"/>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource AppControlPressedButtonFaceBrush}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </VisualState.Setters>
                                            <Storyboard>
                                                <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundDisabled}"/>
                                                <Setter Target="ContentPresenter.Opacity" Value="0.5"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Checked">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ToggleButtonRevealBorderBrushChecked}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemAccentColor}"/>
                                            </VisualState.Setters>
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="CheckedPointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver"/>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource AppControlHoverButtonFaceBrush}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemAccentColor}"/>
                                            </VisualState.Setters>
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="CheckedPressed">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed"/>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource AppControlPressedButtonFaceBrush}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemAccentColor}"/>
                                            </VisualState.Setters>
                                            <Storyboard>
                                                <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="CheckedDisabled">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundDisabled}"/>
                                                <Setter Target="ContentPresenter.Opacity" Value="0.5"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemAccentColor}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Indeterminate">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundIndeterminate}"/>
                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ToggleButtonRevealBorderBrushIndeterminate}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundIndeterminate}"/>
                                            </VisualState.Setters>
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="IndeterminatePointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver"/>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundIndeterminatePointerOver}"/>
                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ToggleButtonRevealBorderBrushIndeterminatePointerOver}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundIndeterminatePointerOver}"/>
                                            </VisualState.Setters>
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="IndeterminatePressed">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed"/>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundIndeterminatePressed}"/>
                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ToggleButtonRevealBorderBrushIndeterminatePressed}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundIndeterminatePressed}"/>
                                            </VisualState.Setters>
                                            <Storyboard>
                                                <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="IndeterminateDisabled">
                                            <VisualState.Setters>
                                                <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonRevealBackgroundIndeterminateDisabled}"/>
                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ToggleButtonRevealBorderBrushIndeterminateDisabled}"/>
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundIndeterminateDisabled}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ContentPresenter x:Name="ContentPresenter"
                                                  Padding="{TemplateBinding Padding}"
                                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                  BorderBrush="{TemplateBinding BorderBrush}"
                                                  BorderThickness="{TemplateBinding BorderThickness}"
                                                  AutomationProperties.AccessibilityView="Raw"
                                                  Content="{TemplateBinding Content}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
                                                  CornerRadius="{TemplateBinding CornerRadius}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <Style x:Key="ThemedSwitchModeToggleButtonStyle"
                           BasedOn="{StaticResource SwitchModeToggleButtonStyle}"
                           TargetType="ToggleButton"/>
                    <Style x:Key="GraphControlCommandPanel" TargetType="Border">
                        <Setter Property="Background" Value="#80000000"/>
                        <Setter Property="CornerRadius" Value="4"/>
                    </Style>
                    <Style x:Key="ThemedGraphRepeatButtonStyle"
                           BasedOn="{StaticResource GraphRepeatButtonStyle}"
                           TargetType="RepeatButton"/>
                    <Style x:Key="ThemedGraphButtonStyle"
                           BasedOn="{StaticResource GraphButtonStyle}"
                           TargetType="Button"/>
                    <Style x:Key="ThemedGraphToggleButtonStyle"
                           BasedOn="{StaticResource GraphToggleButtonStyle}"
                           TargetType="ToggleButton"/>
                </ResourceDictionary>
                <ResourceDictionary x:Key="Light">
                    <Style x:Key="ThemedSwitchModeToggleButtonStyle"
                           BasedOn="{StaticResource SwitchModeToggleButtonStyle}"
                           TargetType="ToggleButton"/>
                    <Style x:Key="GraphControlCommandPanel" TargetType="Border">
                        <Setter Property="Background" Value="{StaticResource SystemControlAcrylicElementBrush}"/>
                        <Setter Property="BorderBrush" Value="#e0e0e0"/>
                        <Setter Property="BorderThickness" Value="1"/>
                        <Setter Property="CornerRadius" Value="4"/>
                    </Style>
                    <Style x:Key="ThemedGraphRepeatButtonStyle"
                           BasedOn="{StaticResource GraphRepeatButtonStyle}"
                           TargetType="RepeatButton"/>
                    <Style x:Key="ThemedGraphButtonStyle"
                           BasedOn="{StaticResource GraphButtonStyle}"
                           TargetType="Button"/>
                    <Style x:Key="ThemedGraphToggleButtonStyle"
                           BasedOn="{StaticResource GraphToggleButtonStyle}"
                           TargetType="ToggleButton"/>
                </ResourceDictionary>
                <ResourceDictionary x:Key="HighContrast">
                    <Style x:Key="ThemedSwitchModeToggleButtonStyle" TargetType="ToggleButton"/>
                    <Style x:Key="GraphControlCommandPanel" TargetType="Border"/>
                    <Style x:Key="ThemedGraphRepeatButtonStyle" TargetType="RepeatButton">
                        <Setter Property="Margin" Value="1"/>
                    </Style>
                    <Style x:Key="ThemedGraphButtonStyle" TargetType="Button">
                        <Setter Property="Margin" Value="1"/>
                    </Style>
                    <Style x:Key="ThemedGraphToggleButtonStyle" TargetType="ToggleButton">
                        <Setter Property="Margin" Value="1"/>
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid x:Name="RootGrid">
        <Grid.RowDefinitions>
            <RowDefinition x:Name="RowHamburger" Height="{StaticResource HamburgerHeightGridLength}"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="1*"
                              MinWidth="300"
                              MaxWidth="420"/>
        </Grid.ColumnDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="ColumnsState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="SmallState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Control.IsSmallState" Value="True"/>
                        <Setter Target="LeftGrid.(Grid.ColumnSpan)" Value="2"/>
                        <Setter Target="RightGrid.(Grid.ColumnSpan)" Value="2"/>
                        <Setter Target="RightGrid.(Grid.Column)" Value="0"/>
                        <Setter Target="SwitchModeToggleButton.Visibility" Value="Visible"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <!-- Top panel -->
        <Grid Grid.ColumnSpan="2">
            <ToggleButton x:Name="SwitchModeToggleButton"
                          x:Uid="SwitchModeToggleButton"
                          Margin="0,2,4,2"
                          HorizontalAlignment="Right"
                          VerticalAlignment="Stretch"
                          Style="{ThemeResource ThemedSwitchModeToggleButtonStyle}"
                          AutomationProperties.AutomationId="SwitchModeToggleButton"
                          AutomationProperties.Name="{x:Bind local:GraphingCalculator.GetInfoForSwitchModeToggleButton(SwitchModeToggleButton.IsChecked.Value), Mode=OneWay}"
                          Checked="SwitchModeToggleButton_Checked"
                          ToolTipService.ToolTip="{x:Bind local:GraphingCalculator.GetInfoForSwitchModeToggleButton(SwitchModeToggleButton.IsChecked.Value), Mode=OneWay}"
                          Unchecked="SwitchModeToggleButton_Checked"
                          Visibility="Collapsed">
                <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xF770;"/>
            </ToggleButton>
        </Grid>
        <!-- Left portion of the screen -->
        <Grid x:Name="LeftGrid"
              Grid.Row="1"
              Padding="0,4,0,0"
              Visibility="{x:Bind ShouldDisplayPanel(IsSmallState, SwitchModeToggleButton.IsChecked.Value, x:True), Mode=OneWay}">
            <Grid.Resources>
                <ResourceDictionary>
                    <ResourceDictionary.ThemeDictionaries>
                        <ResourceDictionary x:Key="Light">
                            <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#10000000"/>
                            <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#20000000"/>
                            <SolidColorBrush x:Key="RepeatButtonBackgroundPointerOver" Color="#10000000"/>
                            <SolidColorBrush x:Key="RepeatButtonBackgroundPressed" Color="#20000000"/>
                            <CornerRadius x:Key="TopButtonCornerRadius">4,4,0,0</CornerRadius>
                            <CornerRadius x:Key="BottomButtonCornerRadius">0,0,4,4</CornerRadius>
                            <CornerRadius x:Key="LeftButtonCornerRadius">4,0,0,4</CornerRadius>
                            <CornerRadius x:Key="RightButtonCornerRadius">0,4,4,0</CornerRadius>
                        </ResourceDictionary>
                        <ResourceDictionary x:Key="Dark">
                            <CornerRadius x:Key="TopButtonCornerRadius">4,4,0,0</CornerRadius>
                            <CornerRadius x:Key="BottomButtonCornerRadius">0,0,4,4</CornerRadius>
                            <CornerRadius x:Key="LeftButtonCornerRadius">4,0,0,4</CornerRadius>
                            <CornerRadius x:Key="RightButtonCornerRadius">0,4,4,0</CornerRadius>
                        </ResourceDictionary>
                        <ResourceDictionary x:Key="HighContrast">
                            <CornerRadius x:Key="TopButtonCornerRadius">0</CornerRadius>
                            <CornerRadius x:Key="BottomButtonCornerRadius">0</CornerRadius>
                            <CornerRadius x:Key="LeftButtonCornerRadius">0</CornerRadius>
                            <CornerRadius x:Key="RightButtonCornerRadius">0</CornerRadius>
                        </ResourceDictionary>
                    </ResourceDictionary.ThemeDictionaries>
                </ResourceDictionary>
            </Grid.Resources>
            <graphControl:Grapher Name="GraphingControl"
                                  ForceProportionalAxes="True"
                                  LosingFocus="GraphingControl_LosingFocus"
                                  LostFocus="GraphingControl_LostFocus"
                                  UseSystemFocusVisuals="True"
                                  VariablesUpdated="GraphingControl_VariablesUpdated">
                <graphControl:Grapher.Background>
                    <SolidColorBrush Color="White"/>
                </graphControl:Grapher.Background>
            </graphControl:Grapher>

            <Border MinHeight="36"
                    Margin="0,12,12,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Style="{ThemeResource GraphControlCommandPanel}"
                    RequestedTheme="Light">
                    <StackPanel Orientation="Horizontal">
                        <ToggleButton x:Name="ActiveTracing"
                                  MinWidth="40"
                                  Margin="0,-1"
                                  Style="{ThemeResource ThemedGraphToggleButtonStyle}"
                                  contract7Present:CornerRadius="{ThemeResource LeftButtonCornerRadius}"
                                  AutomationProperties.Name="{x:Bind local:GraphingCalculator.GetTracingLegend(GraphingControl.ActiveTracing), Mode=OneWay}"
                                  Checked="ActiveTracing_Checked"
                                  IsChecked="{x:Bind GraphingControl.ActiveTracing, Mode=TwoWay}"
                                  Unchecked="ActiveTracing_Unchecked">
                        <ToolTipService.ToolTip>
                            <ToolTip Content="{x:Bind ActiveTracing.(AutomationProperties.Name), Mode=OneWay}"/>
                        </ToolTipService.ToolTip>
                        <FontIcon FontFamily="{StaticResource CalculatorFontFamily}"
                                  FontSize="18"
                                  Glyph="&#xE3B3;"/>
                    </ToggleButton>

                    <Button x:Name="Share"
                            x:Uid="shareButton"
                            MinWidth="40"
                            Style="{ThemeResource ThemedGraphButtonStyle}"
                            contract7Present:CornerRadius="{ThemeResource RightButtonCornerRadius}"
                            Click="OnShareClick">
                        <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
                                  FontSize="18"
                                  Glyph="&#xE72D;"/>
                    </Button>
                </StackPanel>
            </Border>
            <Border MinWidth="36"
                    Margin="0,0,12,12"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    Style="{ThemeResource GraphControlCommandPanel}"
                    RequestedTheme="Light">
                <StackPanel Orientation="Vertical">

                    <RepeatButton x:Uid="zoomInButton"
                                  MinHeight="40"
                                  HorizontalAlignment="Stretch"
                                  Style="{ThemeResource ThemedGraphRepeatButtonStyle}"
                                  FontFamily="{StaticResource SymbolThemeFontFamily}"
                                  contract7Present:CornerRadius="{ThemeResource TopButtonCornerRadius}"
                                  AutomationProperties.AutomationId="zoomInButton"
                                  Command="{x:Bind ZoomInButtonPressed, Mode=OneTime}">
                        <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
                                  FontSize="14"
                                  Glyph="&#xE710;"/>
                    </RepeatButton>

                    <RepeatButton x:Uid="zoomOutButton"
                                  MinHeight="40"
                                  HorizontalAlignment="Stretch"
                                  Style="{ThemeResource ThemedGraphRepeatButtonStyle}"
                                  FontFamily="{StaticResource SymbolThemeFontFamily}"
                                  AutomationProperties.AutomationId="zoomOutButton"
                                  Command="{x:Bind ZoomOutButtonPressed, Mode=OneTime}">
                        <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
                                  FontSize="14"
                                  Glyph="&#xE738;"/>
                    </RepeatButton>

                    <Button x:Uid="zoomResetButton"
                            MinHeight="40"
                            Style="{ThemeResource ThemedGraphButtonStyle}"
                            contract7Present:CornerRadius="{ThemeResource BottomButtonCornerRadius}"
                            AutomationProperties.AutomationId="zoomResetButton"
                            Command="{x:Bind ZoomResetButtonPressed, Mode=OneTime}">
                        <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
                                  FontSize="14"
                                  Glyph="&#xE895;"/>
                    </Button>
                </StackPanel>
            </Border>
            <Border x:Name="TraceValuePopup"
                    Padding="{ThemeResource ToolTipBorderThemePadding}"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Background="{ThemeResource ToolTipBackground}"
                    BorderBrush="{ThemeResource ToolTipBorderBrush}"
                    BorderThickness="{ThemeResource ToolTipBorderThemeThickness}"
                    contract7Present:BackgroundSizing="OuterBorderEdge"
                    IsHitTestVisible="False"
                    SizeChanged="TraceValuePopup_SizeChanged"
                    Visibility="Collapsed">
                <Border.RenderTransform>
                    <TranslateTransform x:Name="TraceValuePopupTransform"/>
                </Border.RenderTransform>
                <TextBlock x:Name="TraceValue"
                           Foreground="{ThemeResource ToolTipForeground}"
                           AutomationProperties.LiveSetting="Polite"
                           Text="x=0,y=0"/>
            </Border>
        </Grid>

        <!-- Right portion of the screen -->
        <Grid x:Name="RightGrid"
              Grid.Row="1"
              Grid.RowSpan="2"
              Grid.Column="1"
              Visibility="{x:Bind local:GraphingCalculator.ShouldDisplayPanel(IsSmallState, SwitchModeToggleButton.IsChecked.Value, x:False), Mode=OneWay}">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="2.2*" MaxHeight="400"/>
            </Grid.RowDefinitions>

            <!-- Ideally the KeyGraphFeaturesPanel should be a frame so that navigation to and from the panel could be handled nicely -->
            <local:KeyGraphFeaturesPanel x:Name="KeyGraphFeaturesControl"
                                         Grid.RowSpan="2"
                                         Margin="0,4,0,0"
                                         KeyGraphFeaturesClosed="OnKeyGraphFeaturesClosed"
                                         ViewModel="{x:Bind ViewModel.SelectedEquation, Mode=OneWay}"
                                         Visibility="{x:Bind IsKeyGraphFeaturesVisible, Mode=OneWay}"
                                         x:Load="{x:Bind IsKeyGraphFeaturesVisible, Mode=OneWay}"/>

            <!-- This control should be within a grid that limits the hight to keep the sticky footer functionality from breaking -->
            <local:EquationInputArea x:Name="EquationInputAreaControl"
                                     Margin="0,4,0,0"
                                     Equations="{x:Bind ViewModel.Equations}"
                                     KeyGraphFeaturesRequested="OnEquationKeyGraphFeaturesRequested"
                                     Variables="{x:Bind ViewModel.Variables}"
                                     Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"/>

            <local:GraphingNumPad Grid.Row="1"
                                  Margin="2,0,2,2"
                                  Visibility="{x:Bind IsKeyGraphFeaturesVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"/>

        </Grid>
    </Grid>
</UserControl>
