Crear control deslizante con diferente color de fondo antes/después del pulgar

Question

Actualmente estoy trabajando en un reproductor multimedia. Me gustaría crear un control deslizante como el de esta captura de pantalla:

Lo que tengo hasta ahora es éste:

estoy actualmente luchando con la barra de luz antes del pulgar. Cambia su longitud según la posición del pulgar. ¿Cómo puedo implementar esto en WPF? ¿O debería intentar usar una barra de progreso?

Atm, tengo este código:

<LinearGradientBrush x:Key="SliderThumbGradient" StartPoint="0,0" EndPoint="0,1"> 
    <GradientStop Offset="0" Color="#f7f7f7"/> 
    <GradientStop Offset="1" Color="#bcbcbc"/> 
</LinearGradientBrush> 

<Style x:Key="SliderButtonStyle" TargetType="{x:Type 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="{x:Type RepeatButton}"> 
       <Border Background="Transparent" /> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}"> 
    <Setter Property="SnapsToDevicePixels" Value="true"/> 
    <Setter Property="OverridesDefaultStyle" Value="true"/> 
    <Setter Property="Height" Value="14"/> 
    <Setter Property="Width" Value="14"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Thumb}"> 
       <Ellipse 
     Name="Ellipse" 
     Fill="{DynamicResource SliderThumbGradient}" 
     Stroke="#404040" 
     StrokeThickness="1" /> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="Ellipse" Property="Fill" Value="#808080"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter TargetName="Ellipse" Property="Fill" Value="#EEEEEE"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <TickBar 
    Name="TopTick" 
    SnapsToDevicePixels="True" 
    Placement="Top" 
    Fill="#404040" 
    Height="4" 
    Visibility="Collapsed" /> 
     <Border 
    Name="TrackBackground" 
    Margin="0" 
    CornerRadius="6" 
    Height="12" 
    Grid.Row="1" 
    Background="#0a0a0a" 
    BorderBrush="#121212" 
    BorderThickness="1" /> 
     <Track Grid.Row="1" Name="PART_Track"> 
      <Track.DecreaseRepeatButton> 
       <RepeatButton 
     Style="{StaticResource SliderButtonStyle}" 
     Command="Slider.DecreaseLarge" /> 
      </Track.DecreaseRepeatButton> 
      <Track.Thumb> 
       <Thumb Style="{StaticResource SliderThumbStyle}" /> 
      </Track.Thumb> 
      <Track.IncreaseRepeatButton> 
       <RepeatButton 
     Style="{StaticResource SliderButtonStyle}" 
     Command="Slider.IncreaseLarge" /> 
      </Track.IncreaseRepeatButton> 
     </Track> 
     <TickBar 
    Name="BottomTick" 
    SnapsToDevicePixels="True" 
    Grid.Row="2" 
    Fill="{TemplateBinding Foreground}" 
    Placement="Bottom" 
    Height="4" 
    Visibility="Collapsed" /> 
    </Grid> 
    <ControlTemplate.Triggers> 
     <Trigger Property="TickPlacement" Value="TopLeft"> 
      <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/> 
     </Trigger> 
     <Trigger Property="TickPlacement" Value="BottomRight"> 
      <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/> 
     </Trigger> 
     <Trigger Property="TickPlacement" Value="Both"> 
      <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/> 
      <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 
     <TickBar 
    Name="TopTick" 
    SnapsToDevicePixels="True" 
    Placement="Left" 
    Fill="#404040" 
    Width="4" 
    Visibility="Collapsed" /> 
     <Border 
    Name="TrackBackground" 
    Margin="0" 
    CornerRadius="2" 
    Width="4" 
    Grid.Column="1" 
    Background="#E0E0E0" 
    BorderBrush="#404040" 
    BorderThickness="1" /> 
     <Track Grid.Column="1" Name="PART_Track"> 
      <Track.DecreaseRepeatButton> 
       <RepeatButton 
     Style="{StaticResource SliderButtonStyle}" 
     Command="Slider.DecreaseLarge" /> 
      </Track.DecreaseRepeatButton> 
      <Track.Thumb> 
       <Thumb Style="{StaticResource SliderThumbStyle}" /> 
      </Track.Thumb> 
      <Track.IncreaseRepeatButton> 
       <RepeatButton 
     Style="{StaticResource SliderButtonStyle}" 
     Command="Slider.IncreaseLarge" /> 
      </Track.IncreaseRepeatButton> 
     </Track> 
     <TickBar 
    Name="BottomTick" 
    SnapsToDevicePixels="True" 
    Grid.Column="2" 
    Fill="{TemplateBinding Foreground}" 
    Placement="Right" 
    Width="4" 
    Visibility="Collapsed" /> 
    </Grid> 
    <ControlTemplate.Triggers> 
     <Trigger Property="TickPlacement" Value="TopLeft"> 
      <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/> 
     </Trigger> 
     <Trigger Property="TickPlacement" Value="BottomRight"> 
      <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/> 
     </Trigger> 
     <Trigger Property="TickPlacement" Value="Both"> 
      <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/> 
      <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

<Style TargetType="{x:Type Slider}"> 
    <Setter Property="SnapsToDevicePixels" Value="true"/> 
    <Setter Property="OverridesDefaultStyle" Value="true"/> 
    <Style.Triggers> 
     <Trigger Property="Orientation" Value="Horizontal"> 
      <Setter Property="MinWidth" Value="104" /> 
      <Setter Property="MinHeight" Value="21" /> 
      <Setter Property="Template" Value="{StaticResource HorizontalSlider}" /> 
     </Trigger> 
     <Trigger Property="Orientation" Value="Vertical"> 
      <Setter Property="MinWidth" Value="21" /> 
      <Setter Property="MinHeight" Value="104" /> 
      <Setter Property="Template" Value="{StaticResource VerticalSlider}" /> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

Answer 1

El objeto que está cambiando su longitud en el lado izquierdo es el DecreaseRepeatButton. Puede implementar el color diferente creando un Estilo para él. No estoy seguro de cómo obtener el borde cóncavo en el lado derecho, aunque .

decir

<Style x:Key="DecreaseSliderButtonStyle" TargetType="{x:Type 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="{x:Type RepeatButton}"> 
       <Border Height="12" Background="DimGray" CornerRadius="6" Margin="0,0,-12,0" /> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

y en su ControlTemplate:

<Track.DecreaseRepeatButton> 
    <RepeatButton 
     Style="{StaticResource DecreaseSliderButtonStyle}" 
     Command="Slider.DecreaseLarge" /> 
</Track.DecreaseRepeatButton>