Using RotationX to rotate Objects in Silverlight

Sun, Dec 13, 2009

Silverlight, Tutorials

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

, , , ,

4 Responses to “Using RotationX to rotate Objects in Silverlight”

  1. Arun Mahendrakar Says:
    December 13th, 2009 at 4:28 pm

    Hi Paul,

    There’s something skewed in the application. Try this:
    Zoom out the image fully and then do the RotateX. After this, House’s bottom image gets cut. On a typical RotateX, that should not happen. Let me know (http://twitter.com/nmarun53), if I’m seeing this the wrong way.

    Arun

  2. admin Says:
    December 13th, 2009 at 4:41 pm

    Hi Arun,

    I tried your instructions on Firefox and IE and I cannot duplicate. Did you slide the rotate X all the way left and right? Can you post a screen shot of what you are seeing?

    thanks,
    Paul

  3. Arun Mahendrakar Says:
    December 13th, 2009 at 5:00 pm

    See the screenshots:

    http://twitpic.com/tf4gt
    and
    http://twitpic.com/tf4me

    In the second image, see that House’s bottom image is getting cut.

    Now that I’m thinking more about it, that is not an error, just a lil shift of coordinates.

    Arun

  4. admin Says:
    December 13th, 2009 at 5:24 pm

    Arun,

    yes, you scaled the image larger than the Silverlight object, scaling the image down will bring the entire image back into view.

    thanks for the screen shots, I appreciate it

    Paul


Leave a Reply