Search code examples
xamarinnavigationxamarin.formsprismmaster-detail

Xamarin.Forms Prism app not showing Master-Detail navigation bar

I am trying to get Master-Detail navigation configured in my Xamarin.Forms app with my UWP target running on Windows 10.

When I run the sample Master-Detail app provided by Xamarin (following https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/master-detail-page/), and change the MasterBehavior to Popover, I see the following behavior:

Startup:

enter image description here

Select the hamburger icon:

enter image description here

Make a selection:

enter image description here

In my prism app, I navigate to MainPage/View1:

protected override void OnInitialized()
{
    InitializeComponent();
    var task = NavigationService.NavigateAsync("MainPage/View1");
    ...
}

MainPage is my MasterDetailPage with the MasterBehavior set to Popover, and View1 is a ContentPage.

MainPage:

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:views="clr-namespace:My.Mobile.Application.Views;assembly=My.Mobile.Application"
                  x:Class="My.Mobile.Application.Frame.MainPage"
                  MasterBehavior="Popover">
  <MasterDetailPage.Master>
    <views:MasterPage x:Name="masterPage" />
  </MasterDetailPage.Master>
  <MasterDetailPage.Detail>
    <NavigationPage>
      <x:Arguments>
        <views:View1 />
      </x:Arguments>
    </NavigationPage>
  </MasterDetailPage.Detail>
</MasterDetailPage>

View1:

public View1()
{
  NavigationPage.SetHasNavigationBar(this,false);
  InitializeComponent();
}

On startup, I do not see any navigation bar, just the contents of View1 (currently just a red screen):

enter image description here

If I change the MasterBehavior of MainPage.xaml to Default instead of Popover, and remove the SetHasNavigationBar in View1, I see the side menu when the app launches:

MainPage:

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:views="clr-namespace:My.Mobile.Application.Views;assembly=My.Mobile.Application"
                  x:Class="My.Mobile.Application.Frame.MainPage"
                  MasterBehavior="Default">
  <MasterDetailPage.Master>
    <views:MasterPage x:Name="masterPage" />
  </MasterDetailPage.Master>
  <MasterDetailPage.Detail>
    <NavigationPage>
      <x:Arguments>
        <views:View1 />
      </x:Arguments>
    </NavigationPage>
  </MasterDetailPage.Detail>
</MasterDetailPage>

View1:

public View1()
{
  //NavigationPage.SetHasNavigationBar(this,false);
  InitializeComponent();
}

enter image description here

When I make a selection after startup with MasterBehavior set to Default, I now see the hamburger menu.

enter image description here

Is there anything that I can add or verify in my solution to mimic the Xamarin sample behavior with the MasterBehavior set to Popup?

Solution

  • The problem is here: var task = NavigationService.NavigateAsync("MainPage/View1");

    Since you want to show the hamburger menu, you need to wrap your Detail in a NavigationPage. So first register a NavigationPage for navigation

    Container.RegisterTypeForNavigation<NavigationPage>();

    Then add it to your navigation path:

    var task = NavigationService.NavigateAsync("MainPage/NavigationPage/View1");

    Also, you can remove a the detail markup in your MasterPage XAML because the navigation service will build it up for you.