Cannot drag slider thumb

Question

I'm trying to make a custom slider which looks like this image:

The problem is I can't drag the thumb. The thumb actually moves when I click on both sides of the slider(i.e. increase/decrease buttons) but dragging the thumb doesn't work.

Here's the XAML:

<Window.Resources>
    <Style x:Key="RepeatButtonTransparent" 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="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}"
                           Height="{TemplateBinding Height}"
                           Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="SliderThumb" TargetType="{x:Type Thumb}">
        <Grid>
            <Canvas MinHeight="34" Height="{TemplateBinding Height}">
                <Grid x:Name="grip">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="20"/>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0" Text="{Binding Value, StringFormat=N0,
                    RelativeSource={RelativeSource AncestorType={x:Type Slider}}}"
                    FontSize="14" VerticalAlignment="Top"/>
                    <Rectangle Grid.Row="1" Width="4" RadiusX="2" RadiusY="2"
                    Fill="#92BF30" VerticalAlignment="Top" Height="20"/>
                </Grid>
            </Canvas>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
            </Trigger>
            <Trigger Property="IsDragging" Value="true">
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="Slider">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Height" Value="35"/>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Slider">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="auto" MinHeight="{TemplateBinding MinHeight}"/>
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>
                                <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}"
                                     Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0"
                                     Visibility="Collapsed"/>
                                <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}"
                                     Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2"
                                     Visibility="Collapsed"/>
                                <Border x:Name="TrackBackground" BorderThickness="0" Background="Gray"
                                    Height="4.0" Grid.Row="1" VerticalAlignment="Center"
                                    CornerRadius="2" Opacity="0.7" Margin="0 23 0 0">
                                    <Canvas Margin="-6,-1">
                                        <Rectangle x:Name="PART_SelectionRange" Fill="Gray" Height="4.0"
                                               Visibility="Hidden"/>
                                    </Canvas>
                                </Border>
                                <Track x:Name="Track" Grid.Row="1" Margin="0 0 0 0">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource RepeatButtonTransparent}"
                                                  Command="Slider.DecreaseLarge" Height="10" Margin="0 26 0 0"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb x:Name="Thumb" Margin="0 0 20 0" Template="{StaticResource SliderThumb}"></Thumb>
                                    </Track.Thumb>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource RepeatButtonTransparent}"
                                                  Command="Slider.IncreaseLarge" Height="10" Margin="0 23 0 0"/>
                                    </Track.IncreaseRepeatButton>
                                </Track>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="TickPlacement" Value="Both">
                                    <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                                    <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                                </Trigger>
                                <Trigger Property="IsSelectionRangeEnabled" Value="true">
                                    <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
                                </Trigger>
                                <Trigger Property="IsKeyboardFocused" Value="true">
                                    <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Slider VerticalAlignment="Center" HorizontalAlignment="Center" Width="300"
                Minimum="0" Maximum="15"/>

What I'm doing wrong here?

Answer 1

A Slider has two required parts according to the styles and templates documentation:

• PART_Track of type Track
• PART_SelectionRange of type FrameworkElement.

The Thumb does not work, because you have to assign the name PART_Track to the Track element.

<Track x:Name="PART_Track" Grid.Row="1" Margin="0 0 0 0">