Strange image behaviour of Navigation Bar Item

Question

I am working on an xamarin mvvmcross app. I am using a LeftBarButtonItem to open/close a flyoutmenu, this works now.

But for some wierd reason I cannot get the image to load properly.

NavigationItem.LeftBarButtonItem = new UIBarButtonItem (UIImage.FromBundle("menu-button"),UIBarButtonItemStyle.Plain , (s, e) =>{

};

This wil show the button as a solid blue rectangle:

But if i call this afterwards

NavigationItem.LeftBarButtonItem.SetBackgroundImage(UIImage.FromBundle("menu-button"),UIControlState.Normal,UIBarMetrics.Default);

It loads the image but behind the blue rectangle... all stretched out like so:

I figured this could be fixed if I changed the first line to

NavigationItem.LeftBarButtonItem = new UIBarButtonItem ("",UIBarButtonItemStyle.Plain , (s, e) =>{

};

But then it renders the image outside of the Navigation bar... Cannot post a screenshot of that because of low rep.

How can I make it so that the background image loads properly? The size of the image in the first screenshot is correct but I can not figure out why it is solid blue.

Answer 1

You have to call .ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal) on the UIImage, so it won't be a template.

I have a helper method for this.

public static UIImage GetOriginal(this UIImage image) => 
    image.ImageWithRenderingMode (UIImageRenderingMode.AlwaysOriginal);