Xamarin Forms Shell titlebar color not set correctly in dark theme

Question

I have a xamarin forms shell application. I set the titlebar color with this style:

<Color x:Key="BackgroundColorDark">#121212</Color>
<Color x:Key="BackgroundColorLight">#EFF2F5</Color>

<Color x:Key="TextPrimaryColor_Dark">#FFFFFF</Color>
<Color x:Key="TextPrimaryColor_Light">#323130</Color>

<Style x:Key="BaseStyle"
       TargetType="Element"
       ApplyToDerivedTypes="True">
    <Setter Property="Shell.BackgroundColor"
            Value="{AppThemeBinding Dark={StaticResource BackgroundColorDark}, Light={StaticResource BackgroundColorLight}}" />
    <Setter Property="Shell.ForegroundColor"
            Value="{AppThemeBinding Dark={StaticResource TextPrimaryColor_Dark}, Light={StaticResource TextPrimaryColor_Light}}" />
    <Setter Property="Shell.DisabledColor"
            Value="#B4000000" />
    <Setter Property="Shell.UnselectedColor"
            Value="#CC0000" />
    <Setter Property="Shell.NavBarHasShadow"
            Value="false"/>
</Style>

In light theme this works as expected and it is the same as the background:

But in dark theme it seems the title bar has a different color:

Since it looks as if the title bar is translucent I tried to explicitly deactivate that with the ios specific setting on the navigation page but that didn't work.

ios:NavigationPage.IsNavigationBarTranslucent="true"

How can I apply the background color in dark theme correctly?

Xamarin Forms Version: 4.8.0.1269 Source Code Repository: https://github.com/NPadrutt/MoneyFox.Windows/tree/mobile-redesign

Jack Hua Jack Hua · Accepted Answer · 2020-08-21T05:38:48

In the iOS.project, you can set UINavigationBar.Appearance.Translucent = false; in FinishedLaunching method to remove the default alpha.

public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
    //
    // This method is invoked when the application has loaded and is ready to run. In this 
    // method you should instantiate the window, load the UI into it and then make the window
    // visible.
    //
    // You have 17 seconds to return from this method, or iOS will terminate your application.
    //
    public override bool FinishedLaunching(UIApplication app, NSDictionary options)
    {
        global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");
        global::Xamarin.Forms.Forms.Init();
        LoadApplication(new App());

        UINavigationBar.Appearance.Translucent = false;

        return base.FinishedLaunching(app, options);
    }
}

Xamarin Forms Shell titlebar color not set correctly in dark theme

1 Answers