Showing posts with label Slider. Show all posts
Showing posts with label Slider. Show all posts

Wednesday, 8 April 2015

Range Slider Renderer for Xamarin.Forms

Based on the Range Slider component in the Xamarin Components store, I have created a renderer so that the Range Slider can be used in Xamarin.Forms.

Firstly, I created a RangeSlider control in the Xamarin.Forms PCL, as follows :-
using Xamarin.Forms;

namespace RangeSliderSample
{
 public class RangeSlider : View
 {
  public static readonly BindableProperty LeftValueProperty =
   BindableProperty.Create(p => p.LeftValue, 0f);

  public float LeftValue
  {
   get { return (float) GetValue(LeftValueProperty); }
   set { SetValue(LeftValueProperty, value); }
  }

  public static readonly BindableProperty RightValueProperty =
   BindableProperty.Create(p => p.RightValue, 0f);

  public float RightValue
  {
   get { return (float) GetValue(RightValueProperty); }
   set { SetValue(RightValueProperty, value); }
  }

  public static readonly BindableProperty MaxValueProperty =
   BindableProperty.Create(p => p.MaxValue, 1f);

  public float MaxValue
  {
   get { return (float) GetValue(MaxValueProperty); }
   set { SetValue(MaxValueProperty, value); }
  }

  public static readonly BindableProperty MinValueProperty =
   BindableProperty.Create(p => p.MinValue, 0f);

  public float MinValue
  {
   get { return (float) GetValue(MinValueProperty); }
   set { SetValue(MinValueProperty, value); }
  }

  public static readonly BindableProperty StepProperty =
   BindableProperty.Create(p => p.Step, 0f);

  public float Step
  {
   get { return (float) GetValue(StepProperty); }
   set { SetValue(StepProperty, value); }
  }
 }
}

I then placed this control on a XAML page :-

 
  
  
  
 



I then created a Custom Renderer in the Android project :-
using RangeSlider;
using RangeSliderSample.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(RangeSliderSample.RangeSlider), typeof(RangeSliderRenderer))]
namespace RangeSliderSample.Droid
{
 public class RangeSliderRenderer : ViewRenderer
 {
  private RangeSliderView _slider;
  
  protected override void OnElementChanged(ElementChangedEventArgs e)
  {
   base.OnElementChanged(e);

   var rangeSlider = e.NewElement as RangeSlider;

   if (rangeSlider != null)
   {
    _slider = new RangeSliderView(Context, rangeSlider.MinValue, rangeSlider.MaxValue, rangeSlider.Step);

    _slider.LeftValueChanged += value =>
    {
     rangeSlider.LeftValue = _slider.LeftValue;
    };

    _slider.RightValueChanged += value =>
    {
     rangeSlider.RightValue = _slider.RightValue;
    };

    SetNativeControl(_slider);
   }
  }
 }
}

The complete solution is here :-
http://www.smartmobiledevice.co.uk/Samples/Xamarin/RangeSliderSample.zip