Xamarin跨平台双滑块

Question

有没有人听说过Xamarin表单的双面滑块？我正在找，但似乎找不到。原生的Xamarin Forms Slider非常漂亮，但它只支持一个标记。我要找一个有两个标记的滑块，每边一个。

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

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

我在这里找到了范围滑块

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

不幸的是，这个控件有一个iOS 4的外观，不能根据我读到的内容进行样式设置或视觉上的更新。

Answer 1

答案是真的没有任何本机的东西，你可以尝试扩展本机滑块，或者将两个滑块堆叠在一起以获得想要的效果。

您还可以查看

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

但它看起来很旧，不容易扩展。

让我们去Xamarin给我们一个双滑块！还是其他人？？！

Answer 2

下面是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;
    }
}