Scaling Objects with a Slider control in Silverlight

In this tutorial we will scale an image with a slider control.

Steps
1- Place an image on the stage
2- add a transform group to that image, this can easily be accomplished by editing the scale property
3- name ScaleX to x:Name=”scaleTransform”
4- add a slider to the stage
5- name the slider x:Name=”scaleSlider”
6- on the slider set ValueChanged=”changeScale”

View all parts of the tutorial
Part 1 – Scaling Objects with a Slider control in Silverlight
Part 2 – Using RotationX to rotate Objects in Silverlight
Part 3 – Using RotationY to rotate Objects in Silverlight

Use the slider to scale the image

XAML code

<Rectangle Height="50" Margin="288,176,288,0" VerticalAlignment="Top" d:LayoutOverrides="Height" RenderTransformOrigin="0.5,0.5">
	<Rectangle.Fill>
		<ImageBrush ImageSource="hulumediaplayer.jpg"/>
	</Rectangle.Fill>
	<Rectangle.RenderTransform>
		<TransformGroup>
			<ScaleTransform ScaleX="7" ScaleY="7" x:Name="scaleTransform"/>
		</TransformGroup>
	</Rectangle.RenderTransform>
</Rectangle>
<Slider x:Name="scaleSlider" Height="27" Margin="278,0,222,36" Style="{StaticResource SliderStyle1}" VerticalAlignment="Bottom" ValueChanged="changeScale" Width="140"/>

C# code

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ScaleObject
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
			scaleSlider.Value = 7;
		}

		private void changeScale(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
		{
			scaleTransform.ScaleX = scaleSlider.Value;
   			scaleTransform.ScaleY = scaleSlider.Value;
		}
	}
}