RTL support

[hichamboushaba]

FlowDirection is not supported yet, when do you plan to add it to support RTL in all platforms.

[Arlodotexe]

Also curious about this, low priority but something we'd like to support in our app.

[Youssef1313]

@jeromelaban @MartinZikmund Any pointers on how to start working on this? Thanks!

[jeromelaban]

@Youssef1313 identifying where the RTL support is lacking would be a great start. Some of the controls do support it, either because the platform provides it by default, or because we imported code that supports it, but we're not tracking it yet.

[MartinZikmund]

It should also somehow tie in with the localization infrastructure - e.g. the RTL should be enabled automatically when the current culture has CultureInfo.TextInfo.IsRightToLeft = true

[Youssef1313]

I've tried setting FlowDirection="RightToLeft" on TextBlock and StackPanel, Grid, and it seems to work correctly. Are there known specific controls that doesn't support RTL?

[jeromelaban]

@Youssef1313 on which platforms have you tried ? Can you post screenshots of the results as well ?

[Youssef1313]

Oh I was trying on the UWP project. I should have tried on another platform. Will re-take a look.

[avikeid2007]

Is there any update for RTL support?

[MartinZikmund]

We should break this down into individual platforms and prioritize each

[balbarak]

Any update.

This feature is very important for RTL languages and speakers

[balbarak]

@Youssef1313 @MartinZikmund

Hello, I did some attached property that do the job maybe will give you a starting point here is the code

controls that reversed are StackPanel Grid TextBox TextBlock FrameworkElement Control

        private static void ChangeDirection(UIElement element, ElementFlowDirection dir)
        {
            var grids = new List<Grid>();
            var stackPanels = new List<StackPanel>();
            var frameWorkElements = new List<FrameworkElement>();
            var textBlocks = new List<TextBlock>();
            var textBoxes = new List<TextBox>();
            var controls = new List<Control>();

            UIElementHelper.FindChildren(grids, element);
            UIElementHelper.FindChildren(stackPanels, element);
            UIElementHelper.FindChildren(frameWorkElements, element);
            UIElementHelper.FindChildren(textBlocks, element);
            UIElementHelper.FindChildren(textBoxes, element);
            UIElementHelper.FindChildren(controls, element);

            grids.ForEach(ReverseGridChilds);
            stackPanels.ForEach(ReverseStackPanel);
            frameWorkElements.ForEach(ReverseMarginsAndHorizontalAlignment);
            textBoxes.ForEach(ReverseTextBoxes);
            textBlocks.ForEach(ReverseTextBlock);
            controls.ForEach(ReversePadding);
        }

        private static void ReverseGridChilds(Grid grid)
        {
            var childs = grid.Children;

            var colCount = grid.ColumnDefinitions.Count;

            var colDefs = grid.ColumnDefinitions.ToList();

            colDefs = Enumerable.Reverse(colDefs).ToList();

            grid.ColumnDefinitions.Clear();

            foreach (var item in colDefs)
            {
                grid.ColumnDefinitions.Add(item);
            }

            if (colCount <= 0)
                return;

            var array = Enumerable.Range(0, colCount).ToArray();
            array = Enumerable.Reverse(array).ToArray();

            foreach (var item in childs)
            {
                var frame = item as FrameworkElement;

                var colNo = Grid.GetColumn(frame);
                var colSpan = Grid.GetColumnSpan(frame);

                if (colNo > array.Length - 1)
                    continue;

                int targetVale = array[colNo];

                if (colSpan > 1)
                {
                    Grid.SetColumnSpan(frame, colSpan);

                    int targetValue = targetVale / colSpan;

                    Grid.SetColumn(frame, targetValue);
                }
                else
                {
                    Grid.SetColumn(frame, targetVale);
                }
            }
        }

        private static void ReverseStackPanel(StackPanel panel)
        {
            if (panel.Orientation != Orientation.Horizontal)
                return;

            var childs = panel.Children.ToArray();

            childs = Enumerable.Reverse(childs).ToArray();

            panel.Children.Clear();

            foreach (var item in childs)
            {
                panel.Children.Add(item);
            }
        }

        private static void ReverseMarginsAndHorizontalAlignment(FrameworkElement element)
        {
            var top = element.Margin.Top;
            var bottom = element.Margin.Bottom;
            var left = element.Margin.Left;
            var right = element.Margin.Right;

            element.Margin = new Thickness(right, top, left, bottom);

            if (element.HorizontalAlignment == HorizontalAlignment.Left)
            {
                element.HorizontalAlignment = HorizontalAlignment.Right;
            }
            else if (element.HorizontalAlignment == HorizontalAlignment.Right)
            {
                element.HorizontalAlignment = HorizontalAlignment.Left;
            }
        }

        private static void ReversePadding(Control element)
        {
            var top = element.Padding.Top;
            var bottom = element.Padding.Bottom;
            var left = element.Padding.Left;
            var right = element.Padding.Right;

            element.Padding = new Thickness(right, top, left, bottom);
        }

        private static void ReverseTextBoxes(TextBox textBox)
        {
            var alignment = textBox.TextAlignment;

            var shouldNotChanged = alignment == TextAlignment.Center || alignment == TextAlignment.Justify;

            if (shouldNotChanged)
                return;

            var isLeft = alignment == TextAlignment.Left || alignment == TextAlignment.Start;
            var isRight = alignment == TextAlignment.Right || alignment == TextAlignment.End;


#if ANDROID
            textBox.TextAlignment = TextAlignment.Start;
            if (textBox.LayoutDirection == Android.Views.LayoutDirection.Ltr)
            {
                textBox.LayoutDirection = Android.Views.LayoutDirection.Rtl;
                textBox.TextDirection = Android.Views.TextDirection.Rtl;
            }
            else
            {
                textBox.LayoutDirection = Android.Views.LayoutDirection.Ltr;
                textBox.TextDirection = Android.Views.TextDirection.Ltr;
            }
#else

            if (isLeft)
            {
                textBox.TextAlignment = TextAlignment.Right;
            }
            else if (isRight)
            {
                textBox.TextAlignment = TextAlignment.Left;
            }
#endif
        }

        private static void ReverseTextBlock(TextBlock text)
        {
            var textAlignment = text.TextAlignment;

            var isLeft = textAlignment == TextAlignment.Left;
            var isRight = textAlignment == TextAlignment.Right;

#if ANDROID
            text.TextAlignment = TextAlignment.Start;

            if (text.LayoutDirection == Android.Views.LayoutDirection.Ltr)
            {
                text.LayoutDirection = Android.Views.LayoutDirection.Rtl;
                text.TextDirection = Android.Views.TextDirection.Rtl;
            }
            else
            {
                text.LayoutDirection = Android.Views.LayoutDirection.Ltr;
                text.TextDirection = Android.Views.TextDirection.Ltr;
            }
#else
            if (isLeft)
            {
                text.TextAlignment = TextAlignment.Right;

            }
            else if (isRight)
            {
                text.TextAlignment = TextAlignment.Left;
            }
#endif

        }
    }

[MartinZikmund]

@balbarak thank you a lot! We will try to prioritize this as soon as possible!

[Youssef1313]

Thanks @balbarak.

Opened #13524 to support that on Skia.

There are some specific elements that shouldn't probably inherit FlowDirection

• Image
• WebView
• MediaPlayerElement

After getting #13524 merged, I'll work on getting this for other platforms plus handle the specific elements that don't inherit FlowDirection.