Customize Slider Control In Xamarin.Forms

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);  
  5.   
  6.     public Color MaxColor  
  7.     {  
  8.         get { return (Color)GetValue(MaxColorProperty); }  
  9.         set { SetValue(MaxColorProperty, value); }  
  10.     }  
  11.   
  12.     public static readonly BindableProperty MinColorProperty =BindableProperty.Create(nameof(MinColor),  
  13.         typeof(Color), typeof(CustomSlider),Color.Default);  
  14.   
  15.     public Color MinColor  
  16.     {  
  17.         get { return (Color)GetValue(MinColorProperty); }  
  18.         set { SetValue(MinColorProperty, value); }  
  19.     }  
  20.   
  21.     public static readonly BindableProperty ThumbColorProperty =BindableProperty.Create(nameof(ThumbColor),  
  22.         typeof(Color), typeof(CustomSlider),Color.Default);  
  23.   
  24.     public Color ThumbColor  
  25.     {  
  26.         get { return (Color)GetValue(ThumbColorProperty); }  
  27.         set { SetValue(ThumbColorProperty, value); }  
  28.     }  
  29.   
  30.     public static readonly BindableProperty ThumbImageProperty =BindableProperty.Create(nameof(ThumbImage),  
  31.           typeof(string),typeof(CustomSlider),string.Empty);  
  32.   
  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;  
  12.   
  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();  
  28.   
  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;  
  8.   
  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" />  
  6.              
  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")

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now