Question

有没有人听说过Xamarin Forms的双面滑块？我正在寻找，但似乎无法找到一个。原生Xamarin Forms Slider外观非常漂亮，但它只支持1个标记。我正在寻找一个滑块，每侧有两个标记。

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

任何帮助都会受到赞赏。

我在这里找到了Range Slider

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

令人遗憾的是，该控件具有iOS 4外观，无法通过我阅读的内容进行风格化或更新。

Answer 1

答案是没有任何原生的东西，你可以尝试扩展原生滑块或将两个滑块堆叠在一起以产生所需的效果。

你也可以看看

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

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

让我们去Xamarin给我们一个双滑块!!!或者elseeee ??！

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;
    }
}

Xamarin跨平台双滑块

2 个答案: