¿Cómo puedo cambiar los colores de un stepper para iOS y Android?

Nuestro team redactor ha estado horas buscando para darle respuesta a tu interrogante, te compartimos la respuestas y esperamos servirte de mucha ayuda.

Solución:

Esto se puede hacer usando Efectos.

Código

Creé una aplicación de muestra aquí: https://github.com/brminnick/CustomStepper

Consumir los efectos en XAML

Efecto de color paso a paso

using System.Linq;

using Xamarin.Forms;

namespace CustomStepper

    public static class StepperColorEffect
    
        public static readonly BindableProperty ColorProperty =
            BindableProperty.CreateAttached(nameof(Color),
                typeof(Color),
                typeof(Stepper),
                Color.Gray,
                propertyChanged: OnStepperColorChanged);

        public static Color GetColor(BindableObject view) => (Color)view.GetValue(ColorProperty);

        public static void SetColor(BindableObject view, Color value) => view.SetValue(ColorProperty, value);

        static void OnStepperColorChanged(BindableObject bindable, object oldValue, object newValue) => UpdateEffect(bindable);

        static void UpdateEffect(BindableObject bindable)
        
            var stepper = (Stepper)bindable:
            RemoveEffect(stepper);
            stepper.Effects.Add(new StepperColorRoutingEffect());
        

        static void RemoveEffect(Stepper entry)
        
            var effectToRemoveList = entry.Effects.OfType();

            foreach (var entryReturnTypeEffect in effectToRemoveList)
                entry.Effects.Remove(entryReturnTypeEffect);
        
    

    class StepperColorRoutingEffect : RoutingEffect
    
        public StepperColorRoutingEffect() : base("CustomStepper.StepperColorEffect")
        
        
    

Efecto de plataforma iOS

using UIKit;

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

using CustomStepper.iOS;

[assembly: ResolutionGroupName("CustomStepper")]
[assembly: ExportEffect(typeof(StepperColorEffect), nameof(StepperColorEffect))]
namespace CustomStepper.iOS

    public class StepperColorEffect : PlatformEffect
    
        protected override void OnAttached()
        
            if (Element is Stepper element && Control is UIStepper control)
            
                control.TintColor = CustomStepper.StepperColorEffect.GetColor(element).ToUIColor();
                control.SetIncrementImage(Control.GetIncrementImage(UIControlState.Normal), UIControlState.Normal);
                control.SetDecrementImage(Control.GetDecrementImage(UIControlState.Normal), UIControlState.Normal);
            
        

        protected override void OnDetached()
        
            if (Element is Stepper element && Control is UIStepper control)
            
                control.TintColor = UIColor.Blue;
                control.SetIncrementImage(Control.GetIncrementImage(UIControlState.Normal), UIControlState.Normal);
                control.SetDecrementImage(Control.GetDecrementImage(UIControlState.Normal), UIControlState.Normal);
            
        
    

Efecto de la plataforma Android

using Android.Widget;
using Android.Graphics;

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

using CustomStepper.Droid;

[assembly: ResolutionGroupName("CustomStepper")]
[assembly: ExportEffect(typeof(StepperColorEffect), nameof(StepperColorEffect))]
namespace CustomStepper.Droid

    public class StepperColorEffect : PlatformEffect
    
        protected override void OnAttached()
        
            if (Element is Stepper element && Control is LinearLayout control)
            
                control.GetChildAt(0).Background.SetColorFilter(CustomStepper.StepperColorEffect.GetColor(element).ToAndroid(), PorterDuff.Mode.Multiply);
                control.GetChildAt(1).Background.SetColorFilter(CustomStepper.StepperColorEffect.GetColor(element).ToAndroid(), PorterDuff.Mode.Multiply);
            
        

        protected override void OnDetached()
        
            if (Element is Stepper element && Control is LinearLayout control)
            
                control.GetChildAt(0).Background.SetColorFilter(Xamarin.Forms.Color.Gray.ToAndroid(), PorterDuff.Mode.Multiply);
                control.GetChildAt(1).Background.SetColorFilter(Xamarin.Forms.Color.Gray.ToAndroid(), PorterDuff.Mode.Multiply);
            
        
    

capturas de pantalla

Androide

iOS

¿Cómo puedo cambiar los colores de un stepper para iOS y Android?

En tus Xamarin.Android proyecto, puede crear un dibujo vectorial personalizado y usarlo como fondo para lograr la misma apariencia que la imagen que ha publicado arriba.

Colocar el button_selector.xml y button_border.xml archivo en tu Android Resourcesdrawable carpeta:

botón_selector.xml

botón_border.xml:

En tus ExtStepperRenderer:

protected override void OnElementChanged(ElementChangedEventArgs e)

    base.OnElementChanged(e);
    MyStepper s = Element as MyStepper;

    if (Control != null)
    
        var button = Control.GetChildAt(0) as Android.Widget.Button;
        button.SetTextColor(s.MyColor.ToAndroid());
        button.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.button_selector, null));
        button.Background.SetColorFilter(s.MyColor.ToAndroid(), PorterDuff.Mode.Multiply);

        var button2 = Control.GetChildAt(1) as Android.Widget.Button;
        button2.SetTextColor(s.MyColor.ToAndroid());
        button2.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.button_selector, null));
        button2.Background.SetColorFilter(s.MyColor.ToAndroid(), PorterDuff.Mode.Multiply);
    

Efecto en el dispositivo Android:

Aquí puedes ver las comentarios y valoraciones de los lectores

Eres capaz de ayudar nuestra misión poniendo un comentario y valorándolo te lo agradecemos.

---

---

Utiliza Nuestro Buscador