WPF slider 设计

Question

我想使用这样的 slider

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

<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

对于您需要的自定义句柄 override control template of the slider .

对于背景，您可以使用三个层叠的 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>

上面的背景是这样的: