Xamarin Forms control the color/title of the header bar

Question

I have the following form created with Xamarin Forms. I have drawn in a red rectangle to highlight the problem area. I need the blue color in the header to be a different color and show a title.

Here is what I am trying to approximate. Please ignore the back arrow and the fact the hamburger menu is on the right (btw, can a MasterDetail have the hamburger on the right vs. left?).

The following code is what I am using to create this. I am embedding my MainPage (which has the ListView) in a NavigationPage. Then I set the Detail page of a MasterDetailPage to the aforementioned NavigationPage. Setting the BackgroundColor property here isn't working. Notice the Title property isn't working either.

How can I change the color and title of the header's background?

        var navPage = new NavigationPage(new MainPage());

        App.Current.MainPage = new MasterDetailPage
        {
            BackgroundColor = Color.FromHex("#174873"),
            Title = "MY DRIVES",
            Master = new MenuPage()
            {
                Title = "Master Page Title"
            },
            Detail = navPage
        };

Answer 1

Set the BarBackgroundColor of the NavigationPage. You can do something like this (in the most basic example sense):

        var nav = new NavigationPage
        {
            Title = "Detail"
        };
        nav.PushAsync(new ContentPage() { Title = "Home" });
        nav.BarBackgroundColor = Color.MediumPurple;

        var mdp = new MasterDetailPage()
        {
            Master = new ContentPage()
            {
                Title = "Master"
            },
            Detail = nav
        };
        MainPage = mdp;

The title of the ContentPage being presented by the NavigationPage is what will show the title on that bar.

Answer 2

If you want to use one color for all NavigationPage elements you can do it easier. Add global style to app for a NavigationPage

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="My.App">
    <Application.Resources>
        <!-- Application resource dictionary -->
        <ResourceDictionary>
          <!-- Pallete -->     
          <Color x:Key="primary-back-title-color">#4a148c</Color>
          <Color x:Key="primary-title-color">#FFFFFF</Color>
          <!-- Pallete-end -->  
          <Style ApplyToDerivedTypes="true" TargetType="NavigationPage">
                <Setter Property="BarBackgroundColor" Value="{StaticResource Key=primary-back-title-color}"/>
                <Setter Property="BarTextColor" Value="{StaticResource Key=primary-title-color}"/>
          </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Now you can do:

        void OnTappedProfile(object sender, System.EventArgs e)
        {
            Navigation.PushAsync(new Profile());
        }

Where Profile is ContentPage

Answer 3

The BarBackgroundColor is a property of the NavigationPage class:

public App()
{
    MainPage = new NavigationPage(new Page1())
    {
        BarBackgroundColor = Color.FromHex("#ff5300"),
        BarTextColor = Color.White,
    }; 
}

Answer 4

Do not forget to add

ToolbarResource = Resource.Layout.Toolbar;

to MainActivity in Android project, I have lost few hours because of this.

Answer 5

If you're using App Shell, you can edit the pre-generated styles in AppShell.xaml, editing the Shell.BackgroundColor field:

<Style x:Key="BaseStyle" TargetType="Element">
    <Setter Property="Shell.BackgroundColor" Value="#000" />
    <Setter Property="Shell.ForegroundColor" Value="White" />
    <Setter Property="Shell.TitleColor" Value="White" />
    <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
    <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
    <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
    <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
    <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
    <Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>