wpf - 创建具有不同前后拇指背景颜色的滑块

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。您可以通过为其创建样式来实现不同的颜色。不知道如何获得右侧的凹边。

IE

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