Controllo dello slider XAML di stile - come posso interrompere la modifica dello sfondo di Thumb su PointerOver?

Question

sto cercando di ri-stile il controllo del cursore utilizzando XAML per uno stile app Metro - si suppone a guardare come un autobus rosso che l'utente trascina lungo una striscia grigia, vale a dire:

I hai estratto lo stile usando Visual Studio e re-styled il controllo Slider come sotto. Sfortunatamente, ogni volta che passo il mouse sopra il cursore, il pollice viene sostituito con un rettangolo grigio, anche se ho rimosso in modo specifico tutti gli elementi dello storyboard dal gruppo "PointerOver" di VisualState.

Che cosa ho mancato? XAML è sotto. Se ho bisogno di modificare un altro modello (ad esempio Thumb?), Ti preghiamo di fornire i passaggi su come estrarre questo modello, dal momento che Visual Studio non sembra esponere altri modelli di controllo a me oltre a quello qui sotto.

<Style x:Key="BusRouteSliderStyle" TargetType="Slider"> 
     <Setter Property="Background" Value="{StaticResource SliderTrackBackgroundThemeBrush}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource SliderBorderThemeBrush}"/> 
     <Setter Property="BorderThickness" Value="{StaticResource SliderBorderThemeThickness}"/> 
     <Setter Property="Foreground" Value="{StaticResource SliderTrackDecreaseBackgroundThemeBrush}"/> 
     <Setter Property="ManipulationMode" Value="None"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Slider"> 
        <Grid Margin="{TemplateBinding Padding}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="FocusStates"> 
           <VisualState x:Name="Focused"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhiteHorizontal"/> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlackHorizontal"/> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhiteVertical"/> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlackVertical"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unfocused"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Grid x:Name="HorizontalTemplate" Background="Transparent"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="17"/> 
           <RowDefinition Height="30"/> 
           <RowDefinition Height="32"/> 
          </Grid.RowDefinitions> 
          <Rectangle x:Name="HorizontalTrackRect" Grid.ColumnSpan="3" Fill="LightGray" Grid.Row="1" 
             Height="10" VerticalAlignment="Bottom"/> 
          <Rectangle x:Name="HorizontalDecreaseRect" Height="0" /> 
          <TickBar x:Name="TopTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" Height="{StaticResource SliderOutsideTickBarThemeHeight}" Margin="0,0,0,2" Visibility="Collapsed" VerticalAlignment="Bottom"/> 
          <TickBar x:Name="HorizontalInlineTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}" Height="{StaticResource SliderTrackThemeHeight}" Grid.Row="1" Visibility="Collapsed"/> 
          <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"/> 
          <Rectangle x:Name="HorizontalBorder" Grid.ColumnSpan="3" Grid.Row="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/> 
          <Thumb x:Name="HorizontalThumb" 
            Grid.Column="1" 
            DataContext="{TemplateBinding Value}" 
            Width="40" 
            Height="30" 
            Grid.Row="1" > 
           <Thumb.Background> 
            <ImageBrush ImageSource="/Assets/bus_thumb.png" /> 
           </Thumb.Background> 
          </Thumb> 
          <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"/> 
          <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"/> 
         </Grid> 
         <Grid x:Name="VerticalTemplate" Background="Transparent" Visibility="Collapsed"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="17"/> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="17"/> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="*"/> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="Auto"/> 
          </Grid.RowDefinitions> 
          <Rectangle x:Name="VerticalTrackRect" Grid.Column="1" Fill="{TemplateBinding Background}" Grid.RowSpan="3"/> 
          <Rectangle x:Name="VerticalDecreaseRect" Grid.Column="1" Fill="{TemplateBinding Foreground}" Grid.Row="2"/> 
          <TickBar x:Name="LeftTickBar" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" HorizontalAlignment="Right" Margin="0,0,2,0" Grid.RowSpan="3" Visibility="Collapsed" Width="{StaticResource SliderOutsideTickBarThemeHeight}"/> 
          <TickBar x:Name="VerticalInlineTickBar" Grid.Column="1" Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}" Grid.RowSpan="3" Visibility="Collapsed" Width="{StaticResource SliderTrackThemeHeight}"/> 
          <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}"/> 
          <Rectangle x:Name="VerticalBorder" Grid.Column="1" Grid.RowSpan="3" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/> 
          <Thumb x:Name="VerticalThumb" 
           Background="{StaticResource SliderThumbBackgroundThemeBrush}" 
           Grid.Column="1" DataContext="{TemplateBinding Value}" Height="{StaticResource SliderTrackThemeHeight}" Grid.Row="1" 
           Width="{StaticResource SliderTrackThemeHeight}"/> 
          <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"/> 
          <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"/> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="50" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 

    <Slider x:Name="busSlider" Width="220" Height="50" Minimum="0" Maximum="100" Value="0" Orientation="Horizontal" IsEnabled="True" Style="{StaticResource BusRouteSliderStyle}" /> 

    <TextBlock x:Name="lblSliderStopInfo" Grid.Row="1" Foreground="White" FontSize="12" Text ="{Binding ElementName=slider, Path=Value}" /> 

</Grid> 

Answer 1

Come sospettavo, avevo bisogno di cambiare lo stile del controllo Thumb, ma non è stato facile estrarlo in VIsual Studio, poiché era già contenuto in un ControlTemplate.

La soluzione è la seguente:

• Creare un nuovo controllo Thumb su una pagina vuota XAML, dandogli un altezza/larghezza in modo che sia visibile sulla tela designer.
• Fate click destro, scegliere 'Modifica modello' -> 'Modifica una copia'
• Questo crea il modello all'interno del XAML che possono poi essere copiato/incollato altrove come richiesto.

Lo stile di pollice predefinito viene incollato di seguito per chiunque ne abbia bisogno. Basta rimuovere gli stati Pointerover e Pressed per ottenere il comportamento che volevo.

<Style x:Key="ThumbStyle1" TargetType="Thumb"> 
     <Setter Property="Background" Value="{StaticResource ThumbBackgroundThemeBrush}"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="IsTabStop" Value="False"/> 
     <Setter Property="BorderBrush" Value="{StaticResource ThumbBorderThemeBrush}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Thumb"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"/> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="FocusStates"> 
           <VisualState x:Name="Unfocused"/> 
           <VisualState x:Name="Focused"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/> 
         <Border x:Name="BackgroundPointerOver" BorderBrush="{StaticResource ThumbPointerOverBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource ThumbPointerOverBackgroundThemeBrush}" Opacity="0"/> 
         <Border x:Name="BackgroundPressed" BorderBrush="{StaticResource ThumbPressedBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource ThumbPressedBackgroundThemeBrush}" Opacity="0"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Answer 2

Probabilmente è necessario cambiare anche lo stile/modello del controllo Thumb.