How To Remove Navigation Bar For Navigation Page In Xamarin.Forms

Hello all, I hope you are all doing well.

In this post I will explain about how to hide/make 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 the 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 the 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 if you have any doubts.