From c877b0a2e906b14cadd0432a5994fb95f9558de1 Mon Sep 17 00:00:00 2001
From: Rudy Huyn <rudyhuyn@gmail.com>
Date: Thu, 5 Sep 2019 11:01:58 -0700
Subject: [PATCH] Replace AppChromeAcrylicHostBackdropMediumLowBrush from
 OverflowTextBlock + improvements (#647)

* replace acrylic brush by margin/padding

* Modify how the control manages the focus

* remove comment

* Prevent deadlock
---
 src/Calculator/Controls/OverflowTextBlock.cpp | 158 ++++++++--------
 src/Calculator/Controls/OverflowTextBlock.h   |  26 +--
 src/Calculator/Views/Calculator.xaml          | 174 +++++++++---------
 3 files changed, 183 insertions(+), 175 deletions(-)

diff --git a/src/Calculator/Controls/OverflowTextBlock.cpp b/src/Calculator/Controls/OverflowTextBlock.cpp
index 2e020c9..7b4adc2 100644
--- a/src/Calculator/Controls/OverflowTextBlock.cpp
+++ b/src/Calculator/Controls/OverflowTextBlock.cpp
@@ -27,9 +27,12 @@ using namespace Windows::UI::Xaml::Navigation;
 DEPENDENCY_PROPERTY_INITIALIZATION(OverflowTextBlock, IsActive);
 DEPENDENCY_PROPERTY_INITIALIZATION(OverflowTextBlock, TextStyle);
 DEPENDENCY_PROPERTY_INITIALIZATION(OverflowTextBlock, TokensUpdated);
-DEPENDENCY_PROPERTY_INITIALIZATION(OverflowTextBlock, ColumnWidth);
-DEPENDENCY_PROPERTY_INITIALIZATION(OverflowTextBlock, ColumnHeight);
-DEPENDENCY_PROPERTY_INITIALIZATION(OverflowTextBlock, ScrollButtonFontSize);
+DEPENDENCY_PROPERTY_INITIALIZATION(OverflowTextBlock, ScrollButtonsWidth);
+DEPENDENCY_PROPERTY_INITIALIZATION(OverflowTextBlock, ScrollButtonsFontSize);
+DEPENDENCY_PROPERTY_INITIALIZATION(OverflowTextBlock, ScrollButtonsPlacement);
+
+static constexpr unsigned int SCROLL_BUTTONS_APPROXIMATION_RANGE = 4;
+static constexpr double SCROLL_RATIO = 0.7;
 
 void OverflowTextBlock::OnApplyTemplate()
 {
@@ -44,35 +47,32 @@ void OverflowTextBlock::OnApplyTemplate()
             ref new EventHandler<ScrollViewerViewChangedEventArgs ^>(this, &OverflowTextBlock::OnViewChanged);
     }
 
+    uiElement = GetTemplateChild("ExpressionContent");
+    if (uiElement != nullptr)
+    {
+        m_expressionContent = safe_cast<FrameworkElement ^>(uiElement);
+    }
+
     uiElement = GetTemplateChild("ScrollLeft");
     if (uiElement != nullptr)
     {
         m_scrollLeft = safe_cast<Button ^>(uiElement);
-        m_scrollLeftClickEventToken = m_scrollLeft->Click += ref new RoutedEventHandler(this, &OverflowTextBlock::OnScrollClick);
+        m_scrollLeftClickEventToken = m_scrollLeft->Click += ref new RoutedEventHandler(this, &OverflowTextBlock::OnScrollLeftClick);
     }
 
     uiElement = GetTemplateChild("ScrollRight");
     if (uiElement != nullptr)
     {
         m_scrollRight = safe_cast<Button ^>(uiElement);
-        m_scrollRightClickEventToken = m_scrollRight->Click += ref new RoutedEventHandler(this, &OverflowTextBlock::OnScrollClick);
+        m_scrollRightClickEventToken = m_scrollRight->Click += ref new RoutedEventHandler(this, &OverflowTextBlock::OnScrollRightClick);
     }
 
-    m_scrollingLeft = false;
-    m_scrollingRight = false;
-
     uiElement = GetTemplateChild("TokenList");
     if (uiElement != nullptr)
     {
         m_itemsControl = safe_cast<ItemsControl ^>(uiElement);
     }
 
-    uiElement = GetTemplateChild("EditableToken");
-    if (uiElement != nullptr)
-    {
-        m_editableToken = safe_cast<TextBlock ^>(uiElement);
-    }
-
     UpdateAllState();
 }
 
@@ -118,8 +118,7 @@ void OverflowTextBlock::ScrollLeft()
 {
     if (m_expressionContainer != nullptr && m_expressionContainer->HorizontalOffset > 0)
     {
-        m_scrollingLeft = true;
-        double offset = m_expressionContainer->HorizontalOffset - (scrollRatio * m_expressionContainer->ViewportWidth);
+        double offset = m_expressionContainer->HorizontalOffset - (SCROLL_RATIO * m_expressionContainer->ViewportWidth);
         m_expressionContainer->ChangeView(offset, nullptr, nullptr);
         m_expressionContainer->UpdateLayout();
         UpdateScrollButtons();
@@ -128,93 +127,80 @@ void OverflowTextBlock::ScrollLeft()
 
 void OverflowTextBlock::ScrollRight()
 {
-    if (m_expressionContainer != nullptr && m_expressionContainer->HorizontalOffset < m_expressionContainer->ExtentWidth - m_expressionContainer->ViewportWidth)
+    auto realOffset = m_expressionContainer->HorizontalOffset + m_expressionContainer->Padding.Left + m_expressionContent->Margin.Left;
+    if (m_expressionContainer != nullptr && realOffset + m_expressionContainer->ActualWidth < m_expressionContent->ActualWidth)
     {
-        m_scrollingRight = true;
-        double offset = m_expressionContainer->HorizontalOffset + (scrollRatio * m_expressionContainer->ViewportWidth);
+        double offset = m_expressionContainer->HorizontalOffset + (SCROLL_RATIO * m_expressionContainer->ViewportWidth);
         m_expressionContainer->ChangeView(offset, nullptr, nullptr);
         m_expressionContainer->UpdateLayout();
         UpdateScrollButtons();
     }
 }
 
-void OverflowTextBlock::OnScrollClick(_In_ Object ^ sender, _In_ RoutedEventArgs ^)
+void OverflowTextBlock::OnScrollLeftClick(_In_ Object ^ sender, _In_ RoutedEventArgs ^)
 {
-    auto clicked = safe_cast<Button ^>(sender);
-    if (clicked == m_scrollLeft)
-    {
-        ScrollLeft();
-    }
-    else
-    {
-        ScrollRight();
-    }
+    ScrollLeft();
+}
+
+void OverflowTextBlock::OnScrollRightClick(_In_ Object ^ sender, _In_ RoutedEventArgs ^)
+{
+    ScrollRight();
 }
 
 void OverflowTextBlock::UpdateScrollButtons()
 {
-    if (m_expressionContainer == nullptr)
+    if (m_expressionContainer == nullptr || m_scrollLeft == nullptr || m_scrollRight == nullptr)
     {
         return;
     }
 
-    double editableTokenWidth = 0;
-    if (m_editableToken != nullptr && m_editableToken->Visibility == ::Visibility::Visible)
-    {
-        editableTokenWidth = m_editableToken->ActualWidth;
-    }
+    auto realOffset = m_expressionContainer->HorizontalOffset + m_expressionContainer->Padding.Left + m_expressionContent->Margin.Left;
+    auto scrollLeftVisibility = realOffset > SCROLL_BUTTONS_APPROXIMATION_RANGE ? ::Visibility::Visible : ::Visibility::Collapsed;
+    auto scrollRightVisibility = realOffset + m_expressionContainer->ActualWidth + SCROLL_BUTTONS_APPROXIMATION_RANGE < m_expressionContent->ActualWidth
+                                     ? ::Visibility::Visible
+                                     : ::Visibility::Collapsed;
 
-    double itemsControlWidth = 0;
-    if (m_itemsControl != nullptr && m_itemsControl->Visibility == ::Visibility::Visible)
+    bool shouldTryFocusScrollRight = false;
+    if (m_scrollLeft->Visibility != scrollLeftVisibility)
     {
-        itemsControlWidth = m_itemsControl->ActualWidth; 
-    }
-
-    // When the width is smaller than the container, don't show any
-    if (itemsControlWidth + editableTokenWidth <= m_expressionContainer->ActualWidth)
-    {
-        ShowHideScrollButtons(::Visibility::Collapsed, ::Visibility::Collapsed);
-    }
-    // We have more number on both side. Show both arrows
-    else if (
-        (m_expressionContainer->HorizontalOffset > 0)
-        && (m_expressionContainer->HorizontalOffset < (m_expressionContainer->ExtentWidth - m_expressionContainer->ViewportWidth)))
-    {
-        ShowHideScrollButtons(::Visibility::Visible, ::Visibility::Visible);
-    }
-    // Width is larger than the container and left most part of the number is shown. Should be able to scroll right.
-    else if (m_expressionContainer->HorizontalOffset == 0)
-    {
-        ShowHideScrollButtons(::Visibility::Collapsed, ::Visibility::Visible);
-        if (m_scrollingLeft)
+        if (scrollLeftVisibility == ::Visibility::Collapsed)
         {
-            m_scrollingLeft = false;
-            if (m_scrollRight != nullptr)
-            {
-                m_scrollRight->Focus(::FocusState::Programmatic);
-            }
+            shouldTryFocusScrollRight = m_scrollLeft->Equals(FocusManager::GetFocusedElement());
         }
-    }
-    else // Width is larger than the container and right most part of the number is shown. Should be able to scroll left.
-    {
-        ShowHideScrollButtons(::Visibility::Visible, ::Visibility::Collapsed);
-        if (m_scrollingRight)
-        {
-            m_scrollingRight = false;
-            if (m_scrollLeft != nullptr)
-            {
-                m_scrollLeft->Focus(::FocusState::Programmatic);
-            }
-        }
-    }
-}
 
-void OverflowTextBlock::ShowHideScrollButtons(::Visibility vLeft, ::Visibility vRight)
-{
-    if (m_scrollLeft != nullptr && m_scrollRight != nullptr)
+        m_scrollLeft->Visibility = scrollLeftVisibility;
+    }
+
+    if (m_scrollRight->Visibility != scrollRightVisibility)
     {
-        m_scrollLeft->Visibility = vLeft;
-        m_scrollRight->Visibility = vRight;
+        if (scrollRightVisibility == ::Visibility::Collapsed && m_scrollLeft->Visibility == ::Visibility::Visible
+            && m_scrollRight->Equals(FocusManager::GetFocusedElement()))
+        {
+            m_scrollLeft->Focus(::FocusState::Programmatic);
+        }
+        m_scrollRight->Visibility = scrollRightVisibility;
+    }
+
+    if (shouldTryFocusScrollRight && scrollRightVisibility == ::Visibility::Visible)
+    {
+        m_scrollRight->Focus(::FocusState::Programmatic);
+    }
+
+    if (ScrollButtonsPlacement == OverflowButtonPlacement::Above && m_expressionContent != nullptr)
+    {
+        double left = m_scrollLeft != nullptr && m_scrollLeft->Visibility == ::Visibility::Visible ? ScrollButtonsWidth : 0;
+        double right = m_scrollRight != nullptr && m_scrollRight->Visibility == ::Visibility::Visible ? ScrollButtonsWidth : 0;
+        if (m_expressionContainer->Padding.Left != left || m_expressionContainer->Padding.Right != right)
+        {
+            m_expressionContainer->ViewChanged -= m_containerViewChangedToken;
+
+            m_expressionContainer->Padding = Thickness(left, 0, right, 0);
+            m_expressionContent->Margin = Thickness(-left, 0, -right, 0);
+            m_expressionContainer->UpdateLayout();
+
+            m_containerViewChangedToken = m_expressionContainer->ViewChanged +=
+                ref new EventHandler<ScrollViewerViewChangedEventArgs ^>(this, &OverflowTextBlock::OnViewChanged);
+        }
     }
 }
 
@@ -241,3 +227,13 @@ void OverflowTextBlock::OnViewChanged(_In_opt_ Object ^ /*sender*/, _In_opt_ Scr
 {
     UpdateScrollButtons();
 }
+
+void OverflowTextBlock::OnScrollButtonsPlacementPropertyChanged(OverflowButtonPlacement /*oldValue*/, OverflowButtonPlacement newValue)
+{
+    if (newValue == OverflowButtonPlacement::InLine)
+    {
+        m_expressionContainer->Padding = Thickness(0);
+        m_expressionContent->Margin = Thickness(0);
+    }
+    UpdateScrollButtons();
+}
diff --git a/src/Calculator/Controls/OverflowTextBlock.h b/src/Calculator/Controls/OverflowTextBlock.h
index 4c4f519..dd3fe1c 100644
--- a/src/Calculator/Controls/OverflowTextBlock.h
+++ b/src/Calculator/Controls/OverflowTextBlock.h
@@ -9,6 +9,13 @@ namespace CalculatorApp
 {
     namespace Controls
     {
+    public
+        enum class OverflowButtonPlacement : int
+        {
+            InLine,
+            Above
+        };
+
     public
         ref class OverflowTextBlock sealed : public Windows::UI::Xaml::Controls::Control
         {
@@ -19,13 +26,14 @@ namespace CalculatorApp
 
             DEPENDENCY_PROPERTY_OWNER(OverflowTextBlock);
             DEPENDENCY_PROPERTY_WITH_CALLBACK(bool, TokensUpdated);
+            DEPENDENCY_PROPERTY_WITH_CALLBACK(OverflowButtonPlacement, ScrollButtonsPlacement);
             DEPENDENCY_PROPERTY(bool, IsActive);
             DEPENDENCY_PROPERTY(Windows::UI::Xaml::Style ^, TextStyle);
-            DEPENDENCY_PROPERTY(double, ColumnWidth);
-            DEPENDENCY_PROPERTY(double, ColumnHeight);
-            DEPENDENCY_PROPERTY(double, ScrollButtonFontSize);
+            DEPENDENCY_PROPERTY(double, ScrollButtonsWidth);
+            DEPENDENCY_PROPERTY(double, ScrollButtonsFontSize);
 
             void OnTokensUpdatedPropertyChanged(bool oldValue, bool newValue);
+            void OnScrollButtonsPlacementPropertyChanged(OverflowButtonPlacement oldValue, OverflowButtonPlacement newValue);
             void UpdateScrollButtons();
             void UnregisterEventHandlers();
 
@@ -34,23 +42,17 @@ namespace CalculatorApp
             virtual Windows::UI::Xaml::Automation::Peers::AutomationPeer ^ OnCreateAutomationPeer() override;
 
         private:
-            void OnScrollClick(_In_ Platform::Object ^ sender, _In_ Windows::UI::Xaml::RoutedEventArgs ^ e);
-            void OnPointerEntered(_In_ Platform::Object ^ sender, _In_ Windows::UI::Xaml::Input::PointerRoutedEventArgs ^ e);
-            void OnPointerExited(_In_ Platform::Object ^ sender, _In_ Windows::UI::Xaml::Input::PointerRoutedEventArgs ^ e);
-            void ShowHideScrollButtons(Windows::UI::Xaml::Visibility vLeft, Windows::UI::Xaml::Visibility vRight);
+            void OnScrollLeftClick(_In_ Platform::Object ^ sender, _In_ Windows::UI::Xaml::RoutedEventArgs ^ e);
+            void OnScrollRightClick(_In_ Platform::Object ^ sender, _In_ Windows::UI::Xaml::RoutedEventArgs ^ e);
             void OnViewChanged(_In_opt_ Platform::Object ^ sender, _In_opt_ Windows::UI::Xaml::Controls::ScrollViewerViewChangedEventArgs ^ args);
 
             void UpdateVisualState();
-            void UpdateExpressionState();
             void UpdateAllState();
             void ScrollLeft();
             void ScrollRight();
 
-            double scrollRatio = 0.7;
-            bool m_scrollingLeft;
-            bool m_scrollingRight;
             bool m_isAccessibilityViewControl;
-            Windows::UI::Xaml::Controls::TextBlock ^ m_editableToken;
+            Windows::UI::Xaml::FrameworkElement ^ m_expressionContent;
             Windows::UI::Xaml::Controls::ItemsControl ^ m_itemsControl;
             Windows::UI::Xaml::Controls::ScrollViewer ^ m_expressionContainer;
             Windows::UI::Xaml::Controls::Button ^ m_scrollLeft;
diff --git a/src/Calculator/Views/Calculator.xaml b/src/Calculator/Views/Calculator.xaml
index a4ef2d1..a0efa57 100644
--- a/src/Calculator/Views/Calculator.xaml
+++ b/src/Calculator/Views/Calculator.xaml
@@ -53,22 +53,23 @@
                                           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                           Style="{StaticResource ResultsScrollerSnapped}"
                                           AutomationProperties.AccessibilityView="Raw">
-                                <ItemsControl x:Name="TokenList"
-                                              Padding="0"
-                                              VerticalAlignment="Stretch"
-                                              HorizontalContentAlignment="Right"
-                                              VerticalContentAlignment="Stretch"
-                                              IsTabStop="False"
-                                              ItemTemplateSelector="{StaticResource ExpressionItemTemplateSelector}"
-                                              ItemsSource="{Binding ExpressionTokens}">
-                                    <ItemsControl.ItemsPanel>
-                                        <ItemsPanelTemplate>
-                                            <ItemsStackPanel HorizontalAlignment="Right"
-                                                             VerticalAlignment="Stretch"
-                                                             Orientation="Horizontal"/>
-                                        </ItemsPanelTemplate>
-                                    </ItemsControl.ItemsPanel>
-                                </ItemsControl>
+                                <Grid x:Name="ExpressionContent">
+                                    <ItemsControl x:Name="TokenList"
+                                                  VerticalAlignment="Stretch"
+                                                  HorizontalContentAlignment="Right"
+                                                  VerticalContentAlignment="Stretch"
+                                                  IsTabStop="False"
+                                                  ItemTemplateSelector="{StaticResource ExpressionItemTemplateSelector}"
+                                                  ItemsSource="{Binding ExpressionTokens}">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <ItemsStackPanel HorizontalAlignment="Right"
+                                                                 VerticalAlignment="Stretch"
+                                                                 Orientation="Horizontal"/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                    </ItemsControl>
+                                </Grid>
                             </ScrollViewer>
                             <Button x:Name="ScrollLeft"
                                     x:Uid="scrollLeft"
@@ -94,11 +95,8 @@
             </Setter>
         </Style>
 
-        <Style x:Key="AlwaysOnTopStyleS" TargetType="controls:OverflowTextBlock">
+        <Style x:Key="AOTResultsStyle" TargetType="controls:OverflowTextBlock">
             <Setter Property="HorizontalAlignment" Value="Stretch"/>
-            <Setter Property="ColumnWidth" Value="14"/>
-            <Setter Property="ColumnHeight" Value="14"/>
-            <Setter Property="ScrollButtonFontSize" Value="12"/>
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="controls:OverflowTextBlock">
@@ -111,26 +109,42 @@
                                             <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="Transparent"/>
                                             <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="Transparent"/>
                                             <SolidColorBrush x:Key="ButtonForeground" Color="#99000000"/>
-                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{ThemeResource SystemAccentColor}" Opacity="0.8"/>
-                                            <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemAccentColor}" Opacity="1.0"/>
+                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                             Opacity="0.8"
+                                                             Color="{ThemeResource SystemAccentColor}"/>
+                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                             Opacity="1.0"
+                                                             Color="{ThemeResource SystemAccentColor}"/>
                                             <SolidColorBrush x:Key="ButtonForegroundDisabled" Color="#33000000"/>
                                         </ResourceDictionary>
                                         <ResourceDictionary x:Key="HighContrast">
                                             <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent"/>
                                             <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="Transparent"/>
                                             <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="Transparent"/>
-                                            <SolidColorBrush x:Key="ButtonForeground" Color="{ThemeResource SystemColorWindowTextColor}" Opacity="0.6"/>
-                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}" Opacity="0.8"/>
-                                            <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemColorHighlightColor}" Opacity="1.0"/>
-                                            <SolidColorBrush x:Key="ButtonForegroundDisabled" Color="{ThemeResource SystemColorGrayTextColor}" Opacity="0.2"/>
+                                            <SolidColorBrush x:Key="ButtonForeground"
+                                                             Opacity="0.6"
+                                                             Color="{ThemeResource SystemColorWindowTextColor}"/>
+                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                             Opacity="0.8"
+                                                             Color="{ThemeResource SystemColorHighlightColor}"/>
+                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                             Opacity="1.0"
+                                                             Color="{ThemeResource SystemColorHighlightColor}"/>
+                                            <SolidColorBrush x:Key="ButtonForegroundDisabled"
+                                                             Opacity="0.2"
+                                                             Color="{ThemeResource SystemColorGrayTextColor}"/>
                                         </ResourceDictionary>
                                         <ResourceDictionary x:Key="Dark">
                                             <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent"/>
                                             <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="Transparent"/>
                                             <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="Transparent"/>
                                             <SolidColorBrush x:Key="ButtonForeground" Color="#99FFFFFF"/>
-                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}" Opacity="0.8"/>
-                                            <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemAccentColorLight1}" Opacity="1.0"/>
+                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                             Opacity="0.8"
+                                                             Color="{ThemeResource SystemAccentColorLight1}"/>
+                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                             Opacity="1.0"
+                                                             Color="{ThemeResource SystemAccentColorLight1}"/>
                                             <SolidColorBrush x:Key="ButtonForegroundDisabled" Color="#33FFFFFF"/>
                                         </ResourceDictionary>
                                     </ResourceDictionary.ThemeDictionaries>
@@ -148,56 +162,49 @@
                                           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                           Style="{StaticResource ResultsScrollerSnapped}"
                                           AutomationProperties.AccessibilityView="Control">
-                                <TextBlock x:Name="EditableToken"
-                                           AutomationProperties.AccessibilityView="Raw"
-                                           Text="{Binding DisplayValue, Mode=OneWay}"
-                                           Margin="4,0,4,0"
-                                           Padding="0"
-                                           VerticalAlignment="Stretch"
-                                           FontWeight="SemiBold"
-                                           Grid.Row="2"
-                                           HorizontalAlignment="Right"/>
+                                <Grid x:Name="ExpressionContent">
+                                    <TextBlock x:Name="EditableToken"
+                                               Grid.Row="2"
+                                               Margin="4,0,4,0"
+                                               Padding="0"
+                                               HorizontalAlignment="Right"
+                                               VerticalAlignment="Stretch"
+                                               FontWeight="SemiBold"
+                                               AutomationProperties.AccessibilityView="Raw"
+                                               Text="{Binding DisplayValue, Mode=OneWay}"/>
+                                </Grid>
                             </ScrollViewer>
-                            <Border Background="{ThemeResource AppChromeAcrylicHostBackdropMediumLowBrush}"
-                                    Grid.Column="0">
-                                <Button x:Name="ScrollLeft"
+
+                            <Button x:Name="ScrollLeft"
                                     x:Uid="scrollLeft"
+                                    Grid.Column="0"
+                                    Width="{TemplateBinding ScrollButtonsWidth}"
                                     Margin="0,3,0,0"
+                                    VerticalAlignment="Stretch"
                                     Style="{StaticResource AlwaysOnTopScrollButtonStyleS}"
-                                    MinWidth="{TemplateBinding ColumnWidth}"
-                                    MinHeight="{TemplateBinding ColumnHeight}"
                                     Background="Transparent">
-                                    <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                          FontSize="{TemplateBinding ScrollButtonFontSize}"
+                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                          FontSize="{TemplateBinding ScrollButtonsFontSize}"
                                           Glyph="&#xE26C;"/>
-                                </Button>
-                            </Border>
-                            <Border Background="{ThemeResource AppChromeAcrylicHostBackdropMediumLowBrush}"
-                                    Grid.Column="2">
-                                <Button x:Name="ScrollRight"
+                            </Button>
+                            <Button x:Name="ScrollRight"
                                     x:Uid="scrollRight"
+                                    Grid.Column="2"
+                                    Width="{TemplateBinding ScrollButtonsWidth}"
                                     Margin="0,3,0,0"
+                                    VerticalAlignment="Stretch"
                                     Style="{StaticResource AlwaysOnTopScrollButtonStyleS}"
-                                    MinWidth="{TemplateBinding ColumnWidth}"
-                                    MinHeight="{TemplateBinding ColumnHeight}"
                                     Background="Transparent">
-                                    <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                          FontSize="{TemplateBinding ScrollButtonFontSize}"
+                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                          FontSize="{TemplateBinding ScrollButtonsFontSize}"
                                           Glyph="&#xE26B;"/>
-                                </Button>
-                            </Border>
+                            </Button>
                         </Grid>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
 
-        <Style x:Key="AlwaysOnTopStyleM" BasedOn="{StaticResource AlwaysOnTopStyleS}" TargetType="controls:OverflowTextBlock">
-            <Setter Property="ColumnWidth" Value="28"/>
-            <Setter Property="ColumnHeight" Value="280"/>
-            <Setter Property="ScrollButtonFontSize" Value="28"/>
-        </Style>
-
         <!-- Calculation Result Styles -->
         <Style x:Key="ResultsStyle"
                BasedOn="{StaticResource CalculationResultStyle}"
@@ -223,7 +230,7 @@
             <Setter Property="Background" Value="Transparent"/>
             <Setter Property="Visibility" Value="Collapsed"/>
         </Style>
-        
+
         <Style x:Key="AlwaysOnTopScrollButtonStyleS" TargetType="Button">
             <Setter Property="BorderThickness" Value="0"/>
             <Setter Property="Padding" Value="0,0,0,0"/>
@@ -518,8 +525,6 @@
                     <VisualState.Setters>
                         <Setter Target="RowResult.MinHeight" Value="54"/>
                         <Setter Target="RowResult.Height" Value="72*"/>
-                        <Setter Target="AlwaysOnTopResults.FontSize" Value="40"/>
-                        <Setter Target="AlwaysOnTopResults.Style" Value="{StaticResource AlwaysOnTopStyleM}"/>
                     </VisualState.Setters>
                 </VisualState>
                 <VisualState x:Name="MinAlwaysOnTop">
@@ -530,7 +535,8 @@
                         <Setter Target="RowResult.MinHeight" Value="20"/>
                         <Setter Target="RowResult.Height" Value="72*"/>
                         <Setter Target="AlwaysOnTopResults.FontSize" Value="18"/>
-                        <Setter Target="AlwaysOnTopResults.Style" Value="{StaticResource AlwaysOnTopStyleS}"/>
+                        <Setter Target="AlwaysOnTopResults.ScrollButtonsWidth" Value="14"/>
+                        <Setter Target="AlwaysOnTopResults.ScrollButtonsFontSize" Value="12"/>
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
@@ -592,8 +598,8 @@
             <controls:OverflowTextBlock x:Name="ExpressionText"
                                         Grid.Row="1"
                                         Margin="6,0,6,0"
-                                        Style="{StaticResource NormalStyle}"
                                         VerticalAlignment="Bottom"
+                                        Style="{StaticResource NormalStyle}"
                                         AutomationProperties.AutomationId="CalculatorExpression"
                                         AutomationProperties.Name="{x:Bind Model.CalculationExpressionAutomationName, Mode=OneWay}"
                                         IsTabStop="False"
@@ -620,12 +626,17 @@
                                         x:Uid="CalculatorAlwaysOnTopResults"
                                         Grid.Row="2"
                                         Margin="6,0,6,0"
+                                        HorizontalContentAlignment="Right"
+                                        Style="{StaticResource AOTResultsStyle}"
+                                        FontSize="40"
                                         AutomationProperties.AutomationId="CalculatorAlwaysOnTopResults"
                                         AutomationProperties.HeadingLevel="Level1"
                                         AutomationProperties.Name="{x:Bind Model.CalculationResultAutomationName, Mode=OneWay}"
-                                        TokensUpdated="{x:Bind Model.AreAlwaysOnTopResultsUpdated, Mode=OneWay}"
-                                        HorizontalContentAlignment="Right"
                                         IsActive="True"
+                                        ScrollButtonsFontSize="28"
+                                        ScrollButtonsPlacement="Above"
+                                        ScrollButtonsWidth="28"
+                                        TokensUpdated="{x:Bind Model.AreAlwaysOnTopResultsUpdated, Mode=OneWay}"
                                         UseSystemFocusVisuals="True"
                                         Visibility="{x:Bind Model.IsAlwaysOnTop, Mode=OneWay}"/>
 
@@ -644,18 +655,17 @@
                                                     TabIndex="7"
                                                     Visibility="{x:Bind Model.IsProgrammer, Mode=OneWay}"/>
 
-            <Grid x:Name="HistoryButtonParent"
-                  Visibility="{x:Bind Model.IsAlwaysOnTop, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}">
+            <Grid x:Name="HistoryButtonParent" Visibility="{x:Bind Model.IsAlwaysOnTop, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}">
                 <Button x:Name="HistoryButton"
-                    x:Uid="HistoryButton"
-                    Grid.Row="0"
-                    IsEnabled="{x:Bind Model.IsAlwaysOnTop, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
-                    Style="{StaticResource HistoryButtonStyle}"
-                    AutomationProperties.AutomationId="HistoryButton"
-                    Command="{x:Bind HistoryButtonPressed, Mode=OneTime}"
-                    Content="&#xe81c;"
-                    ExitDisplayModeOnAccessKeyInvoked="False"
-                    TabIndex="2">
+                        x:Uid="HistoryButton"
+                        Grid.Row="0"
+                        Style="{StaticResource HistoryButtonStyle}"
+                        AutomationProperties.AutomationId="HistoryButton"
+                        Command="{x:Bind HistoryButtonPressed, Mode=OneTime}"
+                        Content="&#xe81c;"
+                        ExitDisplayModeOnAccessKeyInvoked="False"
+                        IsEnabled="{x:Bind Model.IsAlwaysOnTop, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
+                        TabIndex="2">
                     <FlyoutBase.AttachedFlyout>
                         <Flyout x:Name="HistoryFlyout"
                                 AutomationProperties.AutomationId="HistoryFlyout"
@@ -666,7 +676,7 @@
                     </FlyoutBase.AttachedFlyout>
                 </Button>
             </Grid>
-            
+
             <!-- Scientific angle buttons -->
             <local:CalculatorScientificAngleButtons x:Name="ScientificAngleButtons"
                                                     Grid.Row="3"
@@ -680,8 +690,8 @@
                   x:Uid="MemoryPanel"
                   Grid.Row="4"
                   Margin="3,0,3,0"
-                  Visibility="{x:Bind Model.IsAlwaysOnTop, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}"
-                  AutomationProperties.HeadingLevel="Level1">
+                  AutomationProperties.HeadingLevel="Level1"
+                  Visibility="{x:Bind Model.IsAlwaysOnTop, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="1*" MaxWidth="80"/>
                     <ColumnDefinition Width="1*" MaxWidth="80"/>