PelinKonaray avatar image
0 Votes"
PelinKonaray asked JarvanZhang-MSFT commented

Xamarin.Forms FlyoutPage FlowDirection RightToLeft

I have an app it used Xamarin.Forms FlyoutPage. It is designed to open from left side. But I also want to support the Arabic language now. That's why I want to open it from right side.
I added FlowDirection="RightToLeft" to FlyoutPage. It made aligned to right side the all text. But the side menu has not been changed to open from the right side. I applied this right to left localization steps And I also changed localization settings of test devices. None of them could not changed flyout direction as right to left.

I also added following codes to xaml.cs of Flyout page. But it didn't work.

Flyout.FlowDirection = FlowDirection.RightToLeft;
Detail.FlowDirection = FlowDirection.RightToLeft;

I have seen Xamarin.Forms Shell flyout. And I tried it with an sample project. FlowDirection="RightToLeft" command works with shell. But it will take me a lot of time to turn it into shell. (Because my app has lots of page and my all navigation will change when i change it.)

That's why I am trying to find a way to rotate side menu as right to left with Xamarin.Forms FlyoutPage. How can I do it?

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT commented


Welcome to our Microsoft Q&A platform!

To display the FlyoutPage on the right side, please set FlowDirection to RightToLeft for the flyoutPage.

<FlyoutPage ...
        <pages:FlyoutPageFlyout x:Name="FlyoutPage" />
                <pages:FlyoutPageDetail />

On Android, we also need to set android:supportsRtl to ture in AndroidManifest.xml to enable the function.

<manifest ...>
  <application android:theme="@style/MainTheme" android:supportsRtl="true"></application>

Here is the related doc, you could refer it.

Best Regards,

Jarvan Zhang

If the response is helpful, 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.

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you Jarvan Zhang.
Actually I already did your suggestion. But it still opens from left side on my app. But when you suggest same, I tried it in a new sample project. After trying it in sample project I understood the reason of my problem. My problem occured because of FlyoutPage CustomRenderer. I used to use custom renderer to narrow the width of my side menu. And there is a line as "GravityFlags.Left" in custom renderer. This caused problem. I understand now. I changed it as "GravityFlags.Right". Thanks for helping.

var lp = new DrawerLayout.LayoutParams(_masterLayout.LayoutParameters);
Flyout page = (Flyout)newElement;
lp.Width = (int)(page.WidthRatio * width);
lp.Gravity = (int)GravityFlags.Left; //I changed this line
_masterLayout.LayoutParameters = lp;

1 Vote 1 ·

You're welcome. Thanks for sharing the details.

0 Votes 0 ·