Silverlight Slider control in VB.NET

In this article we will learn how to use Slider control in Silverlight 4.
  • 2253

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.

s1.gif
 

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.


 

s2.gif 

Figure 2.

 

Vertical Slider control

 

Set the property Orientation= Vertical.


 

s3.gif 

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.

s4.gif
 

Figure 4.

Now setting background property of Slider controls.

Slider1->Red.

Slider2->Green.

Slider3->Blue.

The form looks like this now.

s5.gif
 

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.ObjectByVal e AsSystem.Windows.RoutedPropertyChangedEventArgs(Of System.Double))

        UpdateellipseWithColors()

    End Sub

 

    Private Sub GreenSlider_ValueChanged(ByVal sender As System.ObjectByVal e AsSystem.Windows.RoutedPropertyChangedEventArgs(Of System.Double))

 

        UpdateellipseWithColors()

    End Sub

 

 

    Private Sub BlueSlider_ValueChanged(ByVal sender As System.ObjectByVal e AsSystem.Windows.RoutedPropertyChangedEventArgs(Of System.Double))

        UpdateellipseWithColors()

    End Sub

 

Now run the application and you will see without change slider values.

s6.gif
 

Figure 6.

Now change slider1 values, you will see the color of Ellipse will be change according slider1. 
 

s7.gif
 

Figure 7.

Now change slider2 values, you will see the color of Ellipse will be change according slider2.

s8.gif
 

Figure 8.

Now change slider3 values, you will see the color of Ellipse will be change according slider3. 
 

s9.gif
 

Figure 9.

Now change slider1, silider2 and slider3 values, you will see the color of Ellipse will be change accordingly. 
 

s10.gif
 

Figure 10.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.