wake-up-neo.com

Wie kann ich die Tabbar- und Navigationsleistenfarbe in Xamarin-Formularen ändern?

Ich habe eine Xamarin Forms-Anwendung und arbeite derzeit an Code für ein iOS. In meinen Einstellungen habe ich eine Option zum Ändern des Designs der Anwendung (Dunkel und Hell). Dies ändert im Wesentlichen nur die Hintergrund- und Textfarben der Seiten. Nun möchte ich in der Lage sein, SelectedImageTintColor und BarTintColor von TabBar sowie BarTintColor und TintColor von NavigationBar zu ändern. Im Moment habe ich einen Renderer für die Registerseite erstellt: 

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

Im Moment werden diese Farben erst beim ersten Start der Anwendung wirksam. 

 enter image description here

Ich habe dieses Problem untersucht, konnte aber keine Antwort auf die Lösung dieses Problems finden. 

Ich weiß, dass Xamarin viele Änderungen vorgenommen hat. Ich würde gerne wissen, ob es Entwicklungen in der jüngsten Vergangenheit oder neue Wege gibt, um dieses Problem anzugehen. Ich bin offen für mögliche Vorschläge, da die Farben dieser Farben geändert werden müssen.

Bearbeitungen: 

Meine Tabbed-Seite wurde wie folgt erstellt: 

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

Wenn ich beispielsweise das dunkle Design wähle, wäre die Hintergrundfarbe TabBar und NavigationBar schwarz, das ausgewählte Bild der TabBar wäre orange und der Text der NavigationBar wäre weiß. Wenn ich das Light-Design wähle, wäre die Hintergrundfarbe TabBar und NavigationBar weiß, das ausgewählte Bild der TabBar_ wäre grün und der Text der NavigationBar_ wäre schwarz.

xamarinxamarin.iosxamarin.forms
14
user6742877

Ich denke, das Problem ist, dass Sie nicht auf die Änderung des Themas achten und damit umgehen. Sie setzen die Farben in OnElementChanged, das beim Ändern des Designs nicht erneut aufgerufen wird. 

Sie können eine Eigenschaft erstellen, die ein Ereignis auslöst, das Sie in Ihrem benutzerdefinierten Renderer abonnieren. Wenn Sie beispielsweise die Eigenschaft in Ihrer App-Klasse erstellen, können Sie in Ihrem benutzerdefinierten TabbedPage-Renderer Folgendes tun:

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

Da die Navigationsleiste stattdessen von der NavigationPage gesteuert wird, müssen Sie auch dort auf die Eigenschaftsänderung achten. Glücklicherweise benötigen Sie keinen benutzerdefinierten Renderer, da Sie die Balken- und Textfarben mit den Forms-Eigenschaften ändern können. So können Sie eine Klasse erstellen, die von NavigationPage erbt, und das Ereignis abonnieren:

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

Ich habe ein Beispielprojekt erstellt, das all dies demonstriert, damit Sie es ausprobieren können :) 

8
jimmgarr

Sie können die Eigenschaft der Tableiste verwenden, um die Hintergrund- und Symbolfarbe bei Bedarf zu ändern. 

 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

wie bei der Navigation

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
1
KKRocks

Kennen Sie die "Dynamic Resource" -Funktion in Xamarin Forms?

Ich werde meinen Weg geben, es zu tun. Vielleicht nicht einfach, aber ich denke, es kann funktionieren.

Schritt 1: Legen Sie in app.xaml die folgenden Tasten und Standardsymbole fest

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

and

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

usw..

Schritt 2: Setzen Sie in Ihre Tabbed Seite wie

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

usw. für andere Seiten in TabbedPage

Schritt 3: Nun, wenn Sie die Einstellungen ändern, müssen Sie die Einstellungen jetzt ändern

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

und andere Icons hier.

Mit diesem Ansatz können Sie alle Symbole an einer Stelle ändern. Geben Sie mir Ihre Meinung dazu bekannt.

0
Avinash Ramireddy