Xamarin forms change background color of navigation bar

Question

I'm using Xamarin.Forms and trying to change the background color of the navigation bar on iOS.

I have a customized navigation bar class that inherits from NavigationPage, with a bindable property and constructor, which sets the color of the navigation bar. According to my understanding the navigation bar has a default background (black) on top of it Xamarin.Forms navigation background. I'm able to set the background color with the SetColor() method (see below). However, it leaves a black line, which is the background of the navigation bar (iOS) as shown in the pic. Picture Link

Now, I'm trying to set the iOS navigation bar background color to white or transparent. Ive spent a lot of time but nothing worked. Could someone assist how to set the background to white.

//PCL class
public class CustomNavigationalPage : NavigationPage
{
    public  static readonly BindableProperty BarBgColorProperty = 
        BindableProperty.
        Create<CustomNavigationalPage, UIColor>  
            (p => p.BarBackgroundColorR, null);

    public UIColor BarBackgroundColorR
    {
        get { return (UIColor)base.GetValue (BarBgColorProperty); }
        set { base.SetValue (BarBgColorProperty, value); }
    }

    public NavigationalPageCustomized() : base()
    {
        SetColor();
    }

    void SetColor()
    {
        BarBackgroundColor = Color.Transparent; 
        BarTextColor = Color.Blue;
    }
}

Navigation bar renderer class:

[assembly: ExportRenderer (typeof (CustomNavigationalPage), typeof (CustomNavigationPageRenderer))]

 namespace project.iOS
 {
     public class CustomNavigationPageRenderer : NavigationRenderer
     {
         public CustomNavigationPageRenderer()
         {
             // UINavigationBar.Appearance.SetBackgroundImage (UIImage.FromFile ("navbg.png"), UIBarMetrics.Default);
         }

         protected override void OnElementChanged (VisualElementChangedEventArgs args)
         {
             base.OnElementChanged (args);

             var nb = (NavigationalPageCustomized) Element;

             if (nb != null) 
             { 
                 nb.BarBackgroundColorR = UIColor.White;
             }
         }
     }
  }

Answer 1

Try this code in your PCL of Xamarin.forms. Change below code in the constructor of App.xaml.cs.

public App()
{
    MainPage = new NavigationPage(new Page1())
    {
        BarBackgroundColor = Color.Gray
    };
}

Answer 2

You can set this in your global App.xaml file

<Style TargetType="NavigationPage">
       <Setter Property="BarBackgroundColor" Value="Blue"/>
       <Setter Property="BarTextColor" Value="White"/>
</Style>

Change to your own colors

Answer 3

Try the following code. Good Luck

[assembly: ExportRenderer (typeof (CustomNavigationalPage), typeof (CustomNavigationPageRenderer))]

namespace project.iOS
{
  public class CustomNavigationPageRenderer : NavigationRenderer
  {
      public CustomNavigationPageRenderer()
      {

      }
      public override void ViewDidLoad ()
      {
          base.ViewDidLoad ();
          //Background image
          this.NavigationBar.BarTintColor = UIColor.FromPatternImage (UIImage.FromFile ("AnyResourceImage.png"));
          //Your desire color
          this.NavigationBar.BarTintColor = UIColor.Red; 
          //Right item color
          this.NavigationBar.TopItem.RightBarButtonItem.TintColor = UIColor.FromPatternImage (UIImage.FromFile ("AnyResourceImage.png"));
          //Left item color
          this.NavigationBar.TopItem.LeftBarButtonItem.TintColor = UIColor.Black;
      }
   }
}

//Note : Please remove any background color you set in forms shared or pcl project. Hint in this class > CustomNavigationalPage

Answer 4

This used to require a custom renderer, but no longer does in XF 1.3. NavigationPage now has BarBackgroundColor and BarTextColor properties, which seem to work well. Unfortunately, there is no ability to change the font though without a custom renderer (that I have found).