CODEWITHSUNDEEP
wpfcontrolsslider
cplotts
cplotts

Reputation: 14252

How do you make a WPF slider snap only to discrete integer positions?

All too often I want a WPF Slider control that behaves like the System.Windows.Forms.TrackBar of old. That is, I want a slider that goes from X to Y but only allows the user to move it in discrete integer positions.

How does one do this in WPF since the Value property on the Slider is double?

Upvotes: 139

Views: 109812

Answers (4)

cplotts
cplotts

Reputation: 14252

The simple answer is that you take advantage of the IsSnapToTickEnabled and TickFrequency properties. That is, turn snapping to ticks on and set the tick frequency to 1.

Or, in other words ... take advantage of ticks ... but you don't necessarily have to show the ticks that you are snapping to.

Check out the following piece of xaml:

<Slider
    Orientation="Vertical"
    Height="200"
    Minimum="0"
    Maximum="10"
    Value="0"
    IsSnapToTickEnabled="True"
    TickFrequency="1"
/>

Upvotes: 208

mkjeldsen
mkjeldsen

Reputation: 2180

The snap trick is handy but has limitations, for instance if you want to only show a subset of valid ticks. I've had success with two alternatives: either bind to an integer or round the new value. Here is a combined example:

public int MyProperty { get; set; }

private void slider1_ValueChanged(object sender,
    RoutedPropertyChangedEventArgs<double> e)
{
    (sender as Slider).Value = Math.Round(e.NewValue, 0);
}

<Slider
    Name="slider1"
    TickPlacement="TopLeft"
    AutoToolTipPlacement="BottomRight"
    ValueChanged="slider1_ValueChanged"
    Value="{Binding MyProperty}"
    Minimum="0" Maximum="100" SmallChange="1" LargeChange="10"
    Ticks="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100"/>

I have no idea how the performance of either compares to the snap trick but I haven't had any trouble*.

*If you also bind the value of the slider to a type of text field you will experience that, every once in a while if using the mouse, the text field will show decimals. If you also bind to an int at the same time the empty string will cause a conversion exception to be thrown that briefly bogs down the UI. These issues haven't been severe enough for me to look for solutions.

Upvotes: 12

Dave
Dave

Reputation: 15016

For those that want to snap to specific positions, you can also use the Ticks property:

<Slider Minimum="1" Maximum="500" IsSnapToTickEnabled="True" Ticks="1,100,200,350,500" />

Upvotes: 52

Brian Stewart
Brian Stewart

Reputation: 9277

If you set your tick marks in the right way, you can use IsSnapToTickEnabled. This worked pretty well for me. See MSDN for details.

Upvotes: 108

Related Questions