Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 75885

Master Detail Page - show hamburger menu and back button icon at the same time

$
0
0

We have received a design spec where a hamburger icon is meant to always be displayed, and a back button is to be displayed beneath the hamburger bar only when digging deeper into a navigation stack.

At first, we simply set the MasterDetailPage.Detail to a new NavigationPage(). This results in a hamburger button displaying initially and no back button (makes sense as there is nothing to navigate back to). As the navigation stack has items pushed onto it, the hamburger button is replaced with the back button navigation icon.

This got us wondering if it is even possible to have them displayed at the same time, so we experimented by nesting navigation pages and navigating from the second nested navigation page.

`
public App() {

        InitializeComponent();

        MasterDetailPage mdp = new MasterDetailPage();
        ContentPage mstr = new ContentPage();
        mstr.Title = "Master";
        mdp.Master = mstr;

        Button PushButton = new Button();

        var layout = new StackLayout();
        layout.Children.Add(PushButton);

        ContentPage cp = new ContentPage
        {
            Content = layout
        };

        NavigationPage nestedNavPage = new NavigationPage(cp);

        mdp.Detail = new NavigationPage(nestedNavPage); // nesting nav page experimentally

        MainPage = mdp;

        PushButton.Clicked += (s, e) =>
        {
            nestedNavPage.Navigation.PushAsync(new ContentPage());
            nestedNavPage.BarBackgroundColor = Color.Blue;
        };
 }`

This actually sort of works, except that initially there are TWO hamburger buttons displayed.

However, once clicking our PushButton, we do get the desired display with a hamburger icon and bar on top, and a back arrow icon and bar below it

Before we implemented MasterDetail pattern, we simply used a NavigationPage that contained a regular ContentPage. On startup, the header bar would be empty (no back icon), but the icon would show up when Pushing to the stack. That is essentially the behavior we want, but with that NavigationPage nested under the Hamburger icon bar.

Our experimental code feels hacky, and is obviously not quite right out of the box because two hamburger buttons show up. Does anyone have suggestions on how we might accomplish this design of having a back button and hamburger menu available at the same time?


Viewing all articles
Browse latest Browse all 75885

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>