Notice (2018-05-24): bugzilla.xamarin.com is now in
Please join us on
Visual Studio Developer Community and in the
Mono organizations on
GitHub to continue tracking issues. Bugzilla will remain
available for reference in read-only mode. We will continue to work
on open Bugzilla bugs, copy them to the new locations
as needed for follow-up, and add the new items under Related
Our sincere thanks to everyone who has contributed on this bug
tracker over the years. Thanks also for your understanding as we
make these adjustments and improvements for the future.
Please create a new report for Bug 38148 on
Developer Community or GitHub if you have new
information to add and do not yet see a matching new report.
If the latest results still closely match this report, you can use the
In special cases on GitHub you might also want the comments:
GitHub Markdown with public comments
Created attachment 14773 [details]
Sample project showing blue tinted logo as hamburger menu icon
Currently icons set to be the hamburger icon used on a MasterDetailPage (MasterDetailPage.Master's 'Icon' value) will always be turned monochrome and tinted in Xamarin Forms on iOS. For example, an icon that is 3 white horizontal lines (typical hamburger icon) will turn into a blue tinted hamburger icon on iOS.
I suggest that there should be a way to specify that you do not want this monochrome/tint to occur for the hamburger icon (and potentially other icons on the nav bar) so that full-color icons can be used instead. For instance, a common practice for showing a branded logo next to the hamburger button on iOS is to specify a wide hamburger icon that includes the logo next to the hamburger so that the brand icon is part of the nav bar (similar to Android). To disable the monochrome/tinting and instead use a full color image is then done by setting the UIImageRenderingMode to AlwaysOriginal when the UIImage is created for the nav bar.
Attached are 2 images, one showing how a hamburger icon with a logo currently looks (Hamburger_withtint.png) and another image showing how we would like it to look (Hamburger_withcolor.png). Please note the Pepsi logo is just for example.
In trying to trace down the internals to see if we could override this behavior, it appears the issue lies within NavigationRenderer.UpdateLeftBarButtonItem() - that is where it creates the new UIBarButtonItem and creates the new UIImage from the icon path specified. What we would like to see is a flag on the Xamarin Forms Page control, or some other way, for making this UIImage creation specify UIImageRenderingMode.AlwaysOriginal so that full-color icons can be used.
Attached is a simple sample project showing a settings.png which contains a hamburger icon and a Pepsi logo. Currently the app runs and renders as seen in the attached Hamburger_withtint.png, but we would like to be able to make it look like Hamburger_withcolor.png instead.
The only viable alternative I have found is to instead use a custom NavigationRenderer which sets the NavigationBar.BarTintColor to a UIColor.FromPatternImage() specifying a custom image for the nav bar which includes the logo. The problem with this approach is the need to create and maintain several nav bar image sizes, and having to bake the logo into the nav bar image - which poses problems when a nav bar is used that does not have a hamburger (ex: a popup modal) - thus requiring two custom renderers - one with the logo offset with room for the hamburger and another with the logo not offset.
Created attachment 14774 [details]
Hamburger icon as it currently works (monochromed and tinted)
Created attachment 14775 [details]
Hamburger icon with full color support (as being requested)
I've been able to get a color hamburger menu icon by modifying a custom renderer found here:
The issue is that unfortunately this route only works on iPhones and not iPads (still appears as white monochrome). I'll attach an updated sample project using a custom renderer in case it helps anyone else that maybe doesn't need to support iPads. Basically it is overriding the NavigationBar getter for the NavigationPageRenderer.
Created attachment 15164 [details]
Working color hamburger icon sample project (iPhone only, not iPad)
Updated project which includes a custom renderer that successfully changes the hamburger icon to be full color, unfortunately does not work on iPad, just iPhone.