[All] Basic Right-To-Left Support #1222

samhouts · 2017-10-24T01:36:20Z

Description of Change

Adds support for right-to-left layouts.

As with UWP, respecting the device's layout direction based on the selected language/locale is the developer's explicit choice and does not happen automatically. Set the FlowDirection of the root View/Page to the Device.FlowDirection value. All other child views with MatchParent will inherit this value.

All Views default to the MatchParent FlowDirection. A View without a Parent will default to LeftToRight, and this value will be recursively passed down to the View's children, unless they have an explicitly set FlowDirection of their own.

Renderers can access the IVisualElementController.EffectiveFlowDirection to get the actual specified direction for a View/Page and whether the value was inherited (implicit) or explicitly set.

Note that you should set the FlowDirection once on initial layout. Changing this value causes an expensive relayout and will affect performance.

Known Limitations

General

NavigationPage button location, toolbar item location, and transition animation is currently controlled by the device locale, not the FlowDirection setting.
CarouselPage swipe direction does not flip.
Images need to mirror when they are explicitly set to right-to-left. May also need to support asset suffixes.
TextDirection property needs to be added.
Global app setting for FlowDirection

Android

Searchbar orientation is controlled by the device locale, not the FlowDirection setting.
ContextAction placement is controlled by the device locale, not the FlowDirection setting.

iOS

Stepper orientation is controlled by the device locale, not the FlowDirection setting.
EntryCell text alignment is controlled by the device locale, not the FlowDirection setting.
ContextAction gesture and alignment are not flipped.

UWP

ContextAction text alignment is controlled by the device locale, not the FlowDirection setting.
Editor text alignment is controlled by the device locale, not the FlowDirection setting.(The Right To Left flow direction doesn't change the text flow direction in Entry and Editor #5860)
FlowDirection does not appear to be inherited by MasterDetailPage children.

macOS

MasterDetailPage Master page does not pop out from the right in RTL
Text alignment is controlled by the device locale, not the FlowDirection setting.
ProgressBar is not controlled by the FlowDirection setting.
ImageCell, SwitchCell, TextCell are not controlled by the FlowDirection setting.
Searchbar orientation is controlled by the device locale, not the FlowDirection setting.

Testing

Android

Users will need to set android:supportsRtl="true" and set Android's MinSDKVersion to 17 or higher.

To test device-specified RTL on Android, either select a language that is RTL or enable Force RTL layout direction in the Developer Options. You will also need to add your language to the list of languages your app supports in the Info.plist. See https://developer.xamarin.com/guides/ios/advanced_topics/localization_and_internationalization/ for more information. If you do change your language and region, you may encounter an exception with DatePickers. See Bug 59077 for more information and a workaround.

iOS

There's no easy way to test device-specified RTL on Xamarin.iOS. The pseudolanguage options are Xcode only. You will need to change the language and region to an RTL locale in order to test it. Please note that once you do so, DatePickers will throw an exception if you do not include the resources required for alternate calendars. For example, if you're testing in Arabic, be sure to select mideast in the iOSBuild Internationalization section.

The ability to force a control to flip directions was added in iOS 9, so iOS 8 will not be fully supported.

UWP

Similar to iOS, you will need to change the language and region to an RTL locale in order to test device-specified RTL. You will also need to add the language resource to your Package.appxmanifest for your app to support it.

Visual comparisons (you asked for it, get ready)

Android

Before

After (LTR)

After (RTL Forced)

After (RTL Locale)

iOS

Before

After (LTR)

After (RTL Forced)

After (RTL Locale)

UWP

Before

After (LTR)

After (RTL Forced)

After (RTL Locale)

Bugs Fixed

N/A

API Changes

Added:

enum EffectiveFlowDirection
enum FlowDirection
IVisualElementController.EffectiveFlowDirection
VisualElement.FlowDirection
Device.FlowDirection

Behavioral Changes

Android

For API >=17, we now set the TextAlignment instead of the Gravity of the EditText when we change the HorizontalTextAlignment property.

PR Checklist

Has tests (manual!)
Rebased on top of master at time of PR
Changes adhere to coding standard
Consolidate commits as makes sense

maamountki · 2017-10-24T07:21:53Z

In UWP, Unlike entry behavior, Editor text is right-aligned if text already have rtl language value regardless of the selected language/locale, Also if keyboard changed to rtl language while editor text is empty, Editor will align text to right as you typing.

rmarinho · 2017-10-24T08:55:40Z

Needs docs update

samhouts · 2017-10-24T16:39:07Z

@maamountki Yes, sorry, what I meant to say is that I am unable to force the text alignment, but it does properly align itself with the device language/locale. Thank you!

jassmith · 2017-10-25T00:40:28Z

Xamarin.Forms.Core/FlowDirection.cs

+    public enum FlowDirection
+    {
+		MatchParent = 0,
+        LeftToRight = 1,


Indentation screwy (my fault)

jassmith · 2017-10-25T00:41:34Z

Xamarin.Forms.Core/VisualElement.cs

+
+				_effectiveFlowDirection = value;
+				InvalidateMeasureInternal(InvalidationTrigger.Undefined);
+				OnPropertyChanged(FlowDirectionProperty.PropertyName);


This may have some negative impacts on anyone binding this property. I cant imagine why anyone would be TwoWay binding this, but ya know.

this one isn't bindable, @jassmith. I don't get the comment

jassmith · 2017-10-25T01:36:51Z

Xamarin.Forms.Platform.iOS/Renderers/TabletMasterDetailRenderer.cs

+			if (VisualElementController == null || NativeView == null)
+				return;
+
+			if (VisualElementController.EffectiveFlowDirection.HasFlag(EffectiveFlowDirection.RightToLeft))


HasFlag is super evil and slow. Like really REALLY slow. Don't use HasFlag.

jassmith · 2017-10-25T01:42:58Z

Approved pending tests and fixing HasFlag

StephaneDelcroix

I reviewed the Core part, and wow, this is impressive! I left a few comments/questions but I like this.

StephaneDelcroix · 2017-10-27T07:14:44Z

Xamarin.Forms.Controls/ControlGalleryPages/FlowDirectionGallery.cs

+
+	public class FlowDirectionGalleryLandingPage : ContentPage
+	{
+		FlowDirection DeviceDirection => Device.Info.CurrentFlowDirection;


is Device.Info.CurrentFlowDirection the recommended way to access the FlowDirection?

if so, it causes 2 problems:

Device.Info is attributed with [EditorBrowsable(EditorBrowsableState.Never)]

it makes it hard to access from a XAML page. the FlowDirection should probably be exposed at the Device level, so one can do <ContentPage FlowDirection="{x:Static Device.FlowDirection}" ... /> (x:Static syntax is Type.Member and doesn't support Type.Member.Member)

I like it. Trying it out now...

StephaneDelcroix · 2017-10-27T07:16:31Z

Xamarin.Forms.Core/BindableObject.cs

@@ -605,7 +604,8 @@ enum BindableContextAttributes
 			IsBeingSet = 1 << 1,
 			IsDynamicResource = 1 << 2,
 			IsSetFromStyle = 1 << 3,
-			IsDefaultValue = 1 << 4
+			IsDefaultValue = 1 << 4,
+			IsInherited = 1 << 5,


do we support Inherited BPs ? I don't see this flag used anywhere

sorry thats leftover from me when I was doing something else with this

StephaneDelcroix · 2017-10-27T07:19:59Z

Xamarin.Forms.Core/Cells/Cell.cs

@@ -18,6 +19,24 @@ public abstract class Cell : Element, ICellController

 		bool _nextCallToForceUpdateSizeQueued;

+		EffectiveFlowDirection _effectiveFlowDirection = EffectiveFlowDirection.LeftToRight | EffectiveFlowDirection.Implicit;
+		EffectiveFlowDirection IFlowDirectionController.EffectiveFlowDirection


as you're implementing this explicitly, I guess this is not meant to be set directly by the user, so there's no point in making this property bindable ?

StephaneDelcroix · 2017-10-27T07:24:11Z

Xamarin.Forms.Core/Cells/Cell.cs

+				OnPropertyChanged(VisualElement.FlowDirectionProperty.PropertyName);
+			}
+		}
+		IFlowDirectionController FlowController => this;


Style Police here. You're missing a white line. Please pull over !

(well, fix it only if you have other things to push)

StephaneDelcroix · 2017-10-27T07:27:16Z

Xamarin.Forms.Core/Cells/Cell.cs

+				OnPropertyChanged(VisualElement.FlowDirectionProperty.PropertyName);
+			}
+		}
+		IFlowDirectionController FlowController => this;


if I understand this right, you added this property so you don't have to cast to IFlowDirectionControllereverytime you want to invoke an explicitly implemented interface method ? If so, make it a field

IFlowDirectionController _flowController = this;

Can't set a field to this.

StephaneDelcroix · 2017-10-27T07:40:11Z

Xamarin.Forms.Core/EffectiveFlowDirectionExtensions.cs

+					return EffectiveFlowDirection.RightToLeft | mode;
+			}
+
+			throw new InvalidOperationException($"Cannot convert {self} to {nameof(EffectiveFlowDirection)}.");


you mean default:

StephaneDelcroix · 2017-10-27T07:42:47Z

Xamarin.Forms.Core/EffectiveFlowDirectionExtensions.cs

+		[EditorBrowsable(EditorBrowsableState.Never)]
+		public static bool IsRightToLeft(this EffectiveFlowDirection self)
+		{
+			return (self & EffectiveFlowDirection.RightToLeft) != 0;


the canonical way to check a flag is (self & EffectiveFlowDirection.RightToLeft) == EffectiveFlowDirection.RightToLeft

it's not important when the flag has only a single bit set, but otherwise, it is

StephaneDelcroix · 2017-10-27T07:47:10Z

Xamarin.Forms.Core/Layout.cs

+			{
+				isRightToLeft = parent.EffectiveFlowDirection.IsRightToLeft();
+				if (isRightToLeft)
+				{


I'd reduce nesting

if (parent != null && (isRightToLeft = parent.EffectiveFlowDirection.IsRightToLeft())) region = new Rectangle(parent.Width - region.Right, region.Y, region.Width, region.Height);

StephaneDelcroix · 2017-10-27T07:51:00Z

Xamarin.Forms.Core/VisualElement.cs

+
+				_effectiveFlowDirection = value;
+				InvalidateMeasureInternal(InvalidationTrigger.Undefined);
+				OnPropertyChanged(FlowDirectionProperty.PropertyName);


this one isn't bindable, @jassmith. I don't get the comment

StephaneDelcroix · 2017-10-27T07:53:50Z

Xamarin.Forms.Core/EffectiveFlowDirection.cs

+namespace Xamarin.Forms
+{
+	[Flags]
+	public enum EffectiveFlowDirection


most of the implementation hide EffectiveFlowDirection through explicit interface implementation, so I guess this isn't mean to be used by our users at all ? if so, attribute the type or move it to the Internals namespace

It should only be set by Core code (users set FlowDirection), but it should be exposed via IVisualElementController so renderers can use it.

API only used by renderers is usually attributed, or in the internals namespace, or both

Right, but our users will want to access this for their custom renderers, so it feels like it should be exposed.

hartez · 2017-10-31T20:12:45Z

Xamarin.Forms.ControlGallery.Android/Properties/AndroidManifest.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="AndroidControlGallery.AndroidControlGallery" android:installLocation="auto">
-	<uses-sdk android:minSdkVersion="15" />
+	<uses-sdk android:minSdkVersion="17" />


Doesn't this prevent us from testing things for API 15/16 in the ControlGallery?

hartez · 2017-10-31T20:21:21Z

Xamarin.Forms.Platform.Android/Cells/SwitchCellRenderer.cs

@@ -58,6 +63,17 @@ void UpdateHeight()
 			_view.SetRenderHeight(Cell.RenderHeight);
 		}

+		void UpdateFlowDirection()


This same UpdateFlowDirection code is repeated several times - seems like a candidate for an extension method.

StephaneDelcroix · 2017-11-01T09:07:13Z

Xamarin.Forms.Core/Device.cs

@@ -27,6 +27,7 @@ public static class Device
 		public static void SetIdiom(TargetIdiom value) => Idiom = value;
 		public static TargetIdiom Idiom { get; internal set; }

+		//TODO: Why are there two of these? This is never used...?


🤦‍♂️

StephaneDelcroix · 2017-11-01T09:09:18Z

Xamarin.Forms.Core/EffectiveFlowDirection.cs

+	public enum EffectiveFlowDirection
+	{
+		LeftToRight = 1 << 0,
+		RightToLeft = 1 << 1,


"It's never used by users" seriously contradicts the "needs to be public for custom renderers". Please fix as this is public API

kingces95

Impressive! Most impressive!

kingces95 · 2017-11-01T21:19:54Z

Xamarin.Forms.Platform.WinRT/SwitchRenderer.cs

+				Control.FlowDirection = WFlowDirection.RightToLeft;
+			else if (VisualElementController.EffectiveFlowDirection.IsLeftToRight())
+				Control.FlowDirection = WFlowDirection.LeftToRight;
+		}


It's not ur fault but it's a shame our conventions lead us to repeat this code in so many places...

The conventions don't force the repetition of the stuff inside UpdateFlowDirection - all of that could be moved into an extension method.

Need to set minSdkVersion to 17 to test

mhmd-azeez · 2018-04-12T19:48:01Z

@samhouts #2447 #2448 #2449. When do you expect you guys will be able to work on the current limitations (listed in the PR)?

ali-h2010 · 2018-04-15T05:32:12Z

@Encrypt0r Your post is much more descriptive than mine. Could you please create a new issue with the same content?
Wait you already did in #2447
Many thanks

smartprogrammer93 · 2018-06-09T18:13:44Z

@samhouts
FlowDirection = rtl on horizental scrollview breaks the scrolling in it

samhouts · 2018-06-09T20:05:49Z

That's not good! Would you mind opening an issue? Thanks!

smartprogrammer93 · 2018-06-09T20:20:29Z

@samhouts
done #3000

ali-h2010 · 2018-06-14T14:44:28Z

Was anyone able to bind the FlowDirection using ViewModels?
I tried but there is no response in the XAML

ali-h2010 · 2018-06-15T14:33:06Z

@samhouts
I am also was not able to use FormattedString in a label. This ignores the FlowDirection

<Label TextColor="Black" FlowDirection="MatchParent"> <Label.FormattedText> <FormattedString> <Span Text="{Translate:TranslateExtension Text=OldPassword}" /> <Span Text="*" ForegroundColor="#CD4A4A" FontAttributes="Bold" /> </FormattedString> </Label.FormattedText> </Label>

samhouts · 2018-07-18T19:37:35Z

@ali-h2010 Very sorry to have missed your comment! Please open new issues for any problems you encounter so we don't lose them in this thread. Thank you!

PureWeen · 2018-07-18T19:44:18Z

@ali-h2010 check my notes here as well to see if that resolves the issue for you
#3311

* Restart RTL work * Remove IsInherited flag as it never got used * [Core] Unit tests * [Core] FlowDirection * Add FlowDirectionGallery * Android gallery supports RTL Need to set minSdkVersion to 17 to test * iOS gallery supports RTL * UWP gallery supports RTL * [Android] Implement FlowDirection * [iOS] Implement FlowDirection * [macOS] Implement FlowDirection * [UWP] Implement FlowDirection * Update docs * [Core] Simplify EffectiveFlowDirection enum & expose helper extensions Also, TEST TEST TEST * Update docs

huangjinshe · 2020-02-23T19:12:44Z

In the newest version I download today. I confirm the problem is very different.

The Label flow direction totally based on the content.
Which mean If you set content to : "English", it will always show as: Left to right.
If you set content to some right to left version font such like arabic: "سىناق". It will always show as Right to left.

Which mean it will totally based on the font, and Android or Xamarin.Foms auto decide that,
I really don't like it, it will change the default layout which we already design.(I want it always Left to right, when I wosn't set the flow direction of Label)

dnfclas added the cla-required label Oct 24, 2017

samhouts added cla-not-required DO-NOT-MERGE-!!! 🛑 This is in progress and needs to be updated before it can be merged. and removed cla-required labels Oct 24, 2017

samhouts removed the DO-NOT-MERGE-!!! 🛑 This is in progress and needs to be updated before it can be merged. label Oct 25, 2017

jassmith approved these changes Oct 25, 2017

View reviewed changes

davidortinau added the D-15.5.1 label Oct 25, 2017

StephaneDelcroix suggested changes Oct 27, 2017

View reviewed changes

samhouts changed the title ~~Basic Right-To-Left Support~~ [All] Basic Right-To-Left Support Oct 27, 2017

samhouts force-pushed the rtl branch from 1cb1ae3 to 57b1c1f Compare October 31, 2017 16:58

hartez suggested changes Oct 31, 2017

View reviewed changes

StephaneDelcroix reviewed Nov 1, 2017

View reviewed changes

StephaneDelcroix suggested changes Nov 1, 2017

View reviewed changes

kingces95 approved these changes Nov 1, 2017

View reviewed changes

Jason Smith and others added 12 commits November 1, 2017 15:22

Restart RTL work

5152708

Remove IsInherited flag as it never got used

02b6420

[Core] Unit tests

85b6ed4

[Core] FlowDirection

dd88925

Add FlowDirectionGallery

0f8a54a

Android gallery supports RTL

2e4178a

Need to set minSdkVersion to 17 to test

iOS gallery supports RTL

4aeebbe

UWP gallery supports RTL

7506aee

[Android] Implement FlowDirection

302ad3c

[iOS] Implement FlowDirection

4f7c0fa

[macOS] Implement FlowDirection

6edde8c

[UWP] Implement FlowDirection

63fb40d

samhouts mentioned this pull request Apr 13, 2018

[Android] Force label text direction #2447

Closed

samhouts added the a/rtl label Apr 13, 2018

samhouts added this to the 3.0.0 milestone May 5, 2018

samhouts removed this from Done in v3.1.0 May 8, 2018

masonyc mentioned this pull request May 8, 2018

(Android)HorizontalTextAlignment not working in Entry Xamarin.Forms 3.0 #2638

Closed

PureWeen mentioned this pull request May 16, 2018

[Android] Fixes HorizontalTextAlignment not being applied to TextView Elements #2743

Merged

4 tasks

PureWeen mentioned this pull request Jun 7, 2018

[Android] Set vertical center on gravity for Search Bar #2969

Merged

4 tasks

smartprogrammer93 mentioned this pull request Jun 9, 2018

horizontal Scrollview breaks scrolling when flowdirection is set to rtl #3000

Closed

AmrAlSayed0 mentioned this pull request Jun 27, 2018

RTL doesn't switch the margin #3066

Open

rmarinho mentioned this pull request Aug 8, 2018

[iOS] Fix sizing issue on MDP #3515

Merged

3 tasks

samhouts mentioned this pull request Sep 6, 2018

RightToLeft's FlowDirection not working when Force to ContentPage #3501

Open

mhmd-azeez mentioned this pull request Sep 18, 2018

Xamarin.Forms.Shell Spec #2415

Closed

26 tasks

samhouts mentioned this pull request Oct 27, 2018

[Android/iOS] support locale LayoutDirection on MasterDetailPage #3992

Closed

3 tasks

samhouts modified the milestones: 3.0.0, 2.5.0 Aug 23, 2019

samhouts modified the milestones: 3.0.0, 2.5.0 Oct 29, 2019

[All] Basic Right-To-Left Support #1222

[All] Basic Right-To-Left Support #1222

Conversation

samhouts commented Oct 24, 2017 • edited

Description of Change

Known Limitations

General

Android

iOS

UWP

macOS

Testing

Android

iOS

UWP

Visual comparisons (you asked for it, get ready)

Android

iOS

UWP

Bugs Fixed

API Changes

Behavioral Changes

Android

PR Checklist

maamountki commented Oct 24, 2017 • edited

rmarinho commented Oct 24, 2017

samhouts commented Oct 24, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jassmith commented Oct 25, 2017

StephaneDelcroix left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kingces95 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mhmd-azeez commented Apr 12, 2018

ali-h2010 commented Apr 15, 2018 • edited

smartprogrammer93 commented Jun 9, 2018

samhouts commented Jun 9, 2018

smartprogrammer93 commented Jun 9, 2018

ali-h2010 commented Jun 14, 2018 • edited

ali-h2010 commented Jun 15, 2018 • edited

samhouts commented Jul 18, 2018

PureWeen commented Jul 18, 2018

huangjinshe commented Feb 23, 2020

samhouts commented Oct 24, 2017 •

edited

maamountki commented Oct 24, 2017 •

edited

ali-h2010 commented Apr 15, 2018 •

edited

ali-h2010 commented Jun 14, 2018 •

edited

ali-h2010 commented Jun 15, 2018 •

edited