Can I bind a RangeSlider (from WPF extended toolkit) to a datetime property of ObservableCollection?

Question

I need to present a range slider of dates (WPF). Is it possible to bind a RangeSlider to a DateTime property in an ObservableCollection ?

EDIT: I tried the following with no success:

        <xctk:RangeSlider HorizontalAlignment="Left" Margin="101,10,0,0" VerticalAlignment="Top" Width="233" Maximum="{Binding MaxRange}" Minimum="{Binding MinRange}"/>

MinRange and MaxRange are DateTime objects in my ViewModel

Answer 1

No. DateTime is a value type, and therefore immutable. And bindings cannot replace an object at index N within a collection with a different object.

Bindings can alter the value of properties. That's all they do. Period.

In your case, if you wish to have a range slider describe a period of time, you need to create a class which has a start value and an end value exposed as properties.

public class Range : INotifyPropertyChanged
{
    // INPC impl omitted because this is c# like pseudocode
    public double StartTime {get;set;}
    public double EndTime {get;set;}
    public TimeSpan ToTimeSpan() { return YourConversionLogicLol(); }
}

IIRC, range slider values are doubles. It's up to you to define what the double values mean in terms of time, and convert from the values bound in the UI to whatever you need (Range != DateTime, a range is two points in time--start & end, so you confuse me). Ticks from the epoch, or sommet, I dunno.

Answer 2

You can use OADate of DateTime. This method convert datetime to double value.

Xaml code:

  <xctk:RangeSlider x:Name="_rangeSlider"


                          Minimum="{Binding StartPointOfSlider, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                          Maximum="{Binding StopPointOfSlider}"
                          LowerValue="{Binding StartTimeOnSlide}"
                          HigherValue="{Binding StopTimeOnSlide}"
                          Step="1"
                          Orientation="Horizontal"
                          LowerThumbBackground="#FFF0F0F0"
                          HigherThumbBackground="#FFF0F0F0"
                          RangeBackground="Transparent"
                          HigherRangeBackground="Transparent"
                          LowerRangeBackground="Transparent">

        </xctk:RangeSlider>

And the code behind:

        public double StartTimeOnSlide
    {
        get { return _startTimeOnSlide; }
        set
        {
            Set(() => StartTimeOnSlide, ref _startTimeOnSlide, value);

                SetSelectedGrapHStartIntervalExecute();


        }
    }

    public double StopTimeOnSlide
    {
        get { return _stopTimeOnSlide; }
        set
        {
            Set(() => StopTimeOnSlide, ref _stopTimeOnSlide, value);
            SetSelectedGrapHStopIntervalExecute();
        }
    }

    public double StartPointOfSlider
    {
        get { return _startPointOfSlider; }
        set
        {
            Set(() => StartPointOfSlider, ref _startPointOfSlider, value);
            RaisePropertyChanged();
        }
    }

    public double StopPointOfSlider
    {
        get { return _stopPointOfSlider; }
        set
        {
            Set(() => StopPointOfSlider, ref _stopPointOfSlider, value);
            RaisePropertyChanged();
        }
    }

And the intizial part:

StartTimeOnSlide = StartDateTime.ToOADate();
            StopTimeOnSlide = StopDateTime.ToOADate();