Hamburger menu and Bottom bar navigation in same Main/Master page

Hi all,
I am new in xamarin forms. i am trying to develop a app which has hamburger menu and bottom bar navigation on landing page of apps. I can add hamburger menu but didn't add Bottom bar navigation on the same page. how can i add both of this in Mainpage or another Master page.
Thanks

Answers

  • BillyLiuBillyLiu Member, Xamarin Team Xamurai

    @baruasgrps

    i am trying to develop a app which has hamburger menu and bottom bar navigation on landing page of apps.

    I'm afraid it's impossible. You could try to add the bottom navigation bar in its Detail page.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Not sure why that would be impossible.
    Define a page footer with whatever controls you like and put that in a ControlTemplate. Use that template for all your pages.

    Of course I could be missing something in the translation to English of your post. maybe you could draw out what you want so we can all visualize it.

  • baruasgrpsbaruasgrps Member ✭✭

    i want to do design my app like this. i attach a screen shot. Is this possible.

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    edited November 2018
    As @ClintStLaurent says, Yes this should be possible. We have created our own bottom tab control and also used the rg.popups plugin to do a hamburger menu (in different projects).

    Personally I wouldn't us MasterDetail to get the hamburger menu. In my experience MasterDetail introduces side effects and subtly different behaviours on iOS.

    To show the hamburger menu at the top you will need to hide the navigation bar and create your own navigation control to display in its place. From memory you hide the navigation bar in the xaml.cs file with

    Xamarin.Forms.NavigationPage.SetHasNaqvigationBar(this, false);
  • baruasgrpsbaruasgrps Member ✭✭

    @JamesLavery , can you give a code simple for that. It will be helpful for me to understand. thanks for reply.

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    @baruasgrps - I've created a sample project which shows one way to do this.

    The README from the project is reproduced below.

    BottomTabBarDemo

    Overview

    This is a demonstration project to show how we can create a bottom navigation bar and a burger menu in a Xamarin.Forms application.

    Important note This is my approach to the problem. Bear in mind that there is always more than one way to do it.

    Tools And Libraries Used

    • FreshMvvm - for a quick and easy MVVM implementation.

      • PropertyChanged.Fody - used by FreshMvvm
    • Rg.Plugins.Popup - for the sliding menu

    Displaying The Bottom Tab Bar

    This is built up from the following components.

    BottomTabItem

    This is a custom ContentView with:

    • Caption
    • Icon
    • Different background colour depending on whether it is selected or not
    • A gesture recogniser for tapping it

    The above are bindable - a notable binding is that the tap can be bound to a Command in the PageModel.

    BottomTabControl

    This is a simple XAML-styled control, which just lays out a set of BottomTabItems and sets up their bindings.

    Changing The UI When Tabs Are Tapped

    I've used a simple XAML layout for my MainPage, with StackLayouts whose IsVisible properties are bound to ViewModel Selected properties which were bound to the BottomTabItem.

    Note That we could have sub-views etc. which are defined in separate files, but here I'm keeping it simple.

    Menu Handling

    Displaying The Menu Icon

    This is easily done using the Xamarin.Forms NavigationPage.TitleView.

    Displaying The Menu

    I've used Rg.Plugins.Popup to display the menu.

    The advantage of this is that the MenuPage is just another page with its own PageModel under MVVM - so we can still use MVVM principals to drive it.

    One slight disadvantage of Rg.Plugins.Popup is that the PageModel-Page binding isn't set up automatically under FreshMvvm, so we have to get a reference to the PageModel from the XAML code behind, in order to execute the associated Command.

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    Forgot to add screenshots.

    Main Page

    Menu - the menu styling is very basic.

    About Page - navigated to from the menu.

  • baruasgrpsbaruasgrps Member ✭✭

    @JamesLavery. thanks you for reply. are you using same master page for bottom top page and top hamburger menu.

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    Yes. If you open the project from GitHub you will see how it works.
Sign In or Register to comment.