Slider Overview
The Slider class enables a user to select from a range of values by moving a value indicator, or Thumb, along a Track. For example, you typically create a volume control by using a Slider control. This topic introduces the Slider class.
This topic contains the following sections.
- What Is a Slider Control?
- Creating a Simple Slider
- Creating a Slider That Has a TickBar with Tick Marks
- Slider Styling
- Related Topics
What Is a Slider Control?
A Slider control has a minimum, a maximum, and an increment value. You can use the Value of a Slider to modify another adjustable value. For example, a Slider control can enable users to gradually modify volume. When users move the Thumb in one direction, the volume increases; when users move it the other direction, the volume decreases.
The following illustration shows an example of a horizontal Slider control.
.png)
The following illustration shows an example of a vertical Slider control.
.png)
Creating a Simple Slider
The following example shows how to create both a horizontal and vertical Slider control by using XAML.
<Slider Width="100" Value="0"
Orientation="Horizontal" HorizontalAlignment="Left"/>
<Slider Width="100" Height="30" Value="0" Orientation="Vertical"/>
The following example shows how to create a horizontal Slider that is added as the child element of a Canvas.
Slider hslider = new Slider();
hslider.Orientation = Orientation.Horizontal;
hslider.AutoToolTipPlacement =
AutoToolTipPlacement.TopLeft;
hslider.AutoToolTipPrecision = 2;
hslider.IsDirectionReversed = true;
hslider.Width = 100;
hslider.IsMoveToPointEnabled = false;
hslider.SelectionStart = 1.1;
hslider.SelectionEnd = 3;
hslider.IsSelectionRangeEnabled = false;
hslider.IsSnapToTickEnabled = false;
hslider.TickFrequency = 3;
hslider.TickPlacement = TickPlacement.Both;
cv1.Children.Add(hslider);
cv1.Children.Clear()
Dim hslider As New Slider()
hslider.Orientation = Controls.Orientation.Horizontal
hslider.AutoToolTipPlacement = AutoToolTipPlacement.TopLeft
hslider.AutoToolTipPrecision = 2
hslider.IsDirectionReversed = True
hslider.Width = 100
hslider.IsMoveToPointEnabled = False
hslider.SelectionStart = 1.1
hslider.SelectionEnd = 3
hslider.IsSelectionRangeEnabled = False
hslider.TickFrequency = 3
hslider.TickPlacement = TickPlacement.Both
hslider.Value = 0
cv1.Children.Add(hslider)
For the complete sample, see Slider Sample.
Creating a Slider That Has a TickBar with Tick Marks
When you create a Slider, the default style provides a Thumb, which is used to change the value, and a TickBar that has tick marks. Primary tick marks are displayed at the minimum and maximum values; secondary marks are displayed at positions that are determined by the value of the TickFrequency property.
The following example shows how to add tick marks and tooltips that display the value of the Slider as you move the Thumb control.
<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 place tick marks at non-uniform positions.
<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.
Slider Styling
You can use styles to change the behavior and the appearance, such as the layout, of a Slider control. The following example demonstrates several ways to add styles to a Slider control.
The first example defines a style called Horizontal that changes the background of a horizontal Slider and adds tick marks and tooltips.
<Style x:Key="Horizontal" TargetType="{x:Type Slider}">
<Setter Property = "Background" Value = "Red"/>
<Setter Property = "IsSnapToTickEnabled" Value ="True"/>
<Setter Property = "TickPlacement" Value ="BottomRight"/>
<Setter Property = "AutoToolTipPlacement" Value ="BottomRight"/>
<Setter Property = "TickFrequency" Value ="1"/>
</Style>
The following example uses Triggers that change the appearance of a Slider in response to a mouse-over event that is raised on the Slider control. When a user moves the mouse pointer over the Slider, the background color changes and tick marks appear.
<Style x:Key="Triggers" TargetType="{x:Type Slider}">
<Style.Triggers>
<Trigger Property="Slider.IsMouseOver" Value="True">
<Setter Property = "Background" Value="Green"/>
<Setter Property = "IsSnapToTickEnabled" Value ="True"/>
<Setter Property = "TickPlacement" Value ="TopLeft"/>
<Setter Property = "TickFrequency" Value ="1"/>
</Trigger>
</Style.Triggers>
</Style>
For the complete sample, see Slider Styles Sample.