Xamarin.Forms Android图片着色按钮自定义渲染器开发问题

我来帮你搞定Android端这个按钮图片着色的问题！在Android平台上，Xamarin.Forms的Button控件是映射到Android.Widget.Button的，它不像iOS那样直接有ImageView属性，而是通过CompoundDrawables来管理按钮上的图片（也就是你设置的Xamarin.Forms Button的Image属性）。下面是具体的实现方案：

核心思路 #

Android的Button会把Xamarin.Forms设置的Image作为CompoundDrawable（默认是左侧的Drawable），我们可以获取这个Drawable，然后通过SetColorFilter方法给它添加颜色过滤器，实现类似iOS TintColor的效果，推荐使用PorterDuff.Mode.SrcIn模式，这个模式会让图片完全被我们设置的颜色覆盖，和iOS的AlwaysTemplate渲染模式效果一致。

完整自定义渲染器代码 #

基础版（固定着色） #

如果只是想给图片设置固定颜色（比如红色），可以用这个版本：

[assembly: ExportRenderer(typeof(Button), typeof(IconButtonRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class IconButtonRenderer : ButtonRenderer
    {
        public IconButtonRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            
            // 当按钮初始化完成后，更新图片颜色
            if (Control != null && Element != null)
            {
                UpdateImageTint();
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            
            // 如果图片属性变化，重新着色
            if (e.PropertyName == Button.ImageProperty.PropertyName)
            {
                UpdateImageTint();
            }
        }

        private void UpdateImageTint()
        {
            // 获取按钮上的CompoundDrawable（Xamarin.Forms默认把Image放在左侧，也就是第一个Drawable）
            var targetDrawable = Control?.CompoundDrawables.FirstOrDefault(drawable => drawable != null);
            if (targetDrawable == null) return;

            // 设置颜色过滤器，这里用红色，你可以替换成任意Android颜色
            var tintColor = Android.Graphics.Color.Red;
            targetDrawable.SetColorFilter(tintColor, PorterDuff.Mode.SrcIn);

            // 刷新Drawable和按钮状态，确保颜色生效
            targetDrawable.InvalidateSelf();
            Control.Invalidate();
        }
    }
}

进阶版（支持绑定TintColor属性） #

如果想像iOS那样支持动态绑定TintColor属性，我们可以先在共享项目里自定义一个带TintColor属性的Button：

// 共享项目中的自定义Button
public class IconButton : Button
{
    public static readonly BindableProperty TintColorProperty = BindableProperty.Create(
        nameof(TintColor),
        typeof(Color),
        typeof(IconButton),
        Color.Default);

    public Color TintColor
    {
        get => (Color)GetValue(TintColorProperty);
        set => SetValue(TintColorProperty, value);
    }
}

然后修改Android渲染器，支持动态获取和更新TintColor：

[assembly: ExportRenderer(typeof(IconButton), typeof(IconButtonRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class IconButtonRenderer : ButtonRenderer
    {
        public IconButtonRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            
            if (Control != null && Element != null)
            {
                UpdateImageTint();
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            
            // 监听图片和TintColor属性变化
            if (e.PropertyName == Button.ImageProperty.PropertyName || 
                e.PropertyName == IconButton.TintColorProperty.PropertyName)
            {
                UpdateImageTint();
            }
        }

        private void UpdateImageTint()
        {
            var iconButton = Element as IconButton;
            if (iconButton == null || Control == null) return;

            var targetDrawable = Control.CompoundDrawables.FirstOrDefault(drawable => drawable != null);
            if (targetDrawable == null) return;

            // 将Xamarin.Forms的Color转成Android的Color
            var tintColor = iconButton.TintColor.ToAndroid();
            targetDrawable.SetColorFilter(tintColor, PorterDuff.Mode.SrcIn);

            targetDrawable.InvalidateSelf();
            Control.Invalidate();
        }
    }
}

关键点说明 #

1. CompoundDrawables：Android Button通过这个数组管理按钮四周的图片，Xamarin.Forms默认把Button.Image设置为左侧的Drawable（即CompoundDrawables[0]），用FirstOrDefault可以兼容不同的图片位置设置。
2. PorterDuff.Mode.SrcIn：这个混合模式会让图片的像素完全被我们设置的颜色替换，完美模拟iOS的AlwaysTemplate+TintColor效果。
3. 属性监听：在OnElementPropertyChanged里监听图片和TintColor的变化，确保动态修改时颜色能实时更新。

内容的提问来源于stack exchange，提问作者Matthieu Lemonnier