WPF 滑块设计

Question

我想使用这样的滑块

我希望该滑块根据提供给它的值进行相应调整。到目前为止，我只能应用具有渐变效果的背景，但无法获得这种效果。请通过向我提供样式代码来帮助我。

<Slider>
   <Slider.Background>
      <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
         <GradientStop Color="Red" Offset="0"/>
         <GradientStop x:Name="WhiteOffset" Color="Yellow" Offset="0.5"/>
         <GradientStop x:Name="GrayOffset" Color="Red" Offset="1"/>
      </LinearGradientBrush> 
   </Slider.Background>
</Slider>

谢谢。

Answer 1

对于自定义句柄，您需要覆盖滑块的控件模板。

对于背景，您可以通过将三个LineaGradientBrushes 层叠在一起来实现此效果。第一个用于红黄绿色渐变，第二个用于白线（渐变停止透明和白色，SpreadMethod设置为Repeat）和 3d 用于光泽效果）。

  <Slider Height="50">
    <Slider.Background>
      <VisualBrush>
        <VisualBrush.Visual>
          <Grid>
            <Rectangle Width="1" Height="1">
              <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
                  <GradientStop Color="Red" Offset="0" />
                  <GradientStop Color="Yellow" Offset="0.5" />
                  <GradientStop Color="Green" Offset="1" />
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
            <Rectangle Width="1" Height="1">
              <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0,0" StartPoint="0.1,0" SpreadMethod="Repeat">
                  <GradientStop Color="Transparent" Offset="0.5" />
                  <GradientStop Color="White" Offset="0.5" />
                  <GradientStop Color="White" Offset="0.55" />
                  <GradientStop Color="Transparent" Offset="0.55" />
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
            <Rectangle Width="1" Height="1">
              <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0" SpreadMethod="Repeat">
                  <GradientStop Color="#11FFFFFF" Offset="0" />
                  <GradientStop Color="#22FFFFFF" Offset="0.5" />
                  <GradientStop Color="#11000000" Offset="0.5" />
                  <GradientStop Color="#11000000" Offset="1" />
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
          </Grid>
        </VisualBrush.Visual>
      </VisualBrush>
    </Slider.Background>
  </Slider>

上面的背景看起来像这样：