Using RotationX to rotate Objects in Silverlight

In this tutorial we will rotate an image with a slider control. This is the 2nd tutorial of image transformations, the first tutorial ‘Scaling Objects with a Slider control in Silverlight’

Steps
1- Place an image on the stage
2- on the image add a PlaneProjection, this can easily be done by editing the Projection / Rotation / X in the properties panel
3- name RotationX to x:Name=”rotateX”
4- add a slider to the stage
5- name the slider x:Name=”rotateXSlider”
6- on the slider set ValueChanged=”changeRotateX”

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 Rotate X slider to rotate the image

XAML code

<Image Margin="49,-14,54,96" RenderTransformOrigin="0.5,0.5" Source="hulu.jpg" Stretch="Fill" d:LayoutOverrides="Width">
	<Image.Projection>
		<PlaneProjection x:Name="rotateX" RotationX="1"/>
	</Image.Projection>
</Image>
<Slider x:Name="rotateXSlider" Height="26" Margin="282,0,218,32" VerticalAlignment="Bottom"  Maximum="180" ValueChanged="changeRotateX" Style="{StaticResource SliderStyle1}"/>

C# code

private void changeRotateX(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
	rotateX.RotationX = rotateXSlider.Value;
	rotateX.RotationX = rotateXSlider.Value;
}