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>
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:
Join the conversation! Your thoughts help the community grow.