How to: Customize the Ticks on a Slider
Collapse the table of content
Expand the table of content

How to: Customize the Ticks on a Slider

This example shows how to create a Slider control 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 hslider = new Slider();
hslider.Width = 100;
hslider.Orientation = Orientation.Horizontal;
hslider.IsSnapToTickEnabled = true;
hslider.Minimum = 1;
hslider.Maximum = 20;
hslider.TickPlacement = TickPlacement.Both;
hslider.TickFrequency = 2;
hslider.AutoToolTipPlacement =
<Slider Name="slider1" 
        Orientation="Horizontal" HorizontalAlignment="Left" 
        IsSnapToTickEnabled="True" Minimum="1" Maximum="20" 
        TickPlacement="Both"  TickFrequency="2"

The following example shows how to use the Ticks property to create tick marks along the Slider at irregular intervals.

<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 with Data Binding Sample.

Community Additions

© 2016 Microsoft