Share via


Slider Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

This topic describes the styles and templates for the Slider control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

Slider Parts

The following table lists the named parts for the Slider control.

Slider Part

Type

Description

HorizontalTemplate

FrameworkElement

The root of the horizontal slider template.

HorizontalTrackLargeChangeIncreaseRepeatButton

RepeatButton

The large increase repeat button for the horizontal slider template.

HorizontalTrackLargeChangeDecreaseRepeatButton

RepeatButton

The large decrease repeat button for the horizontal slider template.

HorizontalThumb

Thumb

The Thumb for the dragging track of the horizontal slider template.

VerticalTemplate

FrameworkElement

The root of the vertical slider template.

VerticalTrackLargeChangeIncreaseRepeatButton

RepeatButton

The large increase repeat button for the vertical slider template.

VerticalTrackLargeChangeDecreaseRepeatButton

RepeatButton

The large decrease repeat button for the vertical slider template.

VerticalThumb

Thumb

The Thumb for the dragging track of the vertical slider template.

Slider States

The following table lists the visual states for the Slider control.

VisualState Name

VisualStateGroup Name

Description

Normal

CommonStates

The default state.

MouseOver

CommonStates

The mouse pointer is positioned over the control.

Disabled

CommonStates

The control is disabled.

Focused

FocusStates

The control has focus.

Unfocused

FocusStates

The control does not have focus.

Thumb Parts

The Thumb control does not have any named parts.

Thumb States

The following table lists the visual states for the Thumb class.

VisualState Name

VisualStateGroup Name

Description

Normal

CommonStates

The default state.

MouseOver

CommonStates

The mouse pointer is positioned over the control.

Pressed

CommonStates

The control is pressed.

Disabled

CommonStates

The control is disabled.

Focused

FocusStates

The control has focus.

Unfocused

FocusStates

The control does not have focus.

Default Style and Template

The following shows the XML namespace mapping that you have to specify when you work with styles and templates.

<!-- XML Namespace mapping. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

Note   The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.

The following XAML show the default styles and templates for the Slider control and the Thumb class.

<Style TargetType="Slider">
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="Maximum" Value="10" />
      <Setter Property="Minimum" Value="0" />
      <Setter Property="Value" Value="0" />
      <Setter Property="BorderBrush">
          <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="#FFA3AEB9" Offset="0"/>
                  <GradientStop Color="#FF8399A9" Offset="0.375"/>
                  <GradientStop Color="#FF718597" Offset="0.375"/>
                  <GradientStop Color="#FF617584" Offset="1"/>
              </LinearGradientBrush>
          </Setter.Value>
      </Setter>
      <Setter Property="IsTabStop" Value="False" />
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="Slider">
                  <Grid x:Name="Root">
                      <Grid.Resources>
                          <ControlTemplate x:Key="RepeatButtonTemplate">
                              <Grid x:Name="Root" Opacity="0" Background="Transparent"/>
                          </ControlTemplate>
                      </Grid.Resources>
                      <vsm:VisualStateManager.VisualStateGroups>
                          <vsm:VisualStateGroup x:Name="CommonStates">
                              <vsm:VisualState x:Name="Normal"/>
                              <vsm:VisualState x:Name="MouseOver"/>
                              <vsm:VisualState x:Name="Disabled">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                                          <DiscreteObjectKeyFrame KeyTime="0">
                                              <DiscreteObjectKeyFrame.Value>
                                                  <Visibility>Visible</Visibility>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                                          <DiscreteObjectKeyFrame KeyTime="0">
                                              <DiscreteObjectKeyFrame.Value>
                                                  <Visibility>Visible</Visibility>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                                          <DiscreteObjectKeyFrame KeyTime="0">
                                              <DiscreteObjectKeyFrame.Value>
                                                  <Visibility>Visible</Visibility>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>

                      <!-- Horizontal Template -->
                      <Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}">
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto"/>
                              <ColumnDefinition Width="Auto"/>
                              <ColumnDefinition Width="*"/>
                          </Grid.ColumnDefinitions>

                          <!-- Track Layer -->
                          <Rectangle x:Name="TrackRectangle" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Fill="#FFE6EFF7" Grid.Column="0" Grid.ColumnSpan="3" Height="3" RadiusX="1" RadiusY="1" Margin="5,0,5,0" />
                          <Rectangle x:Name="HorizontalTrackRectangleDisabledOverlay" Visibility="Collapsed"  Fill="White" Opacity=".55" Grid.Column="0" Grid.ColumnSpan="3" Height="3" RadiusX="1" RadiusY="1" Margin="5,0,5,0" />
                          <!-- Repeat Buttons + Thumb -->
                          <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="0"/>
                          <Thumb Height="18" x:Name="HorizontalThumb" Width="11" Grid.Column="1" IsTabStop="True"/>
                          <Rectangle x:Name="ThumbDisabledOverlay" RadiusX="2" RadiusY="2"  Width="11" Grid.Column="1" Fill="White" Opacity=".55" Visibility="Collapsed"/>
                          <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="2"/>
                      </Grid>

                      <!-- Vertical Template -->
                      <Grid x:Name="VerticalTemplate" Visibility="Collapsed" Background="{TemplateBinding Background}">
                          <Grid.RowDefinitions>
                              <RowDefinition Height="*"/>
                              <RowDefinition Height="Auto"/>
                              <RowDefinition Height="Auto"/>
                          </Grid.RowDefinitions>

                          <!-- Track Layer -->
                          <Rectangle Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Fill="#FFE6EFF7" Grid.Row="0" Grid.RowSpan="3" Width="3" RadiusX="1" RadiusY="1" Margin="0,5,0,5" />
                          <Rectangle x:Name="VerticalTrackRectangleDisabledOverlay" Visibility="Collapsed"  Fill="White" Opacity=".55" Grid.Row="0" Grid.RowSpan="3" Width="3" RadiusX="1" RadiusY="1" Margin="0,5,0,5" />
                          <!-- Repeat Buttons + Thumb -->
                          <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" Width="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Row="2"/>
                          <Thumb Height="11" x:Name="VerticalThumb" Width="18" Grid.Row="1" IsTabStop="True"/>
                          <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" Width="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Row="0"/>
                      </Grid>

                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>
<Style TargetType="Thumb">
      <Setter Property="Background" Value="#FF1F3B53"/>
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="IsTabStop" Value="False"/>
      <Setter Property="BorderBrush">
          <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="#FFA3AEB9" Offset="0"/>
                  <GradientStop Color="#FF8399A9" Offset="0.375"/>
                  <GradientStop Color="#FF718597" Offset="0.375"/>
                  <GradientStop Color="#FF617584" Offset="1"/>
              </LinearGradientBrush>
          </Setter.Value>
      </Setter>
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="Thumb">
                  <Grid>
                      <vsm:VisualStateManager.VisualStateGroups>
                          <vsm:VisualStateGroup x:Name="CommonStates">
                              <vsm:VisualState x:Name="Normal"/>
                              <vsm:VisualState x:Name="MouseOver">
                                  <Storyboard>
                                      <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                      <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F2FFFFFF"/>
                                      <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#CCFFFFFF"/>
                                      <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#7FFFFFFF"/>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Pressed">
                                  <Storyboard>
                                      <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FF6DBDD1"/>
                                      <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                      <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#D8FFFFFF"/>
                                      <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#C6FFFFFF"/>
                                      <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#8CFFFFFF"/>
                                      <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#3FFFFFFF"/>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Disabled">
                                  <Storyboard>
                                      <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                          <vsm:VisualStateGroup x:Name="FocusStates">
                              <vsm:VisualState x:Name="Focused">
                                  <Storyboard>
                                      <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Unfocused"/>
                          </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>
                      <Border x:Name="Background" CornerRadius="2" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                          <Grid Background="{TemplateBinding Background}"  Margin="1">
                              <Border Opacity="0"  x:Name="BackgroundAnimation" Background="#FF448DCA" />
                              <Rectangle x:Name="BackgroundGradient" >
                                  <Rectangle.Fill>
                                      <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                          <GradientStop Color="#FFFFFFFF" Offset="0" />
                                          <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                          <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                          <GradientStop Color="#C6FFFFFF" Offset="1" />
                                      </LinearGradientBrush>
                                  </Rectangle.Fill>
                              </Rectangle>
                          </Grid>
                      </Border>
                      <Rectangle x:Name="DisabledVisualElement" RadiusX="2" RadiusY="2" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                      <Rectangle x:Name="FocusVisualElement" RadiusX="1" RadiusY="1" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>