Xamarin Form工具栏添加彩色PNG图标问题求助

这是个非常常见的坑——不管是Xamarin.Forms还是.NET MAUI，平台默认都会对ToolbarItem的图标应用单色tint滤镜，目的是让图标统一适配主题色调，但这就把你的彩色PNG给“压成”单色了。下面分场景给你具体的解决思路：

方法一：针对Xamarin.Forms（自定义渲染器） #

我们需要在各个平台上手动禁用这个tint效果：

Android端 #

创建一个自定义渲染器，清除图标的tint规则：

[assembly: ExportRenderer(typeof(ToolbarItem), typeof(CustomToolbarItemRenderer))]
namespace YourAppNamespace.Droid
{
    public class CustomToolbarItemRenderer : ToolbarItemRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ToolbarItem> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                // 清除tint列表，让图标显示原本的色彩
                Control.SetIconTintList(null);
            }
        }
    }
}

iOS端 #

iOS需要把图标的渲染模式改成AlwaysOriginal，避免系统自动染色：

[assembly: ExportRenderer(typeof(ToolbarItem), typeof(CustomToolbarItemRenderer))]
namespace YourAppNamespace.iOS
{
    public class CustomToolbarItemRenderer : ToolbarItemRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ToolbarItem> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                // 设置渲染模式为原图模式，保留彩色
                Control.Image = Control.Image?.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
            }
        }
    }
}

方法二：针对.NET MAUI（Handler自定义） #

MAUI用Handler替代了传统渲染器，配置方式更简洁：

1. 全局配置（所有ToolbarItem都显示彩色） #

在MauiProgram.cs中添加Handler的全局配置：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<ToolbarItem, CustomToolbarItemHandler>();
#elif IOS
    handlers.AddHandler<ToolbarItem, CustomToolbarItemHandler>();
#endif
});

2. 编写平台专属Handler #

Android平台（Platforms/Android/CustomToolbarItemHandler.cs）

namespace YourAppNamespace.Platforms.Android
{
    public class CustomToolbarItemHandler : ToolbarItemHandler
    {
        protected override void ConnectHandler(AndroidX.AppCompat.Widget.Toolbar.ItemControl platformView)
        {
            base.ConnectHandler(platformView);
            platformView.SetIconTintList(null);
        }
    }
}

iOS平台（Platforms/iOS/CustomToolbarItemHandler.cs）

namespace YourAppNamespace.Platforms.iOS
{
    public class CustomToolbarItemHandler : ToolbarItemHandler
    {
        protected override void ConnectHandler(UIKit.UIBarButtonItem platformView)
        {
            base.ConnectHandler(platformView);
            platformView.Image = platformView.Image?.ImageWithRenderingMode(UIKit.UIImageRenderingMode.AlwaysOriginal);
        }
    }
}

进阶技巧：只让单个ToolbarItem显示彩色 #

如果你不想全局修改，只想让特定的ToolbarItem保留彩色，可以先创建一个子类：

public class ColoredToolbarItem : ToolbarItem { }

然后把渲染器/Handler的目标类型改成ColoredToolbarItem，使用的时候直接实例化这个子类即可：

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

额外检查点 #

• 确认你的PNG图标本身是彩色的，没有被误转成单色资源
• 检查图标资源的Build Action：Android设为AndroidResource，iOS设为BundleResource
• Android图标建议放在Resources/drawable或对应分辨率的mipmap文件夹

内容的提问来源于stack exchange，提问作者Marco Jr