Introduction

This article demonstrates how to create and use a Customize Slider control in Xamarin.Forms, XAML, and C#. This article starts with the introduction of the Customize Slider tag in XAML. After that, it demonstrates how to set MaxColor, MinColor, ThumbColor, and ThumbImage of a CustomSlider. In the end, the article

discusses how to create a Slider at run-time.

Customize Slider control

Implementation

Open Visual Studio and select a New Project.

Customize Slider control

Now, select Cross Platform App, give the project a name, and set the project path. Then, click OK.

Customize Slider control

Select the template as "Blank App" and code sharing as "PCL".

Customize Slider control

Now we are creating a CustomSlider class for generating a custom properties ...
Right-click on PCL Project and select Add >> New Item or Add >> Class.

Customize Slider control

We are creating a class CustomSlider.cs and writing the following C# code.

Customize Slider control

CustomSlider.cs

  1. public class CustomSlider : Slider
  2. {
  3. public static readonly BindableProperty MaxColorProperty =BindableProperty.Create(nameof(MaxColor),
  4. typeof(Color), typeof(CustomSlider),Color.Default);
  6. public Color MaxColor
  7. {
  8. get { return (Color)GetValue(MaxColorProperty); }
  9. set { SetValue(MaxColorProperty, value); }
  10. }
  12. public static readonly BindableProperty MinColorProperty =BindableProperty.Create(nameof(MinColor),
  13. typeof(Color), typeof(CustomSlider),Color.Default);
  15. public Color MinColor
  16. {
  17. get { return (Color)GetValue(MinColorProperty); }
  18. set { SetValue(MinColorProperty, value); }
  19. }
  21. public static readonly BindableProperty ThumbColorProperty =BindableProperty.Create(nameof(ThumbColor),
  22. typeof(Color), typeof(CustomSlider),Color.Default);
  24. public Color ThumbColor
  25. {
  26. get { return (Color)GetValue(ThumbColorProperty); }
  27. set { SetValue(ThumbColorProperty, value); }
  28. }
  30. public static readonly BindableProperty ThumbImageProperty =BindableProperty.Create(nameof(ThumbImage),
  31. typeof(string),typeof(CustomSlider),string.Empty);
  33. public string ThumbImage
  34. {
  35. get { return (string)GetValue(ThumbImageProperty); }
  36. set { SetValue(ThumbImageProperty, value); }
  37. }
  38. }

This properties is set in the Android project as well as in iOS project.

Let us start with Android. We are creating a Class in Android Project and rendering the slider.

Customize Slider control

Then, set all the properties when generat in PCL Project. and you Please make sure of the dependency

[assembly: ExportRenderer(typeof(CustomSlider), typeof(MySliderRenderer))]
of Android(MySliderRenderer) and PCL(CustomSlider)…

Customize Slider control

MySliderRenderer.cs

  1. public class MySliderRenderer : SliderRenderer
  2. {
  3. private CustomSlider view;
  4. protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Slider> e)
  5. {
  6. base.OnElementChanged(e);
  7. if (e.OldElement != null || e.NewElement == null)
  8. return;
  9. view = (CustomSlider)Element;
  10. if (!string.IsNullOrEmpty(view.ThumbImage))
  11. { // Set Thumb Icon
  12. Control.SetThumb(Resources.GetDrawable(view.ThumbImage));
  13. }
  14. else if (view.ThumbColor != Xamarin.Forms.Color.Default ||
  15. view.MaxColor != Xamarin.Forms.Color.Default ||
  16. view.MinColor != Xamarin.Forms.Color.Default)
  17. Control.Thumb.SetColorFilter(view.ThumbColor.ToAndroid(), PorterDuff.Mode.SrcIn);
  18. Control.ProgressTintList = Android.Content.Res.ColorStateList.ValueOf(view.MinColor.ToAndroid());
  19. Control.ProgressTintMode = PorterDuff.Mode.SrcIn;
  20. //this is for Maximum Slider line Color
  21. Control.ProgressBackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(view.MaxColor.ToAndroid());
  22. Control.ProgressBackgroundTintMode = PorterDuff.Mode.SrcIn;
  23. }
  24. protected override void OnLayout(bool changed, int l, int t, int r, int b)
  25. {
  26. base.OnLayout(changed, l, t, r, b);
  27. if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.JellyBean)
  28. {
  29. if (Control == null)
  30. { return;}
  31. SeekBar ctrl = Control;
  32. Drawable thumb = ctrl.Thumb;
  33. int thumbTop = ctrl.Height / 2 - thumb.IntrinsicHeight / 2;
  34. thumb.SetBounds(thumb.Bounds.Left, thumbTop,
  35. thumb.Bounds.Left + thumb.IntrinsicWidth, thumbTop + thumb.IntrinsicHeight);
  36. }
  37. }
  38. }

Now, it's time to go with iOS project. Now you set the PCL(CustomSlider) property in IOS Project…. We are creating a Class, so right click on iOS Project and select Apple. Then, select "Class" and give this class a name as MySliderRenerer.cs.

Customize Slider control

Now, let us write some code for Slider and Set Property.

MySliderRenderer.cs

  1. [assembly: ExportRenderer(typeof(CustomSlider), typeof(MySliderRenderer))]
  2. namespace CustomSliderDemo.iOS
  3. {
  4. public class MySliderRenderer : SliderRenderer
  5. {
  6. private CustomSlider view;
  7. protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Slider> e)
  8. {
  9. base.OnElementChanged(e);
  10. if (e.OldElement != null || e.NewElement == null)
  11. return;
  13. view = (CustomSlider)Element;
  14. if (!string.IsNullOrEmpty(view.ThumbImage))
  15. {
  16. //Assigns a thumb image to the specified control states.
  17. Control.SetThumbImage(UIImage.FromFile(view.ThumbImage), UIControlState.Normal);
  18. }
  19. else if (view.ThumbColor != Xamarin.Forms.Color.Default ||
  20. view.MaxColor != Xamarin.Forms.Color.Default ||
  21. view.MinColor != Xamarin.Forms.Color.Default)
  22. // Set Progress bar Thumb color
  23. Control.ThumbTintColor = view.ThumbColor.ToUIColor();
  24. //this is for Minimum Slider line Color
  25. Control.MinimumTrackTintColor = view.MinColor.ToUIColor();
  26. //this is for Maximum Slider line Color
  27. Control.MaximumTrackTintColor = view.MaxColor.ToUIColor();
  29. }
  30. }
  31. }

Customize Slider control

MySliderRenderer.cs

  1. public class MySliderRenderer : SliderRenderer
  2. {
  3. protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Slider> e)
  4. {
  5. base.OnElementChanged(e);
  6. if (e.OldElement != null || e.NewElement == null)
  7. return;
  9. var view = (CustomSlider)Element;
  10. if (!string.IsNullOrEmpty(view.ThumbImage))
  11. {
  12. //Assigns a thumb image to the specified control states.
  13. Control.SetThumbImage(UIImage.FromFile(view.ThumbImage), UIControlState.Normal);
  14. }
  15. else if (view.ThumbColor != Xamarin.Forms.Color.Default ||
  16. view.MaxColor != Xamarin.Forms.Color.Default ||
  17. view.MinColor != Xamarin.Forms.Color.Default)
  18. // Set Progress bar Thumb color
  19. Control.ThumbTintColor = view.ThumbColor.ToUIColor();
  20. //this is for Minimum Slider line Color
  21. Control.MinimumTrackTintColor = view.MinColor.ToUIColor();
  22. //this is for Maximum Slider line Color
  23. Control.MaximumTrackTintColor = view.MaxColor.ToUIColor();
  24. }
  25. }
Now, go to the PCL Project and write this code in MainPage.xaml.
As you can see in the bellow code, we have to set the view reference in xmlns:cs="clr-namespace:CustomSliderDemo" MainPage.xaml.

Write the following code for CustomSider.

MainPage.xaml

  1. <StackLayout Padding="20">
  2. <Label Text="Custom Slider" FontSize="Large"/>
  3. <cs:CustomSlider x:Name="customSlider"
  4. MaxColor="Red" MinColor="Yellow"
  5. ThumbColor="Green" />
  7. <cs:CustomSlider MaxColor="Red" MinColor="Yellow"
  8. ThumbColor="Black" ThumbImage="icon.png"/>
  9. </StackLayout>
Now, its Ready your CustomSlider is working!!

Relaterd Video Click,

Features of CustomSlide controls

  1. Custom Max Color Property=(MaxColor="#24C4FF")
  2. Custom Min Color Property=(MinColor="Red")
  3. Custom Thumb Color Property=(ThumbColor="Green")
  4. Custom ThumbImage=(ThumbImage="icon")