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

@@ -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"
+                                         x:Uid="RefreshButtonText"
                                          Foreground="{ThemeResource SystemControlHyperlinkBaseHighBrush}"
-                               Click="CurrencyRefreshButton_Click"
+                                         Click="CurrencyRefreshButton_Click"/>
-                               x:Uid="RefreshButtonText"/>
+                        <TextBlock Margin="0,7,0,0" Style="{ThemeResource CaptionTextBlockStyle}">
-                        <TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Margin="0, 7, 0, 0">
                             <Run x:Name="Spacing" Text="&#x200A;"/>
                             <Run x:Name="CurrencySecondaryStatus"
                                  FontWeight="SemiBold"

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)
+    VisualStateManager::GoToState(this, preferRight ? "CurrencySymbolRightState" : "CurrencySymbolLeftState", false);
-    {
-        // 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);
-    }
 
     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();