title: Xamarin forms change background color of navigation bar
body: <p>I'm using Xamarin.Forms and trying to change the background color of the navigation bar on iOS.</p>
  
  <p>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. <a href="http://s13.postimg.org/nei0pbjs7/nav.png" rel="nofollow">Picture Link</a>   </p>
  
  <p>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.</p>
  
  <pre><code>//PCL class
  public class CustomNavigationalPage : NavigationPage
  {
      public  static readonly BindableProperty BarBgColorProperty = 
          BindableProperty.
          Create&lt;CustomNavigationalPage, UIColor&gt;  
              (p =&gt; 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;
      }
  }
  </code></pre>
  
  <p>Navigation bar renderer class:</p>
  
  <pre><code>[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;
               }
           }
       }
    }
  </code></pre>