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.

• FreshMvvm - for a quick and easy MVVM implementation.
  • PropertyChanged.Fody - used by FreshMvvm
• Rg.Plugins.Popup - for the sliding menu

This is built up from the following components.

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.

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

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.

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

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.