title: Styling XAML Slider control - how do I stop Thumb background changing on PointerOver?
body: <p>I'm trying to re-style the Slider control using XAML for a Metro style app - it's supposed to look like a red bus that the user drags along a gray strip, i.e.:</p>
  
  <p><img src="https://i.stack.imgur.com/R55BE.png" alt="enter image description here"></p>
  
  <p>I have extracted the Style using Visual Studio and re-styled the Slider control as below.
  Unfortunately, whenever I hover the mouse over the slider, the thumb is replaced with a grey rectangle, even though I have specifically removed all the Storyboard items from the VisualState "PointerOver" group.</p>
  
  <p><img src="https://i.stack.imgur.com/aIuZk.png" alt="enter image description here"></p>
  
  <p>What have I missed?  XAML is below.  If I need to modify another template (e.g. Thumb?) then please provide steps as to how to extract this template, since Visual Studio does not seem to be exposing any more control templates to me besides the one below.</p>
  
  <p>
      </p>
  
  <pre><code>    &lt;Style x:Key="BusRouteSliderStyle" TargetType="Slider"&gt;
          &lt;Setter Property="Background" Value="{StaticResource SliderTrackBackgroundThemeBrush}"/&gt;
          &lt;Setter Property="BorderBrush" Value="{StaticResource SliderBorderThemeBrush}"/&gt;
          &lt;Setter Property="BorderThickness" Value="{StaticResource SliderBorderThemeThickness}"/&gt;
          &lt;Setter Property="Foreground" Value="{StaticResource SliderTrackDecreaseBackgroundThemeBrush}"/&gt;
          &lt;Setter Property="ManipulationMode" Value="None"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="Slider"&gt;
                      &lt;Grid Margin="{TemplateBinding Padding}"&gt;
                          &lt;VisualStateManager.VisualStateGroups&gt;
                              &lt;VisualStateGroup x:Name="CommonStates"&gt;
                                  &lt;VisualState x:Name="Normal"/&gt;
                                  &lt;VisualState x:Name="Pressed"&gt;
                                      &lt;Storyboard&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                                  &lt;VisualState x:Name="Disabled"&gt;
                                      &lt;Storyboard&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                                  &lt;VisualState x:Name="PointerOver"&gt;
                                      &lt;Storyboard&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                              &lt;/VisualStateGroup&gt;
                              &lt;VisualStateGroup x:Name="FocusStates"&gt;
                                  &lt;VisualState x:Name="Focused"&gt;
                                      &lt;Storyboard&gt;
                                          &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhiteHorizontal"/&gt;
                                          &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlackHorizontal"/&gt;
                                          &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhiteVertical"/&gt;
                                          &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlackVertical"/&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                                  &lt;VisualState x:Name="Unfocused"/&gt;
                              &lt;/VisualStateGroup&gt;
                          &lt;/VisualStateManager.VisualStateGroups&gt;
                          &lt;Grid x:Name="HorizontalTemplate" Background="Transparent"&gt;
                              &lt;Grid.ColumnDefinitions&gt;
                                  &lt;ColumnDefinition Width="Auto"/&gt;
                                  &lt;ColumnDefinition Width="Auto"/&gt;
                                  &lt;ColumnDefinition Width="*"/&gt;
                              &lt;/Grid.ColumnDefinitions&gt;
                              &lt;Grid.RowDefinitions&gt;
                                  &lt;RowDefinition Height="17"/&gt;
                                  &lt;RowDefinition Height="30"/&gt;
                                  &lt;RowDefinition Height="32"/&gt;
                              &lt;/Grid.RowDefinitions&gt;
                              &lt;Rectangle x:Name="HorizontalTrackRect" Grid.ColumnSpan="3" Fill="LightGray" Grid.Row="1"
                                         Height="10" VerticalAlignment="Bottom"/&gt;
                              &lt;Rectangle x:Name="HorizontalDecreaseRect" Height="0" /&gt;
                              &lt;TickBar x:Name="TopTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" Height="{StaticResource SliderOutsideTickBarThemeHeight}" Margin="0,0,0,2" Visibility="Collapsed" VerticalAlignment="Bottom"/&gt;
                              &lt;TickBar x:Name="HorizontalInlineTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}" Height="{StaticResource SliderTrackThemeHeight}" Grid.Row="1" Visibility="Collapsed"/&gt;
                              &lt;TickBar x:Name="BottomTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" Height="{StaticResource SliderOutsideTickBarThemeHeight}" Margin="0,2,0,0" Grid.Row="2" Visibility="Collapsed" VerticalAlignment="Top"/&gt;
                              &lt;Rectangle x:Name="HorizontalBorder" Grid.ColumnSpan="3" Grid.Row="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/&gt;
                              &lt;Thumb x:Name="HorizontalThumb"  
                                     Grid.Column="1" 
                                     DataContext="{TemplateBinding Value}"
                                     Width="40"
                                     Height="30" 
                                     Grid.Row="1" &gt;
                                  &lt;Thumb.Background&gt;
                                      &lt;ImageBrush ImageSource="/Assets/bus_thumb.png" /&gt;
                                  &lt;/Thumb.Background&gt;
                              &lt;/Thumb&gt;
                              &lt;Rectangle x:Name="FocusVisualWhiteHorizontal" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/&gt;
                              &lt;Rectangle x:Name="FocusVisualBlackHorizontal" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/&gt;
                          &lt;/Grid&gt;
                          &lt;Grid x:Name="VerticalTemplate" Background="Transparent" Visibility="Collapsed"&gt;
                              &lt;Grid.ColumnDefinitions&gt;
                                  &lt;ColumnDefinition Width="17"/&gt;
                                  &lt;ColumnDefinition Width="Auto"/&gt;
                                  &lt;ColumnDefinition Width="17"/&gt;
                              &lt;/Grid.ColumnDefinitions&gt;
                              &lt;Grid.RowDefinitions&gt;
                                  &lt;RowDefinition Height="*"/&gt;
                                  &lt;RowDefinition Height="Auto"/&gt;
                                  &lt;RowDefinition Height="Auto"/&gt;
                              &lt;/Grid.RowDefinitions&gt;
                              &lt;Rectangle x:Name="VerticalTrackRect" Grid.Column="1" Fill="{TemplateBinding Background}" Grid.RowSpan="3"/&gt;
                              &lt;Rectangle x:Name="VerticalDecreaseRect" Grid.Column="1" Fill="{TemplateBinding Foreground}" Grid.Row="2"/&gt;
                              &lt;TickBar x:Name="LeftTickBar" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" HorizontalAlignment="Right" Margin="0,0,2,0" Grid.RowSpan="3" Visibility="Collapsed" Width="{StaticResource SliderOutsideTickBarThemeHeight}"/&gt;
                              &lt;TickBar x:Name="VerticalInlineTickBar" Grid.Column="1" Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}" Grid.RowSpan="3" Visibility="Collapsed" Width="{StaticResource SliderTrackThemeHeight}"/&gt;
                              &lt;TickBar x:Name="RightTickBar" Grid.Column="2" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" HorizontalAlignment="Left" Margin="2,0,0,0" Grid.RowSpan="3" Visibility="Collapsed" Width="{StaticResource SliderOutsideTickBarThemeHeight}"/&gt;
                              &lt;Rectangle x:Name="VerticalBorder" Grid.Column="1" Grid.RowSpan="3" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/&gt;
                              &lt;Thumb x:Name="VerticalThumb" 
                                  Background="{StaticResource SliderThumbBackgroundThemeBrush}" 
                                  Grid.Column="1" DataContext="{TemplateBinding Value}" Height="{StaticResource SliderTrackThemeHeight}" Grid.Row="1" 
                                  Width="{StaticResource SliderTrackThemeHeight}"/&gt;
                              &lt;Rectangle x:Name="FocusVisualWhiteVertical" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/&gt;
                              &lt;Rectangle x:Name="FocusVisualBlackVertical" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/&gt;
                          &lt;/Grid&gt;
                      &lt;/Grid&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  &lt;/UserControl.Resources&gt;
  
  &lt;Grid&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="50" /&gt;
          &lt;RowDefinition Height="*" /&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;Slider x:Name="busSlider" Width="220" Height="50" Minimum="0" Maximum="100" Value="0" Orientation="Horizontal" IsEnabled="True"  Style="{StaticResource BusRouteSliderStyle}" /&gt;
  
      &lt;TextBlock x:Name="lblSliderStopInfo" Grid.Row="1" Foreground="White" FontSize="12" Text ="{Binding ElementName=slider,  Path=Value}" /&gt;
  
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>