I need to implement a right-to-left (RTL) Flyout menu to better support RTL languages.

Question

Platform Targets: Android and iOS

Issue:

I've attempted to use the FlowDirection="RightToLeft" attribute within the Shell, as shown below:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="MyApp.AppShell"

FlowDirection="RightToLeft">

While this successfully reverses the content's flow, it does not affect the Flyout menu, which still slides in from the left. I need the Flyout menu to emerge from the right.

Additionally, if the device language is set to an RTL language, the Flyout menu will appear from the right when lunching the app. However, I am unable to change this programmatically.

Answer 1

Hello,

MAUI currently does not support the menu bar popping up from the right.

It is not an issue that the flyout does not pop up from the right after setting the FlowDirection. According to the documentation, when setting FlowDirection for a View, the direction of its child controls is changed.

The following contains a few important points about flow direction from Right-to-Left Localization. Developers should consult that document for more information about limitations of right-to-left support, and for requirements to implement right-to-left support on various target platforms. The default value of FlowDirection for a visual element that has no parent is LeftToRight, even on platforms where FlowDirection is RightToLeft. Therefore, developers must deliberately opt in to right-to-left layout. Developers can choose right-to-left layout by setting the FlowDirection property of the root element to RightToLeft to chosse right-to-left layout, or to MatchParent to match the device layout. All VisualElements that have a parent default to MatchParent.

If you want to change the layout, it is possible in Android. In iOS, due to Apple's unified design, the direction is controlled by the locale.

protected override void OnCreate(Bundle? savedInstanceState){                         
    base.OnCreate(savedInstanceState);             
    Window.DecorView.LayoutDirection = Android.Views.LayoutDirection.Rtl;         
}

A user has already proposed this feature request on GitHub. You can continue to track [Enhancement] Double Flyover in Shell Copy of feature request from XForms #9674 to avoid missing the development team's updates on this feature.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.