Is it possible to dynamically change the color of the navigation bar?

Hey guys,

I'm trying to implement a theme feature in my app and did a bit of searching here + around Google looking for a way to (dynamically) change the color of the navigation bar multiple times by binding but did not have much success. I am currently pushing a new navigation page with the new color, however, I was hoping to implement a more elegant solution. If anything is unclear please let me know. Thank you!

Tagged:

Posts

  • stvansolanostvansolano UMInsider, University ✭✭✭

    Hello Alex,

    That would be interesting :) Have you tried using (if possible) DataBinding?

  • AlexKohlerAlexKohler USMember

    I'm relatively new to C#, it does look like there is a binding property for the navigation bar (NavigationPage.BarBackgroundColorProperty), however, I'm not quite sure how I go about using it. :confounded:

  • ylemsoulylemsoul RUMember ✭✭✭
    public class App : Application
    {
        public App()
        {
            var navPage = new NavigationPage(new Page());
            navPage.BindingContext = new { BarColor = Color.Blue };
            navPage.SetBinding(NavigationPage.BarBackgroundColorProperty, new Binding("BarColor"));
    
            this.MainPage = navPage;
        }
    }
    
  • batmacibatmaci DEMember ✭✭✭✭✭

    @ylemsoul said:
    public class App : Application
    {
    public App()
    {
    var navPage = new NavigationPage(new Page());
    navPage.BindingContext = new { BarColor = Color.Blue };
    navPage.SetBinding(NavigationPage.BarBackgroundColorProperty, new Binding("BarColor"));

    this.MainPage = navPage;
    }
    }

    this changes only single page. what we need is to change for all pages.

  • batmacibatmaci DEMember ✭✭✭✭✭

    I love it. it works perfectly fine. just using as in app.xaml

         <Style TargetType="NavigationPage">
                    <Setter Property="BarBackgroundColor" Value="{DynamicResource backgroundColor}"  />
                    <Setter Property="BarTextColor" Value="White"/>
                </Style>
    
  • TowfiqueTowfique Member ✭✭
    edited November 2018

    @batmaci Hi, I am working on themeing my App. My current code is written like below to change the BarBackgroundColor (MasterDetailPage), but somehow it is not working.I am using App.xaml,

    <Style x:Key="navigationBarStyle" TargetType="NavigationPage">
                    <Setter Property="BarBackgroundColor" Value="{DynamicResource backgroundColor}" />
                    <Setter Property="BarTextColor" Value="{DynamicResource barTextColor}" />
                </Style>
    

    this.SetDynamicResource(NavigationPage.StyleProperty, "navigationBarStyle");
    App.Current.Resources["barBackgroundColor"] = Color.Red;

  • mac121mac121 Member ✭✭✭
    edited January 31

    App.Current.Resources["barBackgroundColor"] = Color.Red;

    @Towfique, in the last line, you can't assign Color.Red as a value for App.Current.Resources["barBackgroundColor"] as Color.Red returns the type Color and not ResourceDictionary

    Check out this simplified example

    App.xaml

            <?xml version="1.0" encoding="utf-8"?>
    <Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyApp.App">
                <Application.Resources>
                    <!-- Application resource dictionary -->
                    <ResourceDictionary>
                        <Color x:Key="navbarwhitecolor">#FFFFFF</Color> <!--White color -->
                        <Color x:Key="navbardarkcolor">#191919</Color> <!--Black color -->
                        <Style ApplyToDerivedTypes="true" TargetType="NavigationPage"> <!--ApplyToDerivedTypes means for all content pages -->
                            <Setter Property="BarBackgroundColor" Value="{DynamicResource Key=navbarcolor}"/>
                        </Style>
                    </ResourceDictionary>
                </Application.Resources>
            </Application>
    

    App.xaml.cs

    //Assign the keys navbardarkcolor and navbarwhitecolor to to key "navbarcolor" (RHS) anywhere in code-behind
    App.Current.Resources["navbarcolor"] = App.Current.Resources["navbardarkcolor"];
    App.Current.Resources["navbarcolor"] = App.Current.Resources["navbarwhitecolor"];

Sign In or Register to comment.