Custom WPF Slider with image as Thumb

Question

How can I style a Slider control for WPF in a way like this figure:

Any similar samples would be appreciated.

I tried the below code

  <Style x:Key="SliderThumbStyle" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="false"/>
        <Setter Property="Height" Value="18"/>
        <Setter Property="Width" Value="18"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse  Stroke="Black"
                          StrokeThickness="1"
                          Name="Ellipse" 
                          Fill="OrangeRed" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Ellipse" Property="Fill" Value="Orange"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="Ellipse" Property="Fill" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="Slider" x:Key="AppSliderStyle">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" Name="row" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" Name="column" />
                            <ColumnDefinition Width="auto" />
                        </Grid.ColumnDefinitions>
                        <Border Name="PART_Border"
                           BorderBrush="Black" BorderThickness="1"
                           Padding="2"
                          Grid.Row="1" Grid.Column="1"
                           Width="{TemplateBinding Width}"
                           Height="{TemplateBinding Height}"
                           Background="GreenYellow"
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Center" />
                        <Track Name="PART_Track"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Center"
                              Grid.Row="1" Grid.Column="1"
                              Width="{TemplateBinding Width}"
                              Height="{TemplateBinding Height}">
                            <Track.Thumb>
                                <Thumb Style="{StaticResource SliderThumbStyle}" />
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And it produced this :

I am struggling to make the color different on the left and right sides. What changes do I have to make to do that?

Answer 1

Similar example :

Track bar /slider template for WPF

You need to edit style of Both RepeatButton

<Window.Resources>

    <Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border  BorderThickness="1" BorderBrush="Black" Background="Black" Height="3"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border SnapsToDevicePixels="True" Background="Green"  BorderThickness="1" BorderBrush="YellowGreen" Height="3"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Height="10" Width="10" Fill="Green"></Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="Slider"  TargetType="Slider">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Track Grid.Row="1" x:Name="PART_Track"   >
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderRepeatButton1}"  Command="Slider.DecreaseLarge" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumb}"  />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
                </Track.IncreaseRepeatButton>
            </Track>
        </Grid>            
    </ControlTemplate>

    <Style x:Key="Horizontal_Slider" TargetType="Slider">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="MinHeight" Value="21" />
                <Setter Property="MinWidth" Value="104" />
                <Setter Property="Template" Value="{StaticResource Slider}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Slider Style="{StaticResource Horizontal_Slider}" VerticalAlignment="Center"  Value="500" Width="300" Margin="50,0,50,0"></Slider>

Update slider thumb with image

   <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Height="10" Width="10">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="Screenshot_5.png"></ImageBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Update: slider thumb with Mouseover animation

You can add mouserover effect using triggers.

<Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <!--Add name to ellipse to use in  controltemplate triggers-->
                    <Ellipse x:Name="Ellipse" Height="10" Width="10" Fill="Green"></Ellipse>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Ellipse" Property="Fill" Value="Yellow"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Result