Quantcast
Channel: wpftoolkit Discussions Rss Feed
Viewing all articles
Browse latest Browse all 2157

New Post: Using range slider to show start and stop times

$
0
0
Hi,

Yes you can do this with the RangeSlider.
Define a RangeSlider going from 0 to 1440 (number of minutes in a day).
Set a Step of 5 (Clicking on the track will increase or decrease the thumbs by 5 minutes)
Set IsSnapToTickEnabled to true and TickFrequency to 5 so that sliding the thumb will only snaps on 5 minutes.
Use a converter to return a DateTime value, which could be formatted in a TextBlock :
<xctk:RangeSlider x:Name="_rangeSlider"
                      Minimum="0"
                      Maximum="1440"
                      HigherValue="80"
                      LowerValue="50"
                      Step="5"
                      IsSnapToTickEnabled="True"
                      TickFrequency="5"/>

    <TextBlock Text="{Binding LowerValue, ElementName=_rangeSlider, Converter={StaticResource MyConverter}, StringFormat={}{0:hh:mm tt}}" />
    <TextBlock Text="{Binding HigherValue, ElementName=_rangeSlider, Converter={StaticResource MyConverter}, StringFormat={}{0:hh:mm tt}}" />
  public class MyConverter : IValueConverter
  {
    public object Convert( object value, Type targetType, object parameter, CultureInfo culture )
    {
      if( value is double )
      {
        return DateTime.Today.AddMinutes( (double)value );
      }
  
      return null;
    }

    public object ConvertBack( object value, Type targetType, object parameter, CultureInfo culture )
    {
      throw new NotImplementedException();
    }
  }
Please note that you need to set a background for LowerRangeBackground and HigherRangeBackground in order to be able to click the tracks. They are currently null, you can set them to Transparent or any other Color. This will be fixed in v3.5.

Viewing all articles
Browse latest Browse all 2157

Latest Images

Trending Articles



Latest Images