How to switch .NET MAUI Flyout of Shell to the right with FlowDirection?

[RafikMk]

Discussed in https://github.com/dotnet/maui/discussions/15202

^{Originally posted by **RafikMk** May 21, 2023} Hello everyone, I'm currently working on a .NET MAUI application and facing a challenge with the Flyout menu (Sidebar). I'm targeting a right-to-left layout to better cater to right-to-left languages. I've attempted to use the FlowDirection="RightToLeft" attribute within the Shell, as shown below: ``` ``` While this successfully reverses my content's flow, it doesn't affect the Flyout menu which still slides from the left. Instead, I'm aiming to have the Flyout emerge from the right. Is there a way to achieve this in .NET MAUI? Thanks in advance for your assistance.

[ghost]

Hi @RafikMk. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

Hi @RafikMk. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[RafikMk]

Hi @RafikMk. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

Hi @rachelkang Please find below the link to the dedicated GitHub repository I created to reproduce the mentioned problem. It contains a project example that demonstrate the encountered issue. https://github.com/RafikMk/Maui_Shell.git

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.9.0 Preview 3. Can repro on Windows and Android platforms with sample project. RafikMk/Maui_Shell (github.com)

[vKarter]

I have the same issue :/ set FlowDirection="RightToLeft" nothing change

[randomroxks]

Any updates on this? Android does not seems to respect the rtl directive and also horizontal alignment when using RTL. This is frustrating.

[CraigBelser]

I was reading this ticket and was looking for and update. Additionally, why no support for vertical options? Flow direction toptobottom or bottomtotop?

[Kremed]

Any Workaround for this !!?

[MahmoudAlEssawi]

I found this article and it is very useful for reaching the deep code for shell >> https://vladislavantonyuk.github.io/articles/Customizing-.NET-MAUI-Shell/

I customized it to allow RTL flow direction

as follows:

1: Create a method to handle FlowDirection of CurrentCulture:

        public static void SetFlowDirection ()
        {
            string CultureName = Preferences.Get("AppLang", "en-US");
            var culture = new CultureInfo(CultureName);
#if ANDROID 
            var activity = Platform.CurrentActivity; 
            if (activity != null && activity.Window !=null)
            {
                activity.Window.DecorView.LayoutDirection = culture != null && culture.TextInfo.IsRightToLeft ? Android.Views.LayoutDirection.Rtl : Android.Views.LayoutDirection.Ltr;
            }
#elif WINDOWS
            var flowdirection = culture != null && culture.TextInfo.IsRightToLeft ? FlowDirection.RightToLeft : FlowDirection.LeftToRight;

            if (Application.Current?.Windows != null && Application.Current.Windows.Count != 0)
            {
                foreach (var win in Application.Current.Windows)
                { 
                    win.FlowDirection = flowdirection; 
                }
            }
            FlowDirectionChanged?.Invoke(flowdirection == FlowDirection.LeftToRight, new EventArgs());
#endif
        }

2: Create an event for FlowDirectionChanged

public static event EventHandler? FlowDirectionChanged; so that I can Invoke when the FlowDirection Changed.

3. Create a CustomShellHandler for windows and place it in Platforms >> Windows Folder

namespace MauiShellCustomization;

using System.Reflection;
using Microsoft.Maui.Controls.Handlers;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Platform;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Markup;

public class CustomShellHandler : ShellHandler
{
    protected override ShellView CreatePlatformView()
    {
        var shellView = base.CreatePlatformView();
        return shellView;
    }

    protected override void ConnectHandler(ShellView platformView)
    { 
        platformView.Loaded += ShellViewOnLoaded; 
        base.ConnectHandler(platformView);
    }

    protected override void DisconnectHandler(ShellView platformView)
    {
        platformView.Loaded -= ShellViewOnLoaded; 
        base.DisconnectHandler(platformView);
    }

    private void ShellViewOnLoaded(object sender, RoutedEventArgs e)
    {
        if (!PlatformView.IsLoaded)
        {
            return;
        }
        CultureExtensions.FlowDirectionChanged += (s, e) =>
        {
            PlatformView.FlowDirection =((bool?)s) == true ? FlowDirection.LeftToRight : FlowDirection.RightToLeft ; 

        }; 
    } 
}

4. Register the CustomShellHandler in MauiBuilder:

   builder.ConfigureMauiHandlers(h =>
               { 
   #if WINDOWS
   
        h.AddHandler<Shell, CustomShellHandler>();
   #endif
               })