Silverlight- Slider Control Part 2

Here is Part 1

In this article we will be seeing how to create Silverlight Slider control to zoom in and out the image.

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>

Steps Involved:

Creating a Silverlight Application:

1. Open Visual Studio 2010.
2. Go to File => New => Project.
3. Select Silverlight from the Installed templates and choose the Silverlight Application template.
4. Enter the Name and choose the location.
5. Click OK.
6. In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site".
7. Click OK.

Creating the UI:

Open MainPage.xaml file and replace the code with the following.

<UserControl x:Class="Image_Slider.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="/Image%20Slider;component/Images/Desert.jpg"
               Canvas.Left="40"
               Canvas.Top="30"
               Height="40"
               Width="40">
        </Image>
        <Slider Name="slider"
                Canvas.Top="210" 
                Background="Transparent"
                Height="25"
                Width="150"
                Maximum="0"
                Minimum="100" 
                ValueChanged="Slider_ValueChanged" >
        </Slider>
    </Canvas>
</UserControl>


Open MainPage.xaml.cs file and replace the code with the following.

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);
            }
        }
    }