[Bug] iOS Navigation bar has a white-colored gradient

[agat366]

After upgrading to one of the latest versions of XF, I am experiencing the white gradient over Navigation bar. It seems weird that I can't find any similar issues in google, but I've just checked and it doesn't seem like my code issue.
I am not sure which version it started from (4.3/4//5). I've just upgraded from 4.2 to 4.5 and it worked fine before the upgrade.
The app doesn't manipulate with NavigationBar settings much. The only customization is done on FinishLoading, like that:

            var bar = UINavigationBar.Appearance;

            bar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
            bar.ShadowImage = new UIImage();
            bar.BackgroundColor = Color.FromHex("46a1dc").ToUIColor();// UIColor.Clear;
            bar.TintColor = UIColor.White;
            bar.SetTitleTextAttributes(new UITextAttributes { TextColor = UIColor.White });
            bar.BarTintColor = Color.FromHex("46a1dc").ToUIColor();
            bar.BarStyle = UIBarStyle.Black;

And now I just can't get rid of that gradient whatever doing with the bar style...

• Version with issue: 4.5
• Last known good version: 4.2.0.709249 (haven't checked 4.3 and 4.4)
• Platform Target Frameworks:
  • iOS: 13.1
  • Android: not affected

Screenshots

[jfversluis]

Is there any specific reason you are setting the NavigationBar colors etc. like that? I think we have native Forms APIs for that now.

There are some other issues regarding this like #9952 and #9943. Is that something you are seeing as well?

Would you be able to lift the code from your app that is showing this issue and put it in a reproduction project that shows the same behavior?

[agat366]

1. I am setting that this way, because: a) it was working this way all the time, and there weren't any notices if I should use it another way in XF; b) one of the links you've provided is related to setting up every custom page properties, while the approach with setting up UINavigationBar.Appearance is a way to set default appearance of every page, and which doesn't require any extra codding per page.
2. I would happily use any standard way of defining default colors of Navigation Bar on both: Android and iOS if you just tell me how to do that. (Including, supporting more or less older Android versions).
3. I've already provided you a piece of the code which reveals the issue.

• Just create a new empty XF project
• upgrade to XF 4.5 (Nuget)
• add the code above (in the issue details) to FinishedLaunching method of AppDelegate
• make the main page actually to have the Navigation bar (MainPage = new NavigationPage(new MainPage()); and d:NavigationPage.HasNavigationBar="True" of the MainPage xaml),
  ... and voila! You will have the issue! (When having XF 4.3, it still works fine).

[jfversluis]

This should be the Forms way of achieving what you want:

MainPage = new NavigationPage(new MainPage())
            {
                BarBackgroundColor = Color.FromHex("46a1dc"),
                BarTextColor = Color.FromHex("46a1dc")
            };

Just tested and I did not see the behavior you are describing. I did create a little reproduction project and with your code I do see the issue. When using 4.4, no problem, upgrading to 4.5 and the issue shows. Also with the latest nightly this still happens.

Repro10034.zip

[agat366]

Yeah, so, as long as you are referring that as "issue", I believe that really is the issue, especially, as the fix you've provided above doesn't look like it should be done in real life apps by default. If you use any Mvvm-based frameworks, they usually even don't have that stage of initialization, as the pages are being created automatically by Mvvm engine. So, I hope you will find better way of handling that.

[agat366]

(And I am not mentioning that this issue just overrides a standard behavior or basic iOS applications logic flow).

[jfversluis]

The code I provided is just an example. These properties can also be set in XAML or through data-binding so that does not break anything in regard to MVVM.

[agat366]

Yeah. It has nothing to do with a standard way of handling things with XF, like for example setting a default style for ContentPage in app.xaml StaticDictionary, I guess you would agree with that...
4.5 has breaking changes anyways...

[RumbosN]

@agat366 I solved this with: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming/theming.

My app has the same navigation color in Android and in iOS. So, I only need add:

<Color x:Key="AccentColor">#FFDA125F\</Color>
<Color x:Key="InverseTextColor">White\</Color> 
<Style TargetType="NavigationPage">
         <Setter Property="BarBackgroundColor" Value="{StaticResource AccentColor}" />
         <Setter Property="BarTextColor" Value="{StaticResource InverseTextColor}" />
</Style>

inside the <ResourceDictionary> in App.xaml

[sisaacks]

@samhouts I think this is the same issue that I submitted to you about the flyout navigation, I am seeing a white gradient over the bottom tab bar when navigating but then it goes back to black after navigation completes. It almost looks like a progress bar going from left to right across the bottom of the screen

[sisaacks]

@samhouts #13917