Manipulating Images in Windows Surface 2.0 (rotation)

Question

I am using c# wpf for windows surface 2.0.

I have been working with a set of images that i import in the xmpl file.

I found some examples for text, but for the images they used GDI+ to manipulate images and animate them, but I do not want that.

The main thing that I want to do now is to rotate(transform rotate) an image and show that it is rotating.

Here is how I am addressing the images:

Canvas.SetTop(image1, 0);
Canvas.SetLeft(image1, 200);

Any help would be much appreciated.

Thank you.

Answer 1

Your question is not very specific and there are a lot of ways to animate the rotation of an image.

A simple approach would be to assign a RotateTransform to the RenderTransform of your Image controls and then animate the Angle property of these RotateTransforms.

<Image x:Name="image" Source="..."
       RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <RotateTransform/>
    </Image.RenderTransform>
</Image>

Start the animation in code like this:

var transform = (RotateTransform)image.RenderTransform;
var animation = new DoubleAnimation(360, TimeSpan.FromSeconds(5));
transform.BeginAnimation(RotateTransform.AngleProperty, animation);

---

You may start reading about animations in WPF in the Animation Overview article on MSDN. The Transforms Overview article may also be helpful.

Answer 2

If you want to rotate your image automatically and without user interaction, check Clemens' answer. However if you want to rotate with touch manipulations, I find it easy to put the image in a ScatterViewItem like so:

<s:ScatterView>
    <s:ScatterViewItem CanMove="False" CanScale="False">
        <s:ScatterViewItem.Background>
            <ImageBrush ImageSource="yourImage.png" Stretch="UniformToFill"/>
        </s:ScatterViewItem.Background>
    </s:ScatterViewItem>
</s:ScatterView>

Of course, you have the overhead of having to put in a ScatterView and its content