How to show navigation page button on all views Xamarin Forms

2
votes

I am working with Xamarin Forms and I am using MasterDetailPage and NavigationPage and everything is working. Now, I need to configure the page button (three bars on the left) to be visible on all views.

I have a MasterDetailPage with a menu and the user clicks a menu its navigate to other pages. First page (homepage) look like that:

<MasterDetailPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <home:HomePage />
        </x:Arguments>
    </NavigationPage>
</MasterDetailPage.Detail>

enter image description here

When the user clicks in menu inside masterdetailpage or other menus outside masterdetailpage it performs a navigation:

enter image description here

The three bars page button is visible only on the first view, when I navigate to others views, that button disapears.

But, I want something like that:

enter image description here

The page back button showns automatically when i navigate to other pages and it's fine.

How to let the three bars page button visible to all views and maintain the back page button?

I am using the following code to navigate between views:

await Navigation.PushAsync(MyNewPage());

Thanks!

3
xamlxamarinxamarin.forms

3 Answers

1
votes

Your master detail page has to handle the navigation to the detail pages for it to work correctly.

Connect the menu listview:

  • ListView.ItemSelected += OnItemSelected;

In the OnItemSelected event.

  • {MasterDetailPage}.Detail.Navigation.PushAsync(new MyNewPage());

Here is an example of master detail navigation:

    async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as MasterPageItem;

        if (item != null)
        {                
            NavigationPage nextDetailPage = null;
            await Task.Run(() =>
            {                    
                nextDetailPage = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));                   
            });
            Detail = nextDetailPage;
            masterPage.ListView.SelectedItem = null;
            IsPresented = false;                
        }
    }
1
votes

This is not possible, as you can't have two buttons on the left side. And as many applications I have seen, no app supports this kind of UI. Unless you write custom navigation bar and put it on top of every page.

You can create a stack of detail pages in your main MasterDetailPage. So whenever you want to push a new page, instead you can just set page as Detail and put old Detail in your own stack.

For Android you can wrap back button event to pop page from stack, but on iOS there is no back button, so you will have to create some sort of back button in detail page's toolbar.

1
votes

I think that you will have to write a Custom Renderer to achieve what you want. But if you want only to keep the hamburger button, without the back button, you can navigate to your pages using this code:

Detail = new NavigationPage(new MyNewPage());