WPF Slider Design

wpf, xaml

Solution

For the custom handles you need to override the control template of the slider.

For the background you can achieve this effect with three `LineaGradientBrush`es layerd on top of each other. the first one is for the red-yellow-green gadient, the the 2nd one is for the white lines (gradientstops transparent and white, `SpreadMethod` set to `Repeat`) and the 3d one for the glossy effect).

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

This above background looks like this:

Problem

I want to use a slider like this I want that slider to adjust accordingly to the value provided to it. So far I am only able to apply background with gradient effect, but not able to get this effect. Please help me for this by providing me the style code. ``` <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> ``` Thanks.

Original source