Xamarin Forms如何更改导航栏的背景颜色

Question

我正在使用Xamarin.Forms并尝试更改iOS导航栏的背景颜色。我有一个自定义导航栏类，它继承自NavigationPage，并具有可绑定属性和构造函数，在其中设置了导航栏的颜色。根据我的理解，导航栏在Xamarin.Forms导航背景上有一个默认的背景（黑色）。我可以通过SetColor()方法来设置背景颜色（见下文）。但是，它留下了一条黑线，这是导航栏（iOS）的背景，如下图所示：图片链接 现在，我正试图将iOS导航栏背景颜色设置为白色或透明。我已经花了很多时间，但没有任何效果。请问如何将背景设置为白色？

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

导航栏渲染器类：

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

- vyeluri5

Answer 1

尝试在您的Xamarin.forms的PCL中使用此代码。将以下代码更改为 App.xaml.cs 构造函数。

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

- Prabhat Maurya

Answer 2

您可以在全局的App.xaml文件中进行设置。

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

更改为您自己的颜色

- Dara Oladapo

Answer 3

尝试使用以下代码。祝你好运。

[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

- Mohammad Riyaz

---

背景图片和按钮颜色设置对我来说是有效的，但是背景颜色或栏渐变颜色仍然会留下一条线，就像这张图片中所示：img。我正在尝试获得类似Skype iPhone应用程序的背景颜色，就像这样：this。 - vyeluri5

我认为这是一个底部的边框线。我不太确定如何去除它。 - vyeluri5

Answer 4

在XF 1.3中，这个过程以前需要一个自定义渲染器，但现在不再需要了。NavigationPage现在具有BarBackgroundColor和BarTextColor属性，这些属性似乎工作得很好。不幸的是，我没有找到任何方法可以更改字体，除非使用自定义渲染器。

- Barry Sohl

---

我在帖子中提到了我可以设置导航栏颜色，并在图片中展示。问题是iOS有自己的背景颜色（默认为黑色）。我正在尝试将此颜色设置为白色，以便不会像图片中那样留下任何线条。 - vyeluri5

Answer 5

对我来说，这个方法非常有效：

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

我已将此代码放置在页面 ViewModel 的构造函数中。

希望这对您也有用。

- Kevin Silva

Answer 6

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

导航控制器.导航栏.标题文本属性 = 新的UIStringAttributes() { 前景色 = UIColor.White };

- Lokesh G