In this article we will learn how to use Slider control in Silverlight 4.
Slider Control
The Slider is a simple control on the surface providing a track and a "thumb" that enables value changing.
Properties - The Slider control has the following properties.
Figure 1.
Minimum â€" The number that represents the lowest (left or bottom) value.
Maximum â€" The number that represents the highest (right or top) value.
LargeChange â€" The slip when a large change in value is desired.
SmallChange â€" The slip when a small change in value is desired.
Foreground - This property is used to describes the foreground color.
Background - This property is used to describes the background color.
Creating Slider control in XAML
<Slider Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Slider1"VerticalAlignment="Top" Width="100" />
The Width and Height property represents the width and the height of the control.:Name property represents name of the control.
The Output looks like this.
Figure 2.
Vertical Slider control
Set the property Orientation= Vertical.
Figure 3.
For example:
Drag and drop three Slider control and an Ellipse control from the Toolbox on the form. The form looks like this.
Figure 4.
Now setting background property of Slider controls.
Slider1->Red.
Slider2->Green.
Slider3->Blue.
The form looks like this now.
Figure 5.
XAML code
<Slider Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Slider1"VerticalAlignment="Top" Width="100" />
<UserControl x:Class="SilverlightApplication42.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="400">
<Canvas x:Name="LayoutRoot" Background="LightGray" Height="454">
<Ellipse x:Name="Ellipse1" Width="300" Height="200"
Canvas.Left="60" Canvas.Top="20"
Fill="LawnGreen" Stroke="Black" StrokeThickness="2">
</Ellipse>
<Slider x:Name="Slider1" Width="300" Height="20"
Background="Red" Maximum="255" Minimum="0"
Canvas.Left="60" Canvas.Top="242"
ValueChanged="RedSlider_ValueChanged"/>
<Slider x:Name="Slider2" Width="300" Height="20"
Background="Green" Maximum="255" Minimum="0"
Canvas.Left="60" Canvas.Top="268"
ValueChanged="GreenSlider_ValueChanged"/>
<Slider x:Name="Slider3" Width="300" Height="20"
Background="Blue" Maximum="255" Minimum="0"
Canvas.Left="60" Canvas.Top="294"
ValueChanged="BlueSlider_ValueChanged"/>
</Canvas>
</UserControl>
Now, on the ValueChanged event of slider controls and add the following code.
Private Sub UpdateellipseWithColors()
Dim color As Color = Color.FromArgb(255, Convert.ToByte(Slider1.Value),Convert.ToByte(Slider2.Value), Convert.ToByte(Slider3.Value))
Ellipse1.Fill = New SolidColorBrush(color)
End Sub
Private Sub RedSlider_ValueChanged(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedPropertyChangedEventArgs(Of System.Double))
UpdateellipseWithColors()
End Sub
Private Sub GreenSlider_ValueChanged(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedPropertyChangedEventArgs(Of System.Double))
UpdateellipseWithColors()
End Sub
Private Sub BlueSlider_ValueChanged(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedPropertyChangedEventArgs(Of System.Double))
UpdateellipseWithColors()
End Sub
Now run the application and you will see without change slider values.
Figure 6.
Now change slider1 values, you will see the color of Ellipse will be change according slider1.
Figure 7.
Now change slider2 values, you will see the color of Ellipse will be change according slider2.
Figure 8.
Now change slider3 values, you will see the color of Ellipse will be change according slider3.
Figure 9.
Now change slider1, silider2 and slider3 values, you will see the color of Ellipse will be change accordingly.
Figure 10.