Silverlight- Slider Control Part 1

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: