From 0d31d5a5a229b597297ed8339e3283b0e6d0b28c Mon Sep 17 00:00:00 2001
From: Rudy Huyn <rudyhuyn@gmail.com>
Date: Fri, 19 Apr 2019 18:37:50 -0700
Subject: [PATCH] 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     | 12 ++++++------
 src/Calculator/Views/UnitConverter.xaml.cpp | 11 +++--------
 src/Calculator/Views/UnitConverter.xaml.h   |  3 ++-
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/Calculator/Views/UnitConverter.xaml b/src/Calculator/Views/UnitConverter.xaml
index 28dea2e6..1d52c3eb 100644
--- a/src/Calculator/Views/UnitConverter.xaml
+++ b/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"
-                    HorizontalAlignment="Left"
+                    Padding="12,0,6,0"
+                    HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
                     VerticalAlignment="Top"
                     FlowDirection="{x:Bind LayoutDirection}"
                     SizeChanged="SupplementaryResultsPanelInGrid_SizeChanged"
diff --git a/src/Calculator/Views/UnitConverter.xaml.cpp b/src/Calculator/Views/UnitConverter.xaml.cpp
index d9e6d921..e6288323 100644
--- a/src/Calculator/Views/UnitConverter.xaml.cpp
+++ b/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);
diff --git a/src/Calculator/Views/UnitConverter.xaml.h b/src/Calculator/Views/UnitConverter.xaml.h
index df370eaa..65545fbb 100644
--- a/src/Calculator/Views/UnitConverter.xaml.h
+++ b/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();