如何更改 Xamarin 表单中的 TabBar 和 NavigationBar 颜色？

Question

我有一个Xamarin Forms 应用程序，我目前正在编写iOS 代码。在我的设置中，我可以选择更改应用程序的主题（深色和浅色）。这基本上只是改变了页面的背景颜色和文本颜色。现在我想要做的是能够更改TabBar 的SelectedImageTintColor 和BarTintColor 以及NavigationBar 的BarTintColor 和TintColor。目前我已经为标签页创建了一个渲染器：

protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
   base.OnElementChanged(e);
   App.theme = (Theme)App.DB.GetIntSetting("ThemeColor");
   switch (App.theme)
   {
      case Theme.Dark:
      {
         TabBar.SelectedImageTintColor = UIColor.FromRGB(255, 165, 0);
         TabBar.BarTintColor = UIColor.Black;
         break;
      }
      case Theme.Light:
      {
         TabBar.SelectedImageTintColor = UIColor.FromRGB(60, 132, 60);
         TabBar.BarTintColor = UIColor.White;
         break;
      }
   }
}

目前这些颜色只会在您首次启动应用程序时生效。

我研究了这个问题，但找不到任何人关于如何解决这个问题的答案。

我知道 Xamarin 发生了很多变化，因此我想了解是否有任何最近的发展或新的方法来解决这个问题。我愿意研究任何可能的建议，因为应用程序要求的一部分是能够更改这些颜色。

编辑：

我的Tabbed 页面创建如下：

public partial class MainPage : TabbedPage
{
   public MainPage()
   {
      InitializeComponent();
      var phrasesPage = new NavigationPage(new PhrasesPage())
      {
         Title = "Play",
         Icon = "play1.png"
      };
      var settingsPage = new NavigationPage(new SettingsPage())
      {
         Title = "Settings",
         Icon = "settings.png"
      };
      // other declarations here

      Children.Add(phrasesPage);
      Children.Add(settingsPage);
      // and more
   }
}

例如，如果我选择深色主题，则 TabBar 和 NavigationBar 背景颜色将为黑色，TabBar 的选定图像将为橙色，NavigationBar 的文本将为白色。同样，如果我选择 Light 主题，则 TabBar 和 NavigationBar 背景颜色将为白色，TabBar 的选定图像将为绿色，NavigationBar 的文本将为黑色。

Answer 1

我认为问题在于您没有倾听和处理主题变化。您在 OnElementChanged 中设置颜色，当您更改主题时不会再次调用它。

您可以创建一个属性来触发您在自定义渲染器中订阅的事件。例如，如果您在 App 类中创建属性，那么您可以在自定义 TabbedPage 渲染器中执行以下操作：

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

    if(e.OldElement != null)
    {
        App.Current.PropertyChanged -= Current_PropertyChanged;
        return;
    }

    App.Current.PropertyChanged += Current_PropertyChanged; //subscribe to the App class' built in property changed event
    UpdateTheme();
}

void Current_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
    if(e.PropertyName == "DarkTheme")
    {
        UpdateTheme();
    }
}

由于导航栏是由 NavigationPage 控制的，因此您也必须在那里监听属性更改。幸运的是，您不需要自定义渲染器，因为您可以使用 Forms 属性更改栏和文本颜色。所以你可以创建一个继承自 NavigationPage 的类并订阅事件：

public class CustomNavigationPage : NavigationPage
{
    public CustomNavigationPage(Page root) : base(root)
    {
        if(Device.OS == TargetPlatform.iOS)
        {
            App.Current.PropertyChanged += Current_PropertyChanged;
        }
    }
}

我创建了 a sample project 来演示所有这些，因此您可以查看：)

Answer 2

您可以在需要时使用标签栏的属性来更改背景和图标颜色。

 TabBar.TintColor = UIColor.White; // changer as per your need for tab icon's color
TabBar.BarTintColor = UIColor.Black; // changer as per your need for tabbar's backgroungcolor 

与导航相同

this.NavigationController.NavigationBar.TintColor = UIColor.White;//change as per your need for tab icon color

this.NavigationController.NavigationBar.BarTintColor = UIColor.Black;// changer as per your need for Navbar' backgroungcolor 

Answer 3

您知道 Xamarin Forms 中的“动态资源”功能吗？

我会给出我的方法。可能并不容易，但我认为它可以工作。

第 1 步：在 app.xaml 中设置键和默认图标，如下所示

<FileImageSource x:Key="PlayIconKey">playdark.png</FileImageSource>
<FileImageSource x:Key="AboutIconKey">aboutdark.png</FileImageSource>

and

<Image Source="{ DynamicResource PlayIconKey }" />
<Image Source="{ DynamicResource AboutIconKey}" />

等等。

第 2 步：在您的标签页中设置类似

var phrasesPage = new NavigationPage(new PhrasesPage())
{
 Title = "Play",
 Icon = Application.Current.Resources["PlayIconKey"]
};

TabbedPage 中的其他页面以此类推

第 3 步：现在当您更改设置时，只需设置

Application.Current.Resources["PlayIconKey"] = "playlight.png" 

还有其他图标。

通过这种方法，您可以在一个地方更改所有图标。 让我知道您对此的看法。