有没有办法可以自定义 Switch 颜色

Question

我的代码使用这样的标准开关：

<Switch HorizontalOptions="End" IsToggled="{Binding PbSwitch}" />

显示时，打开和关闭看起来像这样：

有没有办法进行自定义，以便我可以在 iOS 和 Android 中将开关的背景颜色设置为不同的颜色。我认为这需要一个自定义渲染器，但我不知道如何做到这一点。

提出的解决方案存在问题：

Answer 1

如果我清楚你想要什么，你可能需要自定义渲染器来实现这种效果。

首先，在PCL中定义一个带有颜色BindableProperty的CustomSwitch（通过它你可以设置值并在不同平台上使用）

自定义开关

public class CustomSwitch : Switch  
{  
   public static readonly BindableProperty SwitchOffColorProperty =  
     BindableProperty.Create(nameof(SwitchOffColor),  
         typeof(Color), typeof(CustomSwitch),  
         Color.Default);  

   public Color SwitchOffColor  
   {  
       get { return (Color)GetValue(SwitchOffColorProperty); }  
       set { SetValue(SwitchOffColorProperty, value); }  
   }  

   public static readonly BindableProperty SwitchOnColorProperty =  
     BindableProperty.Create(nameof(SwitchOnColor),  
         typeof(Color), typeof(CustomSwitch),  
         Color.Default);  

   public Color SwitchOnColor  
   {  
       get { return (Color)GetValue(SwitchOnColorProperty); }  
       set { SetValue(SwitchOnColorProperty, value); }  
   }  

   public static readonly BindableProperty SwitchThumbColorProperty =  
     BindableProperty.Create(nameof(SwitchThumbColor),  
         typeof(Color), typeof(CustomSwitch),  
         Color.Default);  

   public Color SwitchThumbColor  
   {  
       get { return (Color)GetValue(SwitchThumbColorProperty); }  
       set { SetValue(SwitchThumbColorProperty, value); }  
   }  

   public static readonly BindableProperty SwitchThumbImageProperty =  
     BindableProperty.Create(nameof(SwitchThumbImage),  
         typeof(string),  
         typeof(CustomSwitch),  
         string.Empty);  

   public string SwitchThumbImage  
   {  
       get { return (string)GetValue(SwitchThumbImageProperty); }  
       set { SetValue(SwitchThumbImageProperty, value); }  
   }  
} 

安卓

[assembly: ExportRenderer(typeof(CustomSwitch), typeof(CustomSwitchRenderer))]
namespace FormsApp.Android
{
public class CustomSwitchRenderer : SwitchRenderer  
{  
    private CustomSwitch view;  
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)  
    {  
        base.OnElementChanged(e);  
        if (e.OldElement != null || e.NewElement == null)  
            return;  
        view = (CustomSwitch)Element;  
        if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.JellyBean)  
        {  
            if (this.Control != null)  
            {  
                if (this.Control.Checked)  
                {  
                    this.Control.TrackDrawable.SetColorFilter(view.SwitchOnColor.ToAndroid(), PorterDuff.Mode.SrcAtop);  
                }  
                else  
                {  
                    this.Control.TrackDrawable.SetColorFilter(view.SwitchOffColor.ToAndroid(), PorterDuff.Mode.SrcAtop);  
                }  
               this.Control.CheckedChange += this.OnCheckedChange;  
                UpdateSwitchThumbImage(view);  
            }  
            //Control.TrackDrawable.SetColorFilter(view.SwitchBGColor.ToAndroid(), PorterDuff.Mode.Multiply);  
        }  
    }  
      
    private void UpdateSwitchThumbImage(CustomSwitch view)  
    {  
        if (!string.IsNullOrEmpty(view.SwitchThumbImage))  
        {  
            view.SwitchThumbImage = view.SwitchThumbImage.Replace(".jpg", "").Replace(".png", "");  
            int imgid = (int)typeof(Resource.Drawable).GetField(view.SwitchThumbImage).GetValue(null);  
            Control.SetThumbResource(Resource.Drawable.icon);  
        }  
        else  
        {  
            Control.ThumbDrawable.SetColorFilter(view.SwitchThumbColor.ToAndroid(), PorterDuff.Mode.Multiply);  
            // Control.SetTrackResource(Resource.Drawable.track);  
        }  
    }  

  private void OnCheckedChange(object sender, CompoundButton.CheckedChangeEventArgs e)  
    {  
        if (this.Control.Checked)  
        {  
            this.Control.TrackDrawable.SetColorFilter(view.SwitchOnColor.ToAndroid(), PorterDuff.Mode.SrcAtop);  
        }  
        else  
        {  
            this.Control.TrackDrawable.SetColorFilter(view.SwitchOffColor.ToAndroid(), PorterDuff.Mode.SrcAtop);  
        }  
    }  
    protected override void Dispose(bool disposing)  
    {  
        this.Control.CheckedChange -= this.OnCheckedChange;  
        base.Dispose(disposing);  
    }  
}  
}

iOS系统

[assembly: ExportRenderer(typeof(CustomSwitch), typeof(CustomSwitchRenderer))]
namespace FormsApp2.iOS
{
    class CustomSwitchRenderer : SwitchRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || e.NewElement == null)  return;

            CustomSwitch s = Element as CustomSwitch;

            UISwitch sw = new UISwitch();
            sw.ThumbTintColor = s.SwitchThumbColor.ToUIColor();
            sw.OnTintColor = s.SwitchOnColor.ToUIColor();

            SetNativeControl(sw);
        }
    }
}

便携式应用

<local:CustomSwitch Margin="50" SwitchOnColor="Red"/>

不要忘记在 Xmal 中添加 xmlns(namespace)

xmlns:local = "clr-namespace:YouAppName"