Fix UI issues with UnitConverter in RtL (#410)

Fix #409 - Some content in Currency Converter not right-aligned properly in RtL
Fix #59 Currency symbol precedence is opposite of system setting in RTL languages

Description of the changes:
Add a property FlowDirectionHorizontalAlignment in UnitConverter to align some controls to the right (without modifying the FlowDirection of their parent items)
Force FlowDirection of Value1Container and Value2Container to LeftToRight (but align panels to the right)

How changes were validated:
Tested with LtR and RtL languages and with currency symbols on the left and on the right.

src/Calculator/Views/UnitConverter.xaml

@@ -476,9 +476,8 @@
         <Grid x:Name="Value1Container"
               Grid.Row="1"
               Grid.Column="1"
-              HorizontalAlignment="Left"
+              HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
               Style="{ThemeResource ValueContainerStyle}"
-              FlowDirection="{x:Bind LayoutDirection}"
               Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
@@ -511,6 +510,7 @@
         <ComboBox x:Name="Units1"
                   Grid.Row="2"
                   Grid.Column="1"
+                  HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
                   Style="{ThemeResource ComboStyle}"
                   AutomationProperties.AutomationId="Units1"
                   AutomationProperties.Name="{x:Bind Model.Unit1AutomationName, Mode=OneWay}"
@@ -528,9 +528,8 @@
         <Grid x:Name="Value2Container"
               Grid.Row="3"
               Grid.Column="1"
-              HorizontalAlignment="Left"
+              HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
               Style="{ThemeResource ValueContainerStyle}"
-              FlowDirection="{x:Bind LayoutDirection}"
               Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
@@ -564,6 +563,7 @@
         <ComboBox x:Name="Units2"
                   Grid.Row="4"
                   Grid.Column="1"
+                  HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
                   Style="{ThemeResource ComboStyle}"
                   AutomationProperties.AutomationId="Units2"
                   AutomationProperties.Name="{x:Bind Model.Unit2AutomationName, Mode=OneWay}"
@@ -581,8 +581,8 @@
                     Grid.Row="5"
                     Grid.Column="1"
                     MinHeight="48"
-                    Margin="12,0,6,0"
+                    Padding="12,0,6,0"
-                    HorizontalAlignment="Left"
+                    HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
                     VerticalAlignment="Top"
                     FlowDirection="{x:Bind LayoutDirection}"
                     SizeChanged="SupplementaryResultsPanelInGrid_SizeChanged"

src/Calculator/Views/UnitConverter.xaml.cpp

@@ -46,22 +46,17 @@ using namespace Windows::UI::ViewManagement;
 static const long long DURATION_500_MS = 10000 * 500;
 
 UnitConverter::UnitConverter() :
-    m_layoutDirection(::FlowDirection::LeftToRight),
     m_meteredConnectionOverride(false),
     m_isAnimationEnabled(false)
 {
+    m_layoutDirection = LocalizationService::GetInstance()->GetFlowDirection();
+    m_FlowDirectionHorizontalAlignment = m_layoutDirection == ::FlowDirection::RightToLeft ? ::HorizontalAlignment::Right : ::HorizontalAlignment::Left;
+
     InitializeComponent();
 
     // adding ESC key shortcut binding to clear button
     ClearEntryButtonPos0->SetValue(Common::KeyboardShortcutManager::VirtualKeyProperty, Common::MyVirtualKey::Escape);
 
-    m_layoutDirection = LocalizationService::GetInstance()->GetFlowDirection();
-    if (m_layoutDirection == ::FlowDirection::RightToLeft)
-    {
-        Units1->HorizontalContentAlignment = ::HorizontalAlignment::Right;
-        Units2->HorizontalContentAlignment = ::HorizontalAlignment::Right;
-    }
-
     // Is currency symbol preference set to right side
     bool preferRight = LocalizationSettings::GetInstance().GetCurrencySymbolPrecedence() == 0;
     VisualStateManager::GoToState(this, preferRight ? "CurrencySymbolRightState" : "CurrencySymbolLeftState", false);

src/Calculator/Views/UnitConverter.xaml.h

@@ -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.h
@@ -22,6 +22,7 @@ namespace CalculatorApp
     public:
         UnitConverter();
         DEPENDENCY_PROPERTY_OWNER(UnitConverter);
+        PROPERTY_R(Windows::UI::Xaml::HorizontalAlignment, FlowDirectionHorizontalAlignment);
 
         void AnimateConverter();