2015-09-09 127 views
1

有没有人听说过Xamarin格式的双面滑块?我正在寻找,但似乎无法找到一个。原生Xamarin Forms Slider非常漂亮,但它只支持1个标记。我正在寻找两侧各有一个标记的滑块。Xamarin跨平台双滑块

有没有人听说过这个或知道如何扩展一个Xamarin控件来添加类似的功能。

任何帮助将不胜感激在这件事上。

我已经找到了范围滑块这里

https://components.xamarin.com/view/rangeslider

Unfortanately控制有一个iOS 4的外观和不能直观地从什么伊夫读程式化或更新。

+0

您是否找到解决方案?你可以请帖吗? – Lijo

+0

不,我最终在两条不同的线上使用了两个滑块,以实现我想要的。 – MattyMerrix

回答

0

答案是真的没有任何本机,你可以尝试扩展本地滑块或堆叠两个滑块旁边给予所需的效果。你

还可以检查出

https://components.xamarin.com/view/rangeslider

,但它看起来很老的心不是易于扩展。

让我们去Xamarin给我们一个双滑块!否则呢?

0

这是iOS的一个实现。希望能帮助到你!

public class UIRangeSlider : UIControl 
{ 
    public nfloat MinValue; 
    public nfloat MaxValue; 
    public nfloat MinRange; 
    public nfloat SelectedMinValue; 
    public nfloat SelectedMaxValue; 
    public Action<UIRangeSlider> ThumbChanged; 

    private UIImageView minThumb, maxThumb, track, trackBackground; 
    nfloat padding = 15.0f; 
    bool maxThumbOn = false; 
    bool minThumbOn = false; 
    nfloat distanceFromCenter; 

    public UIRangeSlider(CGRect frame) 
     : base(frame) 
    { 
     trackBackground = new UIImageView(Resources.SliderTrackBackground.StretchableImage(1, 1)); 
     trackBackground.Center = Center; 
     AddSubview(trackBackground); 

     track = new UIImageView(Resources.SliderTrackGreen); 
     track.Center = Center; 
     AddSubview(track); 

     minThumb = new UIImageView(Resources.SliderHandle, Resources.SliderHandle); 
     minThumb.Frame = new CGRect(0, 0, Frame.Size.Height, Frame.Size.Height); 
     minThumb.ContentMode = UIViewContentMode.Center; 
     AddSubview(minThumb); 

     maxThumb = new UIImageView(Resources.SliderHandle, Resources.SliderHandle); 
     maxThumb.Frame = new CGRect(0, 0, Frame.Size.Height, Frame.Size.Height); 
     maxThumb.ContentMode = UIViewContentMode.Center; 
     AddSubview(maxThumb); 
    } 

    public override void LayoutSubviews() 
    { 
     base.LayoutSubviews(); 
     minThumb.Center = new CGPoint(XForValue(SelectedMinValue), Center.Y - Frame.Top); 
     maxThumb.Center = new CGPoint(XForValue(SelectedMaxValue), Center.Y - Frame.Top); 

     // minThumb.Layer.BorderColor = UIColor.Red.CGColor; 
     // minThumb.Layer.BorderWidth = 1.0f; 

     // maxThumb.Layer.BorderColor = UIColor.Red.CGColor; 
     // maxThumb.Layer.BorderWidth = 1.0f; 

     UpdateTrackHighlight(); 
    } 

    private nfloat XForValue(nfloat val) 
    { 
     return (Frame.Size.Width - (padding * 2)) * ((val - MinValue)/(MaxValue - MinValue)) + padding; 
    } 

    private nfloat ValueForX(nfloat x) 
    { 
     return MinValue + (x - padding)/(Frame.Size.Width - (padding * 2)) * (MaxValue - MinValue); 
    } 

    public override bool ContinueTracking(UITouch uitouch, UIEvent uievent) 
    { 
     if (!minThumbOn && !maxThumbOn) 
      return true; 

     var touchPoint = uitouch.LocationInView(this); 
     if (minThumbOn) 
     { 
      var xValue = (nfloat)Math.Max(XForValue(MinValue), Math.Min(touchPoint.X - distanceFromCenter, XForValue(SelectedMaxValue - MinRange))); 
      var yValue = minThumb.Center.Y - Frame.Top; 
      minThumb.Center = new CGPoint(xValue, yValue); 
      SelectedMinValue = ValueForX(minThumb.Center.X); 
     } 

     if (maxThumbOn) 
     { 
      var xValue = (nfloat) Math.Min(XForValue(MaxValue), Math.Max(touchPoint.X - distanceFromCenter, XForValue(SelectedMinValue + MinRange))); 
      var yValue = maxThumb.Center.Y - Frame.Top; 
      maxThumb.Center = new CGPoint(xValue, yValue); 
      SelectedMaxValue = ValueForX(maxThumb.Center.X); 
     } 

     UpdateTrackHighlight(); 
     this.SetNeedsLayout(); 

     if (ThumbChanged != null) 
      ThumbChanged(this); 

     return true; 
    } 

    public override bool BeginTracking(UITouch uitouch, UIEvent uievent) 
    { 
     var touchPoint = uitouch.LocationInView(this); 

     if (minThumb.Frame.Contains(touchPoint)) 
     { 
      minThumbOn = true; 
      distanceFromCenter = touchPoint.X - minThumb.Center.X; 
     } 
     else if (maxThumb.Frame.Contains(touchPoint)) 
     { 
      maxThumbOn = true; 
      distanceFromCenter = touchPoint.X - maxThumb.Center.X; 
     } 

     return true; 
    } 

    public override void EndTracking(UITouch uitouch, UIEvent uievent) 
    { 
     minThumbOn = false; 
     maxThumbOn = false; 
    } 

    private void UpdateTrackHighlight() 
    { 
     track.Frame = new CGRect(minThumb.Center.X, 
      maxThumb.Center.Y - (track.Frame.Height/2), 
      maxThumb.Center.X - minThumb.Center.X, 
      track.Frame.Size.Height); 

     // track.Layer.BorderColor = UIColor.Black.CGColor; 
     // track.Layer.BorderWidth = 1.0f; 

     trackBackground.Frame = new CGRect(1, 
      maxThumb.Center.Y - (trackBackground.Frame.Height/2), 
      Frame.Width-2, trackBackground.Frame.Size.Height); 

     // trackBackground.Layer.BorderColor = UIColor.Red.CGColor; 
     // trackBackground.Layer.BorderWidth = 1.0f; 
    } 
} 
+0

谢谢!我会检查这一点。对于我目前的实现,我只是使用两个单独的滑块来进行Min和Max,因为我找不到双滑块的可接受解决方案。 – MattyMerrix