Slider Control in WPF

Slider is a built-in control in WPF, used to control anything which takes a range. Useful applications include a zoom control or a rotate control. You can have horizontal and vertical sliders with any custom interval.

Slider Control

The Slider element in XAML represents a WPF Slider control.

<Slider></Slider>

The below code snippet generates a slider to scale the zoom property of a rectangle.

<Window x:Class="ScaleInCustomSystem"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Scale In Custom System" Height="310" Width="260">
       <Border BorderBrush="Black" BorderThickness="1" Height="200"
        Width="200" Margin="20">
            <Canvas Height="200" Width="200">
                <Canvas.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleY="-1" />
                    </TransformGroup>
                </Canvas.RenderTransform>
              <Rectangle Canvas.Top="100" Canvas.Left="30" Width="80"
                Height="40" Stroke="darkgreen" StrokeThickness="3">
                  <Rectangle.RenderTransform>
                        <ScaleTransform
                ScaleX="{Binding ElementName=slider,Path=Value}"
                ScaleY="{Binding ElementName=slider,Path=Value}" />
                  </Rectangle.RenderTransform>
             </Rectangle>
            </Canvas>
        </Border>
        <Slider Name="slider" Minimum="0" Maximum="3" Value="1"
      TickPlacement="BottomRight" TickFrequency="0.2"
      IsSnapToTickEnabled="True" />
    </StackPanel>
</Window>

OUTPUT



Now if you change the slider values, you will see that the size of rectangle also changes according to the slider values.



SUMMARY
In this article, I discussed how to create and use a Slider control available in WPF.