Xamariin.Forms- Bottom NavigationBar

In this article you will learn how to Create a Bottom NavigationBar in Xamarin forms. 

Introduction

Managing the page navigation experience

Xamarin.Forms provides a number of different page navigation experiences, depending upon the Page type being used .More


Navigating between pages using tabs

The Xamarin.Forms TabbedPage consists of a list of tabs and a larger detail area, with each tab loading content into the detail area. This article demonstrates how to use a TabbedPage to navigate through a collection of pages.

Prerequisites

• Visual Studio 2017(Windows or Mac)

The steps given below are required to be followed in order to Create a Bottom NavigationBar in Xamarin.Forms, using Visual Studio.

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project.  you’ll learn more by going through the steps yourself.

Choose the Xamarin.Forms App Project type under Cross-platform/App in the New Project dialog.

Name your app, select “Use Portable Class Library” for shared code, and target both Android and iOS.

You probably want your project and solution to use the same name as your app. Put it in your preferred folder for projects and click Create.

You now have a basic Xamarin.Forms app. Click the play button to try it out.

Add Icons

Go to Solution—>PCL—>Right click—>Add Files

After added images Set BuildAction EmbddedResource

Setting up the User Interface. 

Go MainPage.Xaml and write following code.

MainPage.Xaml

In this step Write common Design For Bottom NavigationBar

App.Xaml

Now, Set the Icons for Bottom NavigationBar control.

MainPage.Xaml.cs

Adding a Tap Gesture Recognizer

The tap gesture is used for tap detection and is implemented with the TapGestureRecognizer class

In this Step Write Action for NavigationBar Control Using Tap Gesture Recognizer

MainPage.Xaml.cs

In this step, Set Default Backgroundcolor to all Tap Control.

MainPage.Xaml.cs.

Click the play button to try it out.

I hope you will understand how to Create a Bottom NavigationBar.

Summary

This was the process of how to Create a Bottom NavigationBar in Xamarin.Forms.

Thanks For Reading.

Please share comments and feedback.