BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Selection Controls - Slider

The seventy-third part of the Windows Presentation Foundation Fundamentals tutorial looks at the last of the WPF selection controls. This article describes the Slider, which lets users select a value from within a fixed range.

Mouse Movement Mode

The normal behaviour of a slider when the track is clicked is for the thumb to move a small amount in the direction of the mouse pointer. The amount moved is determined by the SmallChange property, which is defined in the RangeBase base class. Often it is desirable to change the click behaviour so that the thumb moves directly to the position of the mouse pointer. This can be achieved by setting the IsMoveToPointEnabled to true.

To demonstrate, replace the XAML for the alpha slider:

<Slider Name="AlphaSlider"
        Grid.Row="3"
        Orientation="Vertical"
        HorizontalAlignment="Right"
        IsDirectionReversed="True"
        IsMoveToPointEnabled="True"
        Minimum="0"
        Maximum="255"
        Value="255"
        ValueChanged="SliderChanged"/>

Run the program and click the track of the sliders to see the new behaviour.

Tick Marks

The sliders that we've seen so far are ideal when accuracy is not required and where a graphical representation of a value is acceptable. Sometimes it is necessary to allow values to be selected more precisely. In these situations, tick marks can help.

Tick marks are small lines placed along the length of a Slider, similar to the marks found on a ruler. They can appear at regular intervals or specific positions, depending upon your requirements. They can be used as a visual representation only, or you can specify that only values at tick marks are selectable.

Adding Regular Tick Marks

You can add regularly spaced tick marks to a Slider by setting two properties. The first of these is TickPlacement. This property specifies where the tick marks are rendered, using a value from the TickPlacement enumeration. The following four values are permitted:

  • None. Tick marks are hidden. This is the default value for the property.
  • TopLeft. Tick marks are placed above a horizontal slider or to the left of a vertical one.
  • BottomRight. Tick marks are placed below a horizontal slider or to the right of a vertical one.
  • Both. Tick marks are shown above and below horizontal sliders and along both sides of vertical controls.

The second property allows you to set the distance between regularly-spaced tick marks. TickFrequency, like Minimum and Maximum, is set to a double. The first tick mark appears at the minimum position and further marks are equally spaced according to the frequency value.

For the red, green and blue sliders, let's set the frequency to sixteen. This will show seventeen tick marks along the length of each control. Replace the XAML for the first three sliders with the code below:

<Slider Name="RedSlider"
        Grid.Column="1"
        Minimum="0"
        Maximum="255"
        TickFrequency="16"
        TickPlacement="BottomRight"
        ValueChanged="SliderChanged"/>
<Slider Name="GreenSlider"
        Grid.Row="1"
        Grid.Column="1"
        Minimum="0"
        Maximum="255"
        TickFrequency="16"
        TickPlacement="BottomRight"
        ValueChanged="SliderChanged"/>
<Slider Name="BlueSlider"
        Grid.Row="2"
        Grid.Column="1"
        Minimum="0"
        Maximum="255"
        TickFrequency="16"
        TickPlacement="BottomRight"
        ValueChanged="SliderChanged"/>

Run the program to see the results. Note also that the shape of the thumbs is updated. Rather than a simple rectangular block, the end pointing towards the tick marks is now pointed for more accurate selection.

WPF Slider control regular tick marks

26 June 2014