How can I get navigationpage bar color back to default

I am new to Xamarin.form,please forgive me if it is a dumb question. thank you!

I am using NavigationPage to pushasync page to display different pages,
I have three buttons(green,blue,red) on the main page,
click each button will push a new page to navigation,
each page will change navigation bar background color to green,blue and red

It works fine, the only problem is that after I "Back" to the main page,
backgroundcolor or bar will be kept as the last page's color on stack.
Here is what I am using:

public static NavigationPage naviPage = new NavigationPage(new MainPage());
MainPage = naviPage;

greenButton.Clicked +=  async (sender, e) =>
    Navigation.PushAsync(new GreenPage());
    naviPage.BarBackgroundColor = Color.Green;
blueButton.Clicked +=  async (sender, e) =>
    Navigation.PushAsync(new BluePage());
    naviPage.BarBackgroundColor = Color.Blue;
redButton.Clicked +=  async (sender, e) =>
    Navigation.PushAsync(new RedPage());
    naviPage.BarBackgroundColor = Color.Red;

On fresh start, The navigation bar color will be default "White" on mainpage.
If I click green button and back from GreenPage, bar color will be green.
If I click blue button and back from GreenPage, bar color will be blue.

How can I set the bar color back to default "White"?

Thank you!


  • You can use the Appearing event on the MainPage to switch back to the default navigation bar color of "White". Here are changes made to make your code snippet work.

    var startPage = new MainPage (); naviPage = new NavigationPage(startPage); MainPage = naviPage; startPage.greenButton.Clicked += async (sender, e) => { await naviPage.PushAsync(new GreenPage()); naviPage.BarBackgroundColor = Color.Green; }; startPage.blueButton.Clicked += async (sender, e) => { await naviPage.PushAsync(new BluePage()); naviPage.BarBackgroundColor = Color.Blue; }; startPage.redButton.Clicked += async (sender, e) => { await naviPage.PushAsync(new RedPage()); naviPage.BarBackgroundColor = Color.Red; }; startPage.Appearing += async (sender, e) => { naviPage.BarBackgroundColor = Color.White; };

  • LearnCodeMobileLearnCodeMobile USMember ✭✭

    How do I get the default navigation bar color?
    Are there any different on Android and IOS?
    I can't just set it back to white? Cause I don't know the default color.

    Thank you!

  • LearnCodeMobileLearnCodeMobile USMember ✭✭

    I kept the naviPage.BarBackgroundColor as property of startPage
    then did
    startPage.Appearing += async (sender, e) =>
    naviPage.BarBackgroundColor = Color.White;

    Thank you very much!

Sign In or Register to comment.