From 4b6b8fa8fa9449b6f05aa9e14120dbc18b2a68d9 Mon Sep 17 00:00:00 2001
From: Rudy Huyn <rudyhuyn@gmail.com>
Date: Wed, 20 Mar 2019 09:54:02 -0700
Subject: [PATCH] Fix auto-scaling of CalculationResult when the current locale
 displays currency symbols on the right (#246)

* Fix auto-scaling of CalculationResult when the current locale displays symbols at the right

* Formatting

* add padding

* modify padding of ValueContainer
---
 src/Calculator/Views/UnitConverter.xaml     | 31 ++++++++++++++++-----
 src/Calculator/Views/UnitConverter.xaml.cpp | 13 ++-------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/Calculator/Views/UnitConverter.xaml b/src/Calculator/Views/UnitConverter.xaml
index 05736331..e0f337a4 100644
--- a/src/Calculator/Views/UnitConverter.xaml
+++ b/src/Calculator/Views/UnitConverter.xaml
@@ -230,19 +230,19 @@
                BasedOn="{StaticResource CurrencySymbolBaseStyle}"
                TargetType="TextBlock">
             <Setter Property="FontSize" Value="32"/>
-            <Setter Property="Margin" Value="12,0,0,17"/>
+            <Setter Property="Margin" Value="0,0,0,17"/>
         </Style>
         <Style x:Key="CurrencySymbolMediumStyle"
                BasedOn="{StaticResource CurrencySymbolBaseStyle}"
                TargetType="TextBlock">
             <Setter Property="FontSize" Value="24"/>
-            <Setter Property="Margin" Value="12,0,0,8"/>
+            <Setter Property="Margin" Value="0,0,0,8"/>
         </Style>
         <Style x:Key="CurrencySymbolSmallStyle"
                BasedOn="{StaticResource CurrencySymbolBaseStyle}"
                TargetType="TextBlock">
             <Setter Property="FontSize" Value="17"/>
-            <Setter Property="Margin" Value="12,0,0,7"/>
+            <Setter Property="Margin" Value="0,0,0,7"/>
         </Style>
 
         <Style x:Key="ValueContainerStyle" TargetType="Grid">
@@ -455,6 +455,17 @@
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
+            <VisualStateGroup x:Name="CurrencySymbolStates">
+                <VisualState x:Name="CurrencySymbolLeftState"/>
+                <VisualState x:Name="CurrencySymbolRightState">
+                    <VisualState.Setters>
+                        <Setter Target="Value1Container.Padding" Value="0,0,12,0"/>
+                        <Setter Target="Value2Container.Padding" Value="0,0,12,0"/>
+                        <Setter Target="CurrencySymbol1Block.(Grid.Column)" Value="2"/>
+                        <Setter Target="CurrencySymbol2Block.(Grid.Column)" Value="2"/>
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
 
         <Grid x:Name="CurrencyLoadingGrid"
@@ -481,12 +492,15 @@
         <Grid x:Name="Value1Container"
               Grid.Row="1"
               Grid.Column="1"
+              Padding="12,0,0,0"
+              HorizontalAlignment="Left"
               Style="{ThemeResource ValueContainerStyle}"
               FlowDirection="{x:Bind LayoutDirection}"
               Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
                 <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
             <TextBlock x:Name="CurrencySymbol1Block"
                        Grid.Column="0"
@@ -530,12 +544,15 @@
         <Grid x:Name="Value2Container"
               Grid.Row="3"
               Grid.Column="1"
+              Padding="12,0,0,0"
+              HorizontalAlignment="Left"
               Style="{ThemeResource ValueContainerStyle}"
               FlowDirection="{x:Bind LayoutDirection}"
               Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
                 <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
             <TextBlock x:Name="CurrencySymbol2Block"
                        Grid.Column="0"
@@ -606,10 +623,10 @@
                                 Visibility="Collapsed">
                     <StackPanel Orientation="Horizontal">
                         <HyperlinkButton x:Name="CurrencyRefreshBlock"
-                               Foreground="{ThemeResource SystemControlHyperlinkBaseHighBrush}"
-                               Click="CurrencyRefreshButton_Click"
-                               x:Uid="RefreshButtonText"/>
-                        <TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Margin="0, 7, 0, 0">
+                                         x:Uid="RefreshButtonText"
+                                         Foreground="{ThemeResource SystemControlHyperlinkBaseHighBrush}"
+                                         Click="CurrencyRefreshButton_Click"/>
+                        <TextBlock Margin="0,7,0,0" Style="{ThemeResource CaptionTextBlockStyle}">
                             <Run x:Name="Spacing" Text="&#x200A;"/>
                             <Run x:Name="CurrencySecondaryStatus"
                                  FontWeight="SemiBold"
diff --git a/src/Calculator/Views/UnitConverter.xaml.cpp b/src/Calculator/Views/UnitConverter.xaml.cpp
index 6cae71e4..85a52ea4 100644
--- a/src/Calculator/Views/UnitConverter.xaml.cpp
+++ b/src/Calculator/Views/UnitConverter.xaml.cpp
@@ -1,4 +1,4 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
+// Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
 // UnitConverter.xaml.cpp
@@ -63,15 +63,7 @@ UnitConverter::UnitConverter() :
 
     // Is currency symbol preference set to right side
     bool preferRight = LocalizationSettings::GetInstance().GetCurrencySymbolPrecedence() == 0;
-    if (preferRight)
-    {
-        // Currency symbol should appear on the right. Reverse the order of children.
-        Grid::SetColumn(Value1, 0);
-        Grid::SetColumn(CurrencySymbol1Block, 1);
-        
-        Grid::SetColumn(Value2, 0);
-        Grid::SetColumn(CurrencySymbol2Block, 1);
-    }
+    VisualStateManager::GoToState(this, preferRight ? "CurrencySymbolRightState" : "CurrencySymbolLeftState", false);
 
     auto userSettings = ref new UISettings();
     m_isAnimationEnabled = userSettings->AnimationsEnabled;
@@ -268,7 +260,6 @@ void UnitConverter::OnPasteMenuItemClicked(_In_ Object^ sender, _In_ RoutedEvent
 
 void UnitConverter::AnimateConverter()
 {
-    
     if (App::IsAnimationEnabled())
     {
         AnimationStory->Begin();