Crea un dispositivo di scorrimento con diverso colore di sfondo prima/dopo il pollice

Question

Attualmente sto lavorando a un lettore multimediale. Mi piacerebbe creare un cursore come quello in questa schermata:

Quello che ho avuto fino ad ora è questo:

Sono attualmente lottando con la barra luminosa davanti al pollice. Cambia la sua lunghezza in base alla posizione del pollice. Come posso implementarlo in WPF? O dovrei provare a utilizzare una barra di avanzamento?

Atm, ho questo codice:

<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

L'oggetto che cambia la sua lunghezza sul lato sinistro è il DecreaseRepeatButton. È possibile implementare il colore diverso creando uno stile per esso. Non so come ottenere il lato concavo sul lato destro se .

cioè

<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> 

e nel tuo ControlTemplate:

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