Here’s my Slider:
<code><Slider x:Name="videoPlayerSlider"
Minimum="0"
Maximum="100"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Thumb.DragStarted="OnSliderDragStarted_Click"
Thumb.DragDelta="OnSliderDragDelta_Drag"
Thumb.DragCompleted="OnSliderDragCompleted_Click"
Value="50"
Height="20"
Margin="0,0,0,-20">
<Slider.Template>
<ControlTemplate TargetType="Slider">
<Grid>
<Track x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource CustomRepeatButtonStyle}" Command="{x:Static Slider.DecreaseLarge}"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Focusable="false" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource CustomThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource CustomRepeatButtonStyle}" Command="{x:Static Slider.IncreaseLarge}"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Focusable="false" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
</Slider.Template>
</Slider>
</code>
<code><Slider x:Name="videoPlayerSlider"
Minimum="0"
Maximum="100"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Thumb.DragStarted="OnSliderDragStarted_Click"
Thumb.DragDelta="OnSliderDragDelta_Drag"
Thumb.DragCompleted="OnSliderDragCompleted_Click"
Value="50"
Height="20"
Margin="0,0,0,-20">
<Slider.Template>
<ControlTemplate TargetType="Slider">
<Grid>
<Track x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource CustomRepeatButtonStyle}" Command="{x:Static Slider.DecreaseLarge}"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Focusable="false" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource CustomThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource CustomRepeatButtonStyle}" Command="{x:Static Slider.IncreaseLarge}"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Focusable="false" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
</Slider.Template>
</Slider>
</code>
<Slider x:Name="videoPlayerSlider"
Minimum="0"
Maximum="100"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Thumb.DragStarted="OnSliderDragStarted_Click"
Thumb.DragDelta="OnSliderDragDelta_Drag"
Thumb.DragCompleted="OnSliderDragCompleted_Click"
Value="50"
Height="20"
Margin="0,0,0,-20">
<Slider.Template>
<ControlTemplate TargetType="Slider">
<Grid>
<Track x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource CustomRepeatButtonStyle}" Command="{x:Static Slider.DecreaseLarge}"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Focusable="false" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource CustomThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource CustomRepeatButtonStyle}" Command="{x:Static Slider.IncreaseLarge}"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Focusable="false" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
</Slider.Template>
</Slider>
And that’s the Style applied:
<code><Style x:Key="CustomThumbStyle"
TargetType="Thumb">
<Setter Property="Width"
Value="10" />
<Setter Property="Height"
Value="20" />
<Setter Property="Padding"
Value="5" />
<Setter Property="Background"
Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<Rectangle Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Fill="Green" />
<Ellipse Width="10"
Height="10"
Fill="Red"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomRepeatButtonStyle"
TargetType="RepeatButton">
<Setter Property="Background"
Value="Orange" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="controls:ControlsHelper.CornerRadius"
Value="0" />
<Setter Property="controls:ItemHelper.HoverBackgroundBrush"
Value="Orange" />
<Setter Property="controls:ItemHelper.HoverSelectedBackgroundBrush"
Value="Orange" />
<Setter Property="controls:ItemHelper.SelectedBackgroundBrush"
Value="Orange" />
<Setter Property="controls:ItemHelper.ActiveSelectionBackgroundBrush"
Value="Orange" />
<Style.Triggers>
<Trigger Property="IsFocused"
Value="True">
<Setter Property="Background"
Value="Orange" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="Orange" />
</Trigger>
</Style.Triggers>
</Style>
</code>
<code><Style x:Key="CustomThumbStyle"
TargetType="Thumb">
<Setter Property="Width"
Value="10" />
<Setter Property="Height"
Value="20" />
<Setter Property="Padding"
Value="5" />
<Setter Property="Background"
Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<Rectangle Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Fill="Green" />
<Ellipse Width="10"
Height="10"
Fill="Red"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomRepeatButtonStyle"
TargetType="RepeatButton">
<Setter Property="Background"
Value="Orange" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="controls:ControlsHelper.CornerRadius"
Value="0" />
<Setter Property="controls:ItemHelper.HoverBackgroundBrush"
Value="Orange" />
<Setter Property="controls:ItemHelper.HoverSelectedBackgroundBrush"
Value="Orange" />
<Setter Property="controls:ItemHelper.SelectedBackgroundBrush"
Value="Orange" />
<Setter Property="controls:ItemHelper.ActiveSelectionBackgroundBrush"
Value="Orange" />
<Style.Triggers>
<Trigger Property="IsFocused"
Value="True">
<Setter Property="Background"
Value="Orange" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="Orange" />
</Trigger>
</Style.Triggers>
</Style>
</code>
<Style x:Key="CustomThumbStyle"
TargetType="Thumb">
<Setter Property="Width"
Value="10" />
<Setter Property="Height"
Value="20" />
<Setter Property="Padding"
Value="5" />
<Setter Property="Background"
Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<Rectangle Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Fill="Green" />
<Ellipse Width="10"
Height="10"
Fill="Red"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomRepeatButtonStyle"
TargetType="RepeatButton">
<Setter Property="Background"
Value="Orange" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="controls:ControlsHelper.CornerRadius"
Value="0" />
<Setter Property="controls:ItemHelper.HoverBackgroundBrush"
Value="Orange" />
<Setter Property="controls:ItemHelper.HoverSelectedBackgroundBrush"
Value="Orange" />
<Setter Property="controls:ItemHelper.SelectedBackgroundBrush"
Value="Orange" />
<Setter Property="controls:ItemHelper.ActiveSelectionBackgroundBrush"
Value="Orange" />
<Style.Triggers>
<Trigger Property="IsFocused"
Value="True">
<Setter Property="Background"
Value="Orange" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="Orange" />
</Trigger>
</Style.Triggers>
</Style>
I’m not able to change the background color when I hover the two Repeat Button:
(here’s the right one is hovered with Mouse). I want “red” instead of that default blue. Which property do I need to use? The ones I’ve tried above seems to not have any result.
Any clues?