Search code examples
xamarin.formscross-platformnavbarbackground-color

How to change NavBar colour of MasterMainPage in Xamarin


I'm building a Xamarin cross-platform App!

The problem is I want to change the colour of NavigationBar of MainPage which is MasterPage with a drawer menu in it.

I tried with this code to change the colour but an extra bar appears on NavBar which I don't Want to.

App.xaml.cs:

  MainPage = new NavigationPage(new MainPage())

        {
            BarBackgroundColor = Color.FromHex("#00477f"),
            BarTextColor = Color.White,
        };

ScreenShots: These Screenshots shows what the problem I'm facing!

https://i.sstatic.net/fbXie.png

https://i.sstatic.net/vuA1A.png


Solution

  • Here, when you assign App.xaml's MainPage, a NavigationPage, it shows it's own NavigationBar. Under the hood, your MasterDetailPage also shows the NavigationBar. Thus, you are viewing two NavigationBars.

    Go to your MainPage.xaml.cs backend page and in the Constructor, write the line:

    NavigationPage.SetHasNavigationBar(this, false);
    

    Thus, your MainPage.xaml.cs should look like :

    public MainPage()
    {
        NavigationPage.SetHasNavigationBar(this, false);
        InitializeComponent();
        ......
    }
    

    This will hide the NavigationBar of MasterDetailPage.