CODEWITHSUNDEEP
xamarinxamarin.forms
AndrejDelany
AndrejDelany

Reputation: 423

MasterDetailPage: Different behaviour on UWP / Android

When using MasterDetailPage in Xamarin.Forms it behaves as aspected in Android. Just like a normal Navigation Drawer. Please notice the correct behaviour of the slide-in mechanism and the correct placement of the hamburger-button. The Buttons in the menu work great as well.

enter image description here enter image description here

The UWP App looks like this. Notice, there is no hamburger-button: enter image description here

After klicking on a menu-button, the menu is gone without a possibility to get it back: enter image description here

Here are some code excerpts:

App.xaml.cs

public partial class App : Application
{
    public App()
    {
        MainPage = new NavigationPage(new MenuPage());
    }
...

MenuPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WordDeck.MenuPage"
             xmlns:local="clr-namespace:WordDeck;assembly=WordDeck"
             Title="WordDeck."
             MasterBehavior="Default">

  <MasterDetailPage.Master>
    <ContentPage Title="Menu">
      <StackLayout Orientation="Vertical">
        <Button Text="Neues Spiel"
                Clicked="MainPage_Clicked"></Button>
        <Button Text="Deck Verwaltung"
                Clicked="DeckManager_Clicked"></Button>
      </StackLayout>
    </ContentPage>
  </MasterDetailPage.Master>

  <MasterDetailPage.Detail>
    <local:MainPage></local:MainPage>
  </MasterDetailPage.Detail>

</MasterDetailPage>

MenuPage.xaml.cs

public partial class MenuPage : MasterDetailPage
    {
        public MenuPage()
        {
            InitializeComponent();
        }

        private void MainPage_Clicked(object sender, EventArgs e)
        {
            Detail = new MainPage();
            Title = "WordDeck.";
            IsPresented = false;
        }

        private void DeckManager_Clicked(object sender, EventArgs e)
        {
            Detail = new DeckManagerPage();
            Title = "Deck Verwaltung";
            IsPresented = false;
        }
    }

MainPage and DeckManagerPage are nearly empty and of type ContentPage.

Why is there no menu Button on UWP?

Upvotes: 1

Views: 1132

Answers (2)

Mark Kromis
Mark Kromis

Reputation: 11

The main problem is the IsPresented on the desktop hides the drawer. One way to handle this is not to hide on desktop or tablet.

For example...

// Called from each Clicked Event
private void SetPresentedVisability()
{
    switch (Device.Idiom)
    {
        case TargetIdiom.Phone:
            IsPresented = false;
            break;
        case TargetIdiom.Desktop:
        case TargetIdiom.Tablet:
        case TargetIdiom.Unsupported:
            IsPresented = true;
            break;
    }
}

Alternately you could ignore any non phone IsPresented setting.

IsPresented = (Device.Idiom == TargetIdiom.Phone) ? false : true;

Upvotes: 1

Graham Pett
Graham Pett

Reputation: 123

It's because you're running the UWP app as a desktop app and not on the phone. If you run the app on a mobile phone or emulator you should see the menu as on Android.

If you want to use the hamburger behaviour when running as a desktop app set MasterBehavior = MasterBehavior.Popover on your MasterDetailPage

Upvotes: 3

Related Questions