Xamarin Forms MasterDetailPage - Secondary menu drawn twice on iOS

Question

My app uses Master-Detail navigation.
I push pages on the navigation stack to have back button functionality.
When pushing a page with ToolbarItems (secondary menu), that's fine on Android, but it doubles the menu items on iOS.
Switching to the same page (not pushing), there is no problem on iOS (secondary menu shown once, as expected).

I adopted the official MasterDetail sample (https://github.com/xamarin/xamarin-forms-samples/tree/master/Navigation/MasterDetailPage) to show what I mean, see solution zip file.

Compile and start it on iOS device, press the button on the first page to open a sub page, and you should see doubled menu items (actually one which is drawn twice), so there are two rows of secondary menu items visible instead of just one.
The two rows are identical, both rows (and their menu items) react when tapping.

If you select the Reminder page through the Hamburger menu, the secondary menu is fine (even on iOS), as the page is not pushed on the navigation stack but switched.

Some interesting parts:

ContactsPage.xaml.cs:
SwitchToDetailPageAndPushOnNavStack()

ReminderPage.xaml:
<ContentPage.ToolbarItems> <ToolbarItem Text="Do something" Clicked="OnDoSomethingClicked" Order="Secondary" /> </ContentPage.ToolbarItems>

What can I do to get rid of this weird effect on iOS?

jgoldberger - MSFT jgoldberger - MSFT · Accepted Answer · 2017-03-09T02:36:45

It looks like you are adding a new NavigationPage which seems to be causing the issue. You block the extra nav bar with: NavigationPage.SetHasNavigationBar(newPage, false); but still the added toolbar item is getting added twice.

If instead you do the usual way of pushing a page, then this issue disappears. E.g. in ContactsPage.xaml.cs file, change:

private void OnOpenSubPageClicked(object sender, EventArgs args)
{
    Device.BeginInvokeOnMainThread(() =>
    {
           MainPage mainPage = App.Instance.MainPage as MainPage;
           if (null != mainPage)
                mainPage.SwitchToDetailPageAndPushOnNavStack(mainPage.MasterPage.RemindersPageItem);
    })
}

to:

private async void OnOpenSubPageClicked(object sender, EventArgs args)
{
      await Navigation.PushAsync(new ReminderPage());
}

That seems to work as expected.

Xamarin Forms MasterDetailPage - Secondary menu drawn twice on iOS

2 Answers