How to: Create a Slider with a TickBar

This example shows how to create a Slider control that has tick marks.

Example

When you create a Slider, the default style provides a TickBar that has tick marks. The TickBar displays when you set the TickPlacement property to a value other than None, which is the default value.

The following example shows how to create a Slider with a TickBar that displays tick marks. The TickPlacement and TickFrequency properties define the location of the tick marks and the interval between them. When you move the Thumb, tooltips display the value of the Slider. The AutoToolTipPlacement property defines where the tooltips occur. The Thumb movements correspond to the location of the tick marks because IsSnapToTickEnabled is set to true.

<Slider Width="100" Value="50" Orientation="Horizontal" HorizontalAlignment="Left" 
 IsSnapToTickEnabled="True" Maximum="9" TickPlacement="BottomRight" 
 AutoToolTipPlacement="BottomRight" TickFrequency="3"
 AutoToolTipPrecision="2" IsDirectionReversed="False"
 IsMoveToPointEnabled="False"/>

The following example shows how to use the Ticks property to create a tick mark collection. The example uses the collection to place tick marks at non-uniform positions along the Slider.

 <Slider Width="100" Value="50" Orientation="Horizontal" HorizontalAlignment="Left" 
IsSnapToTickEnabled="True" Maximum="3" TickPlacement="BottomRight" 
AutoToolTipPlacement="BottomRight" AutoToolTipPrecision="2" 
Ticks="0, 1.1, 2.5, 3"/>

For the complete sample, see Slider Sample.

See Also

Tasks

How to: Use a Thumb to Enable Dragging

Reference

Slider
TickBar
TickPlacement

Concepts

Slider Overview

Other Resources

Slider How-to Topics
Slider Samples