CODEWITHSUNDEEP
c#xamarin.forms
vyeluri5
vyeluri5

Reputation: 487

Xamarin forms change background color of navigation bar

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;
             }
         }
     }
  }

Upvotes: 8

Views: 25581

Answers (6)

Dara Oladapo
Dara Oladapo

Reputation: 596

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

Upvotes: 8

Kevin Silva
Kevin Silva

Reputation: 23

For me this worked beautifully:

(App.Current.MainPage as NavigationPage).BarBackgroundColor = Color.FromHex("#4388CC");

I've puted this code in the constructor of the page's ViewModel.

Hope this works for you too.

Upvotes: 0

Prabhat Maurya
Prabhat Maurya

Reputation: 1088

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
    };
}

Upvotes: 13

Lokesh G
Lokesh G

Reputation: 881

NavigationController.NavigationBar.TitleTextAttributes = new UIStringAttributes() { ForegroundColor = UIColor.White };

Upvotes: -1

Mohammad Riyaz
Mohammad Riyaz

Reputation: 1544

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

Upvotes: 4

Barry Sohl
Barry Sohl

Reputation: 849

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).

Upvotes: 2

Related Questions