CODEWITHSUNDEEP
xamarinxamarin.forms
Marco Jr
Marco Jr

Reputation: 6796

Xamarin Form - Add png icon in toolbar with color

This is my code

ToolbarItems.Add(new ToolbarItem("User", "userAvatar.png", async () => {
            await Navigation.PopToRootAsync();
        }));

It's not working. It's place a masked single color image instead a png in colors.

I'm trying to archive something like this...

enter image description here

Any clue ?

Upvotes: 2

Views: 1434

Answers (3)

Jannie Theunissen
Jannie Theunissen

Reputation: 30164

For a color logo on the right on all my navigation pages I used this custom renderer:

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationRenderer))]

namespace App.iOS
{
    public class CustomNavigationRenderer : NavigationRenderer
    {

        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();
            var logo = NavigationBar.TopItem.RightBarButtonItem.Image;
            if (logo == null) return;

            if (logo.RenderingMode == UIImageRenderingMode.AlwaysOriginal)
            {
                return;
            }

            NavigationBar.TopItem.RightBarButtonItem.Image = logo.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
        }

    }
}

Upvotes: 1

Turki Alkhateeb
Turki Alkhateeb

Reputation: 100

The easiest way is to not use a toolbar, instead, set the type of this page as a Modal when navigating to it(Using Navigation.PushModal()). And add a horizontal LinearLayout that will act as the toolbar.

Upvotes: 0

Paul Kertscher
Paul Kertscher

Reputation: 9713

I was going mad about this issue once, too (my situation was a bit more subtle, I had a plain and a colored verion of the icon and was wondering why the heck the colored icon would not be loaded) and unfortunately it's not that easy to overcome.

The icons being monochrome is the default behavior for iOS apps and Xamarin.Forms implements this behavior. According to this post you'll need a custom renderer to show colored icons in the navigation bar.

Edit

According to this post, you'll have to set the UIImageRenderingMode for the respective images in your custom renderer

image = image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);

using the renderer implementation from this answer, it should be something in the line of 

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyProject.iOS.Renderers.IosMainMenuRenderer))]

namespace MyProject.iOS.Renderers {
    public class IosMainMenuRenderer : TabbedRenderer {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
            var items = TabBar.Items;
            for (var i = 0; i < items.Length; i++) {
                items[i].Image = items[i].ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                items[i].SelectedImage = items[i].SelectedImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
            }
        }
    }
}

but I have not tested this!

Upvotes: 1

Related Questions