Silverlight- Slider Control Part 1

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

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 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" >
        </Slider>
    </Canvas>

Slider with vertical orientation:

<Canvas Background="Orange"
            Height="200"
            Width="200"
            Opacity="0.6">
        <Slider x:Name="slider"
                Background="Green"
                Height="150"
                Width="25"
                Canvas.Left="87"
                Canvas.Top="24"
                Orientation="Vertical">
        </Slider>

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