Silverlight- Slider Control Part 1

Article

In this article we will be seeing how to create Silverlight Slider control.

Slider Control is used to allow the user to select from a range of values by moving the Thumb control.

Namespace: System.Windows.Controls

Assembly: System.Windows (in System.Windows.dll)

Xaml:

<Slider></Slider>

Slider with horizontal orientation:

By default the orientation property will be Horizontal.

</Canvas>

Slider with IsDirectionReversed:

<Canvas Background="Orange"
           Height="200"
           Width="200"
           Opacity="0.6">
        <Slider x:Name="slider"
               Background="Green"
               Height="25"
               Width="150"
               Canvas.Left="27"
               Canvas.Top="84"
               IsDirectionReversed="True">
        </Slider>
    </Canvas>

Slider with ValueChanged event:

<Canvas Background="Orange"
           Height="200"
           Width="230"
           Opacity="0.6">
        <Slider x:Name="slider"
               Background="Green"
               Height="25"
               Width="150"
               Canvas.Left="27"
               Canvas.Top="84"
               Minimum="0"
               Maximum="100"
               ValueChanged="slider_ValueChanged">
        </Slider>
        <TextBlock Height="25" Width="50" Foreground="Blue" Text="Slider Value:" Canvas.Left="27" Canvas.Top="65"></TextBlock>
        <TextBlock x:Name="txtSliderValue" Height="25" Width="50" Foreground="Blue" Canvas.Left="100" Canvas.Top="65"></TextBlock>
    </Canvas>

ValueChanged event:

private void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            txtSliderValue.Text = e.NewValue.ToString();
        }

Minimum="0":

It is used to specify the minimum possible Value of the range element.

Maximum="100":

It is used to specify the maximum possible value of the range element.

Changing the Slider value: