Xamarin Forms controls title bar color / title

Question

I have the following form created using Xamarin Forms. I drew a red rectangle to highlight the problem area. I need a blue color in the title so that it is a different color and shows the name.

This is what I'm trying to bring closer. Please ignore the back arrow and the fact that the hamburger menu is on the right (by the way, maybe MasterDetail has a hamburger on the right and left?).

The following code is used to create this code. I embed my MainPage (which has a ListView) in the NavigationPage. Then I set the Detail of MasterDetailPage page to the aforementioned NavigationPage. Setting the BackgroundColor property here does not work. Note that the Title property also does not work.

How to change the color and title of the title bar 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 BarBackgroundColor to NavigationPage . You can do something like this (in the most basic 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 ContentPage title provided by NavigationPage is what displays the title on this bar.

Answer 2

If you want to use the same color for all NavigationPage elements, you can make it simpler. Add Global Style to NavigationPage App

 <?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