CODEWITHSUNDEEP
xamarin.forms
innom
innom

Reputation: 1007

xamarin.forms master detail menu page from both sides

I have a master detail page that displays from the left. But Id also like this exact feature coming from the other side. so TWO side drawer menus.

It is possible to show the page on the other side by doing:

<MasterDetailPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:Khaled.Views.MainMenu"
    Title="Title"
    FlowDirection="RightToLeft"
    x:Class="Khaled.Views.MainMenu.Page_MainMenu">

But this doesnt copy the page, it just shows it on the other side. I want TWO on each side (with the option to swipe it open) Anyone got any idea on how to do that?

Upvotes: 0

Views: 358

Answers (2)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10958

Like Mina Fawzy said, MasterDetailPage is obsolete as of version 5.0.0. Please use FlyoutPage instead.

You would be better to use the single side. When you set the VisualElement.FlowDirection property to RTL OR LTR, it would change the direction in which the UI elements on the page are scanned by the eye.

Left to Right:

enter image description here

Right to Left:

enter image description here

That's why we could not set both sides at the same time. But we could change the FlowDirection property at runtime through we do not suggest to do that. Changing this value at runtime causes an expensive layout process that will affect performance.

The way used to change the FlowDirection to RightToLeft.

Android:

Xaml:

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App1.FlyoutPage1"
         FlowDirection="LeftToRight"
         xmlns:pages="clr-namespace:App1">
  ......
</FlyoutPage>

AndroidManifest.xml:

<application android:label="App1.Android" android:theme="@style/MainTheme" android:supportsRtl="true"></application>

iOS:

For ios, refer to the link below. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/localization/right-to-left#ios

Upvotes: 1

Mina Fawzy
Mina Fawzy

Reputation: 21452

you can create icons in the top right and top left (hamburger menu) and then control them by code.

FlowDirection --> this controls the direction of the menu IsPresented --> flag to open or close menu by code

when you want to present the right menu

FlowDirection = "RightToLeft";  
IsPresented= true;

for the left

FlowDirection = "LeftToRight";
    IsPresented= true;

Recommendation

MasterDetails are deprecated use FlyoutPage https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.masterdetailpage?view=xamarin-forms

Upvotes: 0

Related Questions