Двойной слайдер Xamarin Cross Platform

Кто-нибудь слышал о двустороннем слайдере для Xamarin Forms? Я ищу, но не могу найти. Нативный слайдер Xamarin Forms Slider выглядит очень красиво, но поддерживает только 1 маркер. Я ищу слайдер с двумя маркерами по одному с каждой стороны.

Кто-нибудь слышал об этом или знает, как расширить Xamarin Control, чтобы добавить аналогичные функции.

Любая помощь будет оценена в этом вопросе.

Я нашел здесь ползунок диапазона

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

К сожалению, элемент управления выглядит как iOS 4 и не может быть стилизован или обновлен визуально на основе того, что я прочитал.


person MattyMerrix    schedule 09.09.2015    source источник
comment
Вы нашли решение? Не могли бы вы опубликовать?   -  person LCJ    schedule 16.08.2017
comment
Нет, я использовал два ползунка на двух разных линиях, чтобы добиться того, чего хотел.   -  person MattyMerrix    schedule 16.08.2017


Ответы (2)


Ответ заключается в том, что на самом деле нет ничего родного, вы можете попробовать расширить собственный ползунок или сложить два ползунка рядом друг с другом, чтобы получить желаемый эффект.

Также вы можете проверить

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

но он выглядит довольно старым и его нелегко расширить.

Пойдем, Xamarin даст нам двойной слайдер !!! Или ещееее ??!

person MattyMerrix    schedule 17.09.2015

Вот реализация для 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;
    }
}
person Corneliu Serediuc    schedule 29.03.2016
comment
Спасибо!!! Я проверю это. Для моей текущей реализации я просто использую два отдельных ползунка для Min и Max, так как я не смог найти приемлемого решения для двойного ползунка. - person MattyMerrix; 30.03.2016