How to get navigation bar background color? - xamarin.forms

Question

In my Xamarin.Forms app, I want my Grid background color to be the same as the Navigation Bar's background color, something like this:
BackgroundColor="{StaticResource BarBackgroundColor}"
How can I do this?

Answer 1

You can retrieve the color of your navbar by casting your current page to a navigation page. Then you can simply change the color of your grid with that retrieved color. On the OnAppearing override of your page, use the following code to obtain your nav bar color:
protected override void OnAppearing()
{
var navPage = Application.Current.MainPage as NavigationPage;
if (navPage != null)
{
var barColor = navPage.BarBackgroundColor;
}
base.OnAppearing();
}
Or, as someone mentioned earlier, you can predefine your colors in App.xaml and then simple use it from there.
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="Blue"/>
<Setter Property="BarTextColor" Value="White"/>
</Style>

Answer 2

The BarBackgroundProperty is an attached property from NavigationPage. Be aware that it can change on every page you push to your NavigationPage.
Supposing you have an App.Current.MainPage set like this:
Page main = new MainPage();
Page navigation = new NavigationPage(main)
{
BarBackgroundColor = Color.Red,
BarTextColor = Color.Yellow
};
The navigation page is the one that owns the BarBackgroundColor property. So if you want to retrieve it, you should get it from there. I can't see how you can get this through a StaticResource.
I guess you can achieve this through a property on your viewmodel. For example:
public class MyViewModel
{
...
public Color BarBackgroundColor
{
get
{
return ((NavigationPage)App.Current.MainPage)?.BarBackgroundColor;
}
}
...
}
And to use it on your XAML (Once MyViewModel {or some inheritance of it} is the BindingContext or your page):
BackgroundColor="{Binding BarBackgroundColor}"
I hope it helps.

Answer 3

You may use global style by placing the code below into App.xaml
<Application.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#1A237E</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="BarTextColor" Value="White" />
</Style>
<Style TargetType="Grid">
<Setter Property="BackgroundColor" Value="{StaticResource NavigationPrimary}" />
</Style>
</ResourceDictionary>
</Application.Resources>