How to remove navigation bar for Navigation page in Xamarin Forms.

Hello All, I hope you are all doing well and good.

In this post I will gonna be explaining about how to hide/invisible the navigation bar in Navigation page.

First of all, what is Navigation bar?

• On iOS, a navigation bar is present at the top of the page that displays a title, and that has a Back button that returns to the previous page.
• On Android, a navigation bar is present at the top of the page that displays a title, an icon, and a Back button that returns to the previous page.
• On the Universal Windows Platform, a navigation bar is present at the top of the page that displays a title.

The navigation bar appears in different platforms as shown in below

How to remove Navigation Bar in XAML?

If we want to remove navigation bar from XAML itself, we have to use the below property. NavigationPage.HasNavigationBar="false"

Following is code snippet that shows how to use “NavigationPage.HasNavigationBar” in a Content page.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:NavigationDemo"

             x:Class="NavigationDemo.MainPage"

             NavigationPage.HasNavigationBar="false">

    <StackLayout>

        <!-- Place new controls here -->

            <Label Text="Welcome to Xamarin.Forms!"

           HorizontalOptions="Center"

           VerticalOptions="CenterAndExpand" />

    </StackLayout>

</ContentPage>

How to remove Navigation Bar in Code behind?

If we want to remove navigation bar from code behind, we have to invoke below specified line of code from constructor of the page class.

NavigationPage.SetHasNavigationBar(this, false);

Following is the code snippet that shows you how to use it in code behind.

using Xamarin.Forms;

namespace NavigationDemo

{

    public partial class MainPage : ContentPage

            {

                        public MainPage()

                        {

                                    InitializeComponent();

                                    NavigationPage.SetHasNavigationBar(this, false);

                        }

            }

}

I hope you have enjoyed reading this article, please comment me if you have any doubts.