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>

感谢您的选择。

- Neel Bhasin

---

整个元素和相关资源发布一下怎么样？ <Slider> 标签在哪里？ - Gusdor

它类似于 <Slider><Slider.Background>Above Code</Slider.Background></Slider>。 - Neel Bhasin

@BenjaminPaul 这就是完整的问题，我对滑块样式一无所知，因此我需要一种样式，可以帮助我获得与上面图片相似的滑块。 - Neel Bhasin

修改问题并添加新信息怎么样？ - Gusdor

第一个谷歌搜索结果 http://codingsense.wordpress.com/2010/02/01/customize-a-slider-in-wpf-step-by-step-tutorial/ - Gusdor

Answer 1

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

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

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

这个背景如下所示：

- bitbonk

---

那拇指呢？这个控件只改变背景，而不是滑块区域。 - Neel Bhasin

正如我所提到的，您将需要学习编写自定义控件模板（覆盖“滑块”控件的默认控件模板）。请按照我发布的两个链接。 - bitbonk

Answer 2

我遇到了类似的问题，想要我的工具栏的轨迹呈渐变效果。您可以覆盖默认的SystemColors.HighlightBrushKey资源以更改选择区域的颜色。

<Slider Name="WPF Gradient Slider Bar" Margin="5px" Minimum="0" Maximum="100"
        IsSelectionRangeEnabled="True" 
        SelectionStart="0" SelectionEnd="100">
        <Slider.Resources>
             <LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" EndPoint="1,0.5" StartPoint="0,0.5">
                      <GradientStop Color="Blue" Offset="1"/>
                      <GradientStop Color="Cyan" Offset="0.75"/>
                      <GradientStop Color="Green" Offset="0.5"/>
                      <GradientStop Color="Yellow" Offset="0.25"/>
                      <GradientStop Color="Red" Offset="0"/>
              </LinearGradientBrush>
         </Slider.Resources>
</Slider>

结果：

- CodyF

---

尝试使用您的解决方案，但如果我不使用选择范围，渐变就会消失！此外，滑块轨道的最左侧非常短的距离不会被着色！你有什么想法吗？ - Muhammad Nihad