Rotating image on button click WPF

Question

I have included images on a canvas on my WPF user control:

<Canvas>
 <Thumb Canvas.Left="19" Canvas.Top="-7" Canvas.ZIndex="99"  DragDelta="Thumb_DragDelta">
 <Thumb.Template>
       <ControlTemplate>
           <Image Name="Image1" Source="/Images/Image1.png" Height="120" Width="242" Margin="63,180,696,393" />
        </ControlTemplate>
 </Thumb.Template>
 </Thumb>
 <Thumb Canvas.Left="52" Canvas.Top="6" DragDelta="Thumb_DragDelta">
 <Thumb.Template>
        <ControlTemplate>
         <Image Name="Image2" Source="/Images/Image2.png" Height="120" Width="205" Margin="760,184,74,397" />
        </ControlTemplate>
  </Thumb.Template>
  </Thumb>
  <Thumb Canvas.Left="21" DragDelta="Thumb_DragDelta" Canvas.Top="-18">
  <Thumb.Template>
        <ControlTemplate>
             <Image Name="Image3" Source="/Images/Image3.png" Height="124" Width="260" Margin="82,426,697,151" />
        </ControlTemplate>
   </Thumb.Template>
   </Thumb>
   <Thumb Canvas.Left="30" Canvas.Top="1" DragDelta="Thumb_DragDelta">
   <Thumb.Template>
        <ControlTemplate>
        <Image Name="Image4" Source="/Images/Image4.png" Height="124" Width="255" Margin="744,341,39,236" />
        </ControlTemplate>
   </Thumb.Template>
   </Thumb>
</Canvas>

I have then included the following in the code behind, so that these thumb images can be moved around on screen, which works fine.

// Move images on canvas
    private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
    {
        UIElement thumb = e.Source as UIElement;

        Canvas.SetLeft(thumb, Canvas.GetLeft(thumb) + e.HorizontalChange);
        Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
    }

Does anyone know a quick add where I can add to this code with the thumbs on the canvas so that I have the option to rotate these images on a button click in different directions and different angles?

Thanks

Maybe this post will get you going: http://stackoverflow.com/questions/7228373/how-to-make-a-image-swivel-in-wpf. — Tor Langlo, Apr 30 '13 at 14:26

score 2 · Accepted Answer · answered Apr 30 '13 at 20:35

2

You may assign a RotateTransform to the RenderTransform property of your Thumbs and modify the Angle of the RotateTransform in an event handler:

<Thumb Canvas.Left="52" Canvas.Top="7" RenderTransformOrigin="0.5,0.5"
       DragDelta="Thumb_DragDelta" MouseDoubleClick="Thumb_MouseDoubleClick">
    <Thumb.RenderTransform>
        <RotateTransform/>
    </Thumb.RenderTransform>
    <Thumb.Template>
        ...
    </Thumb.Template>
</Thumb>

The event handler may look like this:

private void Thumb_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
    var thumb = e.Source as UIElement;
    var transform = thumb.RenderTransform as RotateTransform;
    transform.Angle += 90;
}

You should however change the large Margin values on your Thumbs, as they affect the rotation center.

answered Apr 30 '13 at 20:35

Clemens

123,504
12
155
268

Thank you for your suggestion Clemens, that rotates the thumb around the center of my user control, do you know how I can edit this to rotate around the centre of the image itself. Thanks for your help so far :) – HHH May 02 '13 at 19:41
1

That's what I meant with changing the large Margins. You may however remove the RenderTransformOrigin and play around with the RotateTransform's CenterX and CenterY properties. – Clemens May 02 '13 at 21:03
Ok no problem I get you now. Thank you for your help :) – HHH May 03 '13 at 09:21

score -1 · Answer 2 · answered Apr 30 '13 at 13:28

-1

  Canvas container = new Canvas();
  container.Children.Add(image);
  container.Arrange(new Rect(0, 0, source.PixelWidth, source.PixelHeight));

  // render the result to a new bitmap. 
  RenderTargetBitmap target = new RenderTargetBitmap(targetWidth, targetHeight,       sourceDpiX, sourceDpiY, PixelFormats.Default);
  target.Render(container);

RenderTargetBitmap can be use it in place of a BitmapSource in any control.

answered Apr 30 '13 at 13:28

Shafqat Masood

2,532
1
17
23

Nice, but this does not answer the OP's question AT ALL. – Federico Berasategui Apr 30 '13 at 13:31
this can be added to the button click event – Shafqat Masood Apr 30 '13 at 13:40
I am not sure what you mean. How will this allow me to rotate the images? The code doesn't work - saying most of the variables do not exist in the current context. – HHH Apr 30 '13 at 13:47
1

Where is the rotation? This answer doesn't make sense. – Clemens Apr 30 '13 at 15:07
That's exactly what you have to do, except that you don't need to bind the RenderTransform property. Just assign a RotateTransform. – Clemens Apr 30 '13 at 15:44
Thank you @Clemens, do you know of any good examples of using RenderTransform in this way? – HHH Apr 30 '13 at 16:51

Rotating image on button click WPF

2 Answers2