Xamarin Switch的Tint Colour Android渲染器导致控件消失问题

我来帮你一步步搞定这个需求！你已经创建了带可绑定TintColour属性的ExtendedSwitch类，先把这个类补全完整：

public class ExtendedSwitch : Switch
{
    /// <summary>
    /// 可绑定的着色颜色属性（设置Switch开启状态颜色）。
    /// </summary>
    public static readonly BindableProperty TintColourProperty =
        BindableProperty.Create(nameof(TintColour), typeof(Color), typeof(ExtendedSwitch), Color.Default);

    public Color TintColour
    {
        get => (Color)GetValue(TintColourProperty);
        set => SetValue(TintColourProperty, value);
    }
}

接下来我们需要针对iOS和Android分别实现自定义渲染器，把TintColour属性应用到Switch的开启状态上：

iOS 自定义渲染器 #

在iOS项目中创建渲染器类，利用原生UISwitch的OnTintColor属性直接设置开启状态的颜色：

[assembly: ExportRenderer(typeof(ExtendedSwitch), typeof(ExtendedSwitchRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class ExtendedSwitchRenderer : SwitchRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
        {
            base.OnElementChanged(e);

            if (Control != null && Element is ExtendedSwitch extendedSwitch)
            {
                // 将自定义TintColour映射到原生Switch的开启状态颜色
                Control.OnTintColor = extendedSwitch.TintColour.ToUIColor();
                
                // 如果需要同步修改滑块颜色，可添加这行
                // Control.ThumbTintColor = extendedSwitch.TintColour.ToUIColor();
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            // 监听TintColour属性变化，实时更新颜色
            if (e.PropertyName == ExtendedSwitch.TintColourProperty.PropertyName && Control != null)
            {
                var extendedSwitch = (ExtendedSwitch)sender;
                Control.OnTintColor = extendedSwitch.TintColour.ToUIColor();
            }
        }
    }
}

Android 自定义渲染器 #

Android平台需要通过修改Switch的ThumbDrawable（滑块）和TrackDrawable（轨道）的颜色滤镜来实现效果：

[assembly: ExportRenderer(typeof(ExtendedSwitch), typeof(ExtendedSwitchRenderer))]
namespace YourAppName.Droid.Renderers
{
    public class ExtendedSwitchRenderer : SwitchRenderer
    {
        public ExtendedSwitchRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
        {
            base.OnElementChanged(e);
            UpdateSwitchColours();
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == ExtendedSwitch.TintColourProperty.PropertyName)
            {
                UpdateSwitchColours();
            }
        }

        private void UpdateSwitchColours()
        {
            if (Control == null || !(Element is ExtendedSwitch extendedSwitch)) return;

            var tintColor = extendedSwitch.TintColour.ToAndroid();

            // 修改开启状态的轨道颜色
            var trackDrawable = Control.TrackDrawable;
            trackDrawable?.SetColorFilter(new PorterDuffColorFilter(tintColor, PorterDuff.Mode.SrcAtop));

            // 修改开启状态的滑块颜色
            var thumbDrawable = Control.ThumbDrawable;
            thumbDrawable?.SetColorFilter(new PorterDuffColorFilter(tintColor, PorterDuff.Mode.SrcAtop));
        }
    }
}

使用方法 #

在XAML中直接引用你的ExtendedSwitch，设置或绑定TintColour属性即可：

<local:ExtendedSwitch IsToggled="True" TintColour="#2196F3" />

这样就能精准实现仅修改Switch开启状态颜色的需求啦！

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