Slider control in Silverlight 3

In thishis article you will learn how to use Slider control in Silverlight 3.

The Slider control in Silverlight 3 enables you to select from a range of values by sliding it along a track. You can create a horizontal or vertical slider, you can specify the range of values and the precision of movement too. To demonstrate the use of the Slider control, let us create a Image expander example in which an image is expanded or decreased in size depending upon the slider value.

Create a Silverlight 3 application and replace the Grid tag with the Canvas tag. Drag and drop the Slider from the Toolbox into your XAML code (between the Canvas tags). Also drag and drop an Image control.

Configure the properties of the controls as shown below.

<UserControl x:Class="Imager.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:DesignWidth="640" d:DesignHeight="480">
    <Canvas x:Name="LayoutRoot" Width="640" Height="480">
    <Image Name="img" Source="flower2.jpg" Canvas.Left="40" Canvas.Top="30" Height="40" Width="40">
    </Image>
        <Slider Name="slider"  Background="Transparent" Height="25" Width="150" Maximum="150" Minimum="0" SmallChange="5" ValueChanged="Slider_ValueChanged" ></Slider>
    </Canvas>
</UserControl>

What we have done here in the code above:

1. a canvas of height 480 and width 640
2. Created an image with source as "flower2" and height and width as 40 and positioned it on the canvas at 40,30 location.
3. Created a Slider control with transparent background, maximum 150 and minimum 0, small change (precision of movement) as 5 and height and width as 25 and 150 respectively.
4. Created an event handler for Value Changed event of Slider.

Now open the MainPage.xaml.cs and add the following code:

public partial class MainPage : UserControl
    {
        double start, end, height, width;
        public MainPage()
        {
            InitializeComponent();
            //original values of the slider
            start = slider.Minimum;
            end = slider.Maximum;
                        //original height and width of the image
            height = img.Height;
            width = img.Width;
        }

        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            //if slider has reached the beginning
            if (e.NewValue == start)
            {
                img.Height = height;
                img.Width = width;
            }
                       //if slider has moved forward
            if (e.NewValue > e.OldValue)
            {
                img.Height = height + e.NewValue;
                img.Width = width + e.NewValue;
            }
            else //if slider has moved backward
            {
                img.Height = img.Height - (e.OldValue-e.NewValue);
                img.Width = img.Width - (e.OldValue - e.NewValue);
            }
        }
}

The logic in this file is self explanatory from the comments.

When you build and execute your solution and move the slider, you will see the image increasing or decreasing in size.

This was a simple demonstration. To customize the Slider control, you can use its various properties. You can also enhance its design characteristics in Blend 3 if required.

Conclusion: This article explored how to use Slider control in Silverlight 3.