拇指背景顏色之前/之後創建不同的滑塊

Question

我目前正在研發媒體播放器。我想創建一個滑塊像一個在這個屏幕截圖：

我起身什麼到現在是這個：

我目前在大拇指前用光柱打造。它根據拇指位置改變它的長度。我怎樣才能在WPF中實現這一點？或者我應該嘗試使用進度條？

ATM，我有這樣的代碼：

<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

即改變其長度上的左側是DecreaseRepeatButton的對象。您可以通過爲其創建樣式來實現不同的顏色。 雖然 不知道如何獲得右側的凹形邊緣。

即

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

，並在您的ControlTemplate：

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