FlexLayout does not consider FlowDirection.RightToLeft

[Omarkth]

Description

FlexLayout does not consider FlowDirection (specifically when set to RightToLeft)

Steps to Reproduce

Open the FlexLayout Demos sample: https://developer.xamarin.com/samples/xamarin-forms/UserInterface/FlexLayoutDemos/

Open the "ExperimentPage.xaml" file and specify the page's flowdirection to be RTL:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.ExperimentPage"
             Title="Experiment"
             FlowDirection="RightToLeft">

Expected Behavior

The items in the FlexLayout should appear right aligned and arranged from right to left.

Actual Behavior

the FlexLayout ignores the FlowDirection property and renders as in LTR.

Screenshots

[StephaneDelcroix]

To display items from right to left in a flex layout, you should set the property Direction of the flex layout to RowReverse instead of Row.

I'm not convinced that it should follow FlowDirection automatically, but we can discuss it:

• how does that behave on the web ?
• what about column direction. should they be reversed too ?
• if the Direction is RowReverse, should it be Row when FlowDirection is RTL ?

[Omarkth]

Thank you Stephane, I'm aware of the RowReverse and already using it.

The concept of the FlowDirection property is that you set it once (or it is inferred from the device once) and all the controls should conform to it, right?

What I did is as follows: (not perfect, but solves my problem for now):

    public class CustomFlexLayout : Xamarin.Forms.FlexLayout
    {
        public CustomFlexLayout ()
        {
            Direction = Device.FlowDirection == FlowDirection.RightToLeft ?
                                    FlexDirection.RowReverse : FlexDirection.Row;
        }
    }

Answering your questions:

• On the web, it does exactly as what I'm expecting 😉 check https://jsfiddle.net/dj4obtxv/
• I think it should also reverse the columns from right to left
• Yes (you are talking about the rendering effect, not the actual property, right?)

[AmrAlSayed0]

GridLayout reverses the direction if the Device.FlowDirection is reversed. I think it should be the default behavior for FlexLayout too. The whole reason most layouts use direction agnostic naming like Row and RowReverse instead of Left and Right is to adapt to the device/browser direction when needed. I think.

[Omarkth]

Is this still considered as Enhancement? I believe it should be a bug, shouldn't it?

[effpath999]

I am also using FlexLayout in one of my app, and I noticed recently with surprise that it does not take into account the FlowDirection property. That cause my layout when the device language is set to an RTL language to look very odd. I definitely think FlexLayout should take into account FlowDirection property like other layouts do.

[sjorsmiltenburg]

As the writer of the the just mentioned closed bug report I was also under the impression this should work as @Omarkth suggested.