Changing the navigationbar backgroundcolor

Question

I have used a couple of hours looking into this and just can't. Change the background color of the navigation bar (and also the hamburguer button). I'm using the default hello world sample (from VS2019) with a FlyoutItem and MenuItem (for sidebar and bottom bar at same time)

Tried:

var mdPage = Application.Current.MainPage as MasterDetailPage;
var navPage = mdPage.Detail as NavigationPage;
navPage.BarBackgroundColor = Color.Red;

Also:

((NavigationPage)Application.Current.MainPage).BarBackgroundColor = Color.White;
((NavigationPage)Application.Current.MainPage).BarTextColor = Color.OrangeRed;

And:

BarBackgroundColor = Color.FromHex("#ff5300"),
BarTextColor = Color.White,

And finally:

<Style TargetType="NavigationPage">
      <Setter Property="BarBackgroundColor" Value="DeepPink"></Setter>
      <Setter Property="BarTextColor" Value="Violet"></Setter>
</Style>

All those solutions are from 2018 and 2020 posts forums

The only thing that works for me is to change the Style from the colorPrimary (on Android), but is not a solution for me becase that color is for many stuff

Would be nice to put a Style/Setter on AppShell.xaml or App.xaml (and not on every Page). Else, a C# code in some global point or every Page but it must take the color from some Style, so if needed, then only change one line of code on the Style and not every Page

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Please change value of Primary in the App.xaml

   <Color x:Key="Primary">#FF96F3</Color>  

==========================
Updated=========================

You can change the value of Shell.BackgroundColor in the BaseStyle like following screenshot.

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Thanks. Finally I opt for Syncfusion controls 👍🏻