WPF: How to style the individual RepeatButton of a Slider control? - wpf

Question

I would like to style a slider such that I can assign a color to the track on the left side of the thumb, and a different color to the track on the right side of the thumb. I read this answer but it only deals with a single style that's shared among both track pieces (on both sides of the thumb).

Answer 1

Inspired by Andy's comment, I extracted the default Slider control template by right clicking on the control and selecting Edit Copy. I personally don't need to show any tick values, so I decided to change the slider's Minimum and Maximum properties to 0 and 1 respectively.
I bodged around a bit with the code from this answer regarding gradients to change the Slider's Track Background a LinearGradientBrush between 0,0 and 1,0 where the offset (where the two colours are separated) is bound to the Slider's value (conveniently between 0 and 1). In code, it looks like this:
<!-- From the Slider's default control template -->
<Border x:Name="TrackBackground" ...>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Green" Offset="{Binding RelativeSource={RelativeSource AncestorType={x:Type Slider}}, Path=Value}" />
<GradientStop Color="Red" Offset="{Binding RelativeSource={RelativeSource AncestorType={x:Type Slider}}, Path=Value}" />
</LinearGradientBrush>
</Border.Background>
...
</Border>

Answer 2

Here's the vertical slider template.
You will have a number of differences, particularly in your thumb.
I have some fairly specific requirements for this thing.
<ControlTemplate x:Key="GraphSliderTemplate" TargetType="{x:Type Slider}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border x:Name="TrackBackground" BorderBrush="#FFD6D6D6" BorderThickness="1" Background="#FFE7EAEA" Grid.Column="1" HorizontalAlignment="Center" Margin="0,5" Width="6">
<Canvas Margin="-1,-6">
<Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Visibility="Hidden" Width="6"/>
</Canvas>
</Border>
<Track x:Name="PART_Track" Grid.Column="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="Slider.DecreaseLarge">
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="IsHitTestVisible" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="Salmon" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="Slider.IncreaseLarge">
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="IsHitTestVisible" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Focusable="False"
Height="6"
Width="6"
OverridesDefaultStyle="True"
VerticalAlignment="Top"
IsHitTestVisible="True"
>
<Thumb.Template>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center"
IsHitTestVisible="True"
>
<Path x:Name="grip" Data="{StaticResource FlatStar}" Fill="Red" Stretch="Fill" Stroke="DarkRed"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="grip" Value="#FFDCECFC"/>
<Setter Property="Stroke" TargetName="grip" Value="#FF7EB4EA"/>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter Property="Fill" TargetName="grip" Value="#FFDAECFC"/>
<Setter Property="Stroke" TargetName="grip" Value="#FF569DE5"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/>
<Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>