question

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?

dotnet-xamarin
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

Hello,​

Welcome to our Microsoft Q&A platform!

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

<FlyoutPage ...
        FlowDirection="RightToLeft">
    
    <FlyoutPage.Flyout>
        <pages:FlyoutPageFlyout x:Name="FlyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <pages:FlyoutPageDetail />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

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>
</manifest>

Here is the related doc, you could refer it.
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/localization/right-to-left

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 ·