Slider - Customization

Hi,

I'm trying to figure out how to customize the appearance of a Slider.

I modified the ExtendedSlider (Xamarin Forms Labs) to include the parameters I want to customize (mainly colors of the thumb button and min/max sides of the slider by adding the code as follows:


// setup bindable color customizations

    public static readonly BindableProperty ThumbColorProperty = 
        BindableProperty.Create<ExtendedSlider, Color>(p => p.ThumbColor, Color.White);

    public Color ThumbColor { 
        get{return (Color)GetValue(ThumbColorProperty);}
        set{ SetValue(ThumbColorProperty, value);}
    }

    public static readonly BindableProperty MinSideColorProperty =
       BindableProperty.Create<ExtendedSlider, Color>(p => p.MinSideColor, Color.Purple);

    public Color MinSideColor
    {
        get { return (Color)GetValue(MinSideColorProperty); }
        set { SetValue(MinSideColorProperty, value); }
    }

    public static readonly BindableProperty MaxSideColorProperty =
    BindableProperty.Create<ExtendedSlider, Color>(p => p.MaxSideColor, Color.Purple);

    public Color MaxSideColor
    {
        get { return (Color)GetValue(MaxSideColorProperty); }
        set { SetValue(MaxSideColorProperty, value); }
    }

I then added a Custom Renderer (for Android):


public class ExtendedSliderRenderer : SliderRenderer
{
public ExtendedSliderRenderer() { }

    protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
    {
        base.OnElementChanged(e);

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


        ExtendedSlider extendedSlider = (ExtendedSlider)this.Element; // customized object with properties

        // control is 

        if (null != Control) { 

       /// WHAT DO I DO HERE??

        }


    }
}

Any help is appreciated
/A

Posts

  • AminLaljiAminLalji CAMember

    Any ideas??

  • AminLaljiAminLalji CAMember

    Hi All - Can anybody provide an example of how to change the color of a slider?

  • DevinSmithDevinSmith GBUniversity ✭✭
    edited April 2015

    Hi Amin,

    here is a piece of code that changes the slider bar color in a custom renderer.

    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
    base.OnElementChanged(e);
    if (Control != null)
    {
    Control.ProgressDrawable.SetColorFilter(Android.Graphics.Color.Red, PorterDuff.Mode.SrcIn);
    }
    }

    You can use Control.SetThumb(new DrawableContainer()) to customize the thumb component.

    I hope this helps.

    Xamarin Certified Developer

  • BenPattinsonBenPattinson USMember ✭✭

    Adding to @DevinSmith's answer, if you just want to change the color, you can do the same to the thumb, so I used:

               Control.ProgressDrawable.SetColorFilter(Android.Graphics.Color.Red, PorterDuff.Mode.SrcIn);
               Control.Thumb.SetColorFilter(Android.Graphics.Color.Red, PorterDuff.Mode.SrcIn);    
    
  • WarinthornSWarinthornS THMember

    @Ben Pattinson I have a question to ask you Please help me

    Control.Thumb >>> I want to change the image.What do I have to do
    Thank you.

Sign In or Register to comment.