User Controls – andora.us blog

WPF Date Range Double Slider Control (Part 2)

January 16, 2011 / By Greg Andora / In C#, WPF / 3 Comments

As I mentioned in my introduction to this series, I’m going over various aspects of how I implemented a control that allows a user to choose a DateTime range using a double slider control. In Part One, I covered the basics of what I did to the control templates, put the slider together and showed the IValueConverters I used to handle the conversions from doubles to DateTime and doubles to TimeSpans. In this article, I’ll be talking about what I did to keep the upper value and the lower value sliders from crossing each other. The source for the control and a sample project can be found at CodePlex

My first thought doing this was to play it simple and bind the lower slider’s Maximum to the upper slider’s current value and the and the upper sliders Minimum to the lower’s current value. While this seemed logical to me, when I implemented it, it put the two sliders on two totally separate scales and it failed miserably. Not only were the sliders able to cross, since the scales were constantly changed, while I would move the lower slider, the upper slider would be moving (and not changing value).

My second attempt was much better, but still didn’t work as expected. In this attempt, I subscribed to the ValueChanged event for each of the sliders. In these event handlers, I had a piece of code as shown in “Attempt 2: Fail” that was setting the slider controls values so they wouldn’t cross each other (for long) and then setting dependency properties (UpperValue and LowerValue) to those upper and lower values. This failed because I wasn’t setting the upper slider’s value to something greater than the lower slider’s value until after this code ran. To a user, this would be acceptable, you can’t actually see the values cross. However, I was using this to help zoom in and out of a charting control and once they crossed, even for a few milliseconds, the charting control would blow up on me. It was quite messy…line fragments, points, and data everywhere.

Attempt 2:  Fail

private void LowerSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    UpperSlider.Value = Math.Max(UpperSlider.Value, LowerSlider.Value + oneSecond);
    LowerValue = new DateTime((long)LowerSlider.Value);
    UpperValue = new DateTime((long)UpperSlider.Value);
}

So, finally, my 3rd attempt I hit gold. Why was I setting LowerValue and UpperValue be set by the sliders when I was also setting them in the ValueChanged events? So I changed my bindings in the sliders to OneWay bindings so I have complete control of the range values and the sliders can suggest was my new UpperValue and LowerValue should be, but I get the final decision in my event handlers. In my event handlers, I check if the slider values have passed each other and set the dependency properties to appropriate values that make sure that the UpperValue is greater than the LowerValue.

Slider Control Template

private void UpperSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    LowerSlider.Value = Math.Max(Math.Min(UpperSlider.Value – oneSecond, LowerSlider.Value), Minimum.Ticks);
 
    var _upperValue = new DateTime((long)UpperSlider.Value);
    var _lowerValue = new DateTime((long)LowerSlider.Value);
 
    if (UpperValue > _lowerValue)
    {
        LowerValue = _lowerValue;
        UpperValue = _upperValue;
    }
    else
    {
        UpperValue = _upperValue;
        LowerValue = _lowerValue;
    }
}

WPF Date Range Double Slider Control (Part 1)

January 11, 2011 / By Greg Andora / In C#, WPF / Leave Comment

As I mentioned in my introduction to this series, I’m going over various aspects of how I created a DateTime Range slider control. In this article, I’m going to be going over the basics of creating the user control. Source for this project can be found on CodePlex.

First, to get two thumbs onto the slider, I overrode the control template of the regular slider with a template called “simpleSlider” to get rid of the track of each slider as well as some other default pieces of the base control template such as the repeater buttons. With these things there, one or the other of the sliders would sit on top of the other and really just mess with my users’ experience.

Slider Control Template

<ControlTemplate x:Key=“simpleSlider” TargetType=”{x:Type Slider}“>
    <Border SnapsToDevicePixels=“true” BorderBrush=”{TemplateBinding BorderBrush}“ BorderThickness=”{TemplateBinding BorderThickness}“>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height=“Auto”/>
                <RowDefinition Height=“Auto” MinHeight=”{TemplateBinding MinHeight}“/>
                <RowDefinition Height=“Auto”/>
            </Grid.RowDefinitions>
 
            <Rectangle x:Name=“PART_SelectionRange”/>
 
            <Track x:Name=“PART_Track” Grid.Row=“1”>
                <Track.Thumb>
                    <Thumb x:Name=“Thumb” Style=”{StaticResource ResourceKey=HorizontalSliderThumbStyle}“ />
                </Track.Thumb>
            </Track>
        </Grid>
    </Border>
</ControlTemplate>

Then my control is made with the two sliders that use the “simpleSlider” template and a single Border control to be my track for the two sliders:

DateTime Range Slider

<Grid VerticalAlignment=“Center” Background=“Transparent”>
    <Border BorderThickness=“0,1,0,0” BorderBrush=“DarkGray” VerticalAlignment=“Bottom” Height=“1” HorizontalAlignment=“Stretch”
           Margin=“0,0,0,10”/>
 
    <Slider x:Name=“LowerSlider” VerticalAlignment=“Top” IsEnabled=”{Binding ElementName=root, Path=IsLowerSliderEnabled, Mode=TwoWay}“
           Minimum=”{Binding ElementName=root, Path=Minimum, Converter={StaticResource ResourceKey=dtdConverter}}“
           Maximum=”{Binding ElementName=root, Path=Maximum, Converter={StaticResource ResourceKey=dtdConverter}}“
           Value=”{Binding ElementName=root, Path=LowerValue, Mode=OneWay, Converter={StaticResource ResourceKey=dtdConverter}}“
           Template=”{StaticResource simpleSlider}“
           Margin=“0,0,10,0” 
           SmallChange=”{Binding ElementName=root, Path=SmallChange, Converter={StaticResource ResourceKey=timespanToDoubleConverter}}“ 
           LargeChange=”{Binding ElementName=root, Path=LargeChange, Converter={StaticResource ResourceKey=timespanToDoubleConverter}}“ 
            />
 
    <Slider x:Name=“UpperSlider” IsEnabled=”{Binding ElementName=root, Path=IsUpperSliderEnabled, Mode=TwoWay}“
           Minimum=”{Binding ElementName=root, Path=Minimum, Converter={StaticResource ResourceKey=dtdConverter}}“
           Maximum=”{Binding ElementName=root, Path=Maximum, Converter={StaticResource ResourceKey=dtdConverter}}“
           Value=”{Binding ElementName=root, Path=UpperValue, Mode=OneWay, Converter={StaticResource ResourceKey=dtdConverter}}“
           Template=”{StaticResource simpleSlider}“ 
           Margin=“10,0,0,0”
           SmallChange=”{Binding ElementName=root, Path=SmallChange, Converter={StaticResource ResourceKey=timespanToDoubleConverter}}“ 
           LargeChange=”{Binding ElementName=root, Path=LargeChange, Converter={StaticResource ResourceKey=timespanToDoubleConverter}}“ 
            />
</Grid>

Mainly because I didn’t want to spend the time (at this point) dealing with making this a slider that could handle more than just a DateTime range, the Minimum, Maximum, and Value properties of the sliders are using an IValueConverter to handle the conversion between the doubles the sliders expose to DateTime values. The SmallChange and LargeChange properties are converted from TimeSpans my control expects to doubles that the slider controls expect.

DateTime to Double Converter

public class DateTimeDoubleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        DateTime dt = DateTime.Parse(value.ToString());
        return dt.Ticks;
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double d = double.Parse(value.ToString());
        return new DateTime((long)d);
    }
}

TimeSpan to Double Converter

public class TimeSpanToDoubleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        TimeSpan givenValue = (TimeSpan)value;
        return givenValue.Ticks;
    }
 
    public object ConvertBack(object value, Type targetType,
       object parameter, System.Globalization.CultureInfo culture)
    {
        return new TimeSpan(((long)value));
    }
}

WPF Date Range Double Slider Control (Introduction)

January 10, 2011 / By Greg Andora / In C#, WPF / 14 Comments

For a project I’m working on, I needed a way to select a date range. One of my first thoughts was to use a double slider only to find that one didn’t exist with the OOTB controls so I decided to roll my own. In order to solidify things in my mind as well as help anyone out there looking for resources on various aspects of development in WPF, I thought I’d write about my experience creating this control.

I’ll be adding blog entries in the next week or two to describe how I accomplished implemenation of some of the features I wanted in my control:

Create a two-thumbed slider control to choose a DateTime range. (Part 1)
Don’t let the the lower slider or upper slider pass each other. I was creating this to use with a graph and if the sliders passed each other even for a millisecond, the graph would throw an exception. (Part 2)
Dependency Properties (Part 3)

I did lose some of the functionality of the regular slider in my first version of this control, such as clicking to the right or left of the thumb to change the value and displaying the slider in a vertical format, but overall, I’m happy with this control as it is so far (and so was my client.)

Because I wanted to continue work on this control and make it easy to download and use the code, the source for the control and a sample project are available at CodePlex.