locked
How to rotate an Image base on 90,180,270 degrees

    Question

  • I have these :

    Image inside a Canvas

    How to I rotate the image 90,270,180 clockwise or anti-clockwise. when I save the image, the canvas position and rotation will be the same as the image.

     <Canvas x:Name="canvas" Background="White" Margin="200,0,0,0"  HorizontalAlignment="Left" VerticalAlignment="Top">

         <Grid  x:Name="canvasGrid" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Top" >
              <Image  x:Name="capturedImage" Width="600" Height="450" HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="Uniform"  />
           </Grid>

     </Canvas>

    I use the below code, some part of the photo cannot be viewed as the space is not enough.

    How to rotate the image at the center so that in all possible angle (90,180,270,360) clockwise or anti-clockwise there is enough space to display the image.

    private void Button90_Click(object sender, RoutedEventArgs e)
            {
                capturedImage.RenderTransform = new RotateTransform() { CenterX = 0.5 , CenterY =0.5, Angle = 90 };
            }

    Thanks

    Thursday, October 30, 2014 4:21 AM

Answers

  • Hi FireDance,

    I can see the both of them are rotating together. I changes the code a little as the following.

     <Canvas Width="500" Height="400" Background="LightGray" RenderTransformOrigin="0.5, 0.5">

                    <Canvas.RenderTransform>

                        <RotateTransform x:Name="rotateTransform"/>

                    </Canvas.RenderTransform>

                    <TextBlock Text="hello,world" Canvas.Left="77" Canvas.Top="55"></TextBlock>

                    <Image Source="Assets/1.jpg" Width="300" Canvas.Left="160" Canvas.Top="55" >

                    </Image>

                </Canvas>

    > so when width 773 become height 773 at 90 degree rotate, the canvas or image will  cut off when rotate begin at the Landscape (773x500) at (0,0) , the other part will be gone.

    Yes, you need to check the size of canvas after rotate and then make some appropriate modification. Use ActualWidth and ActualHeight property to retire the size of window or some controls.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Saturday, November 08, 2014 3:21 AM
    Moderator

All replies

  • Hi,

    This only move the photo but not the canvas and the Grid.

    private void Button90_Click(object sender, RoutedEventArgs e)
            {
      capturedImage.RenderTransform = new RotateTransform() { CenterX = 0.5 , CenterY =0.5, Angle = 90 };
            }

    How to Rotate all of them together?

    <Canvas x:Name="canvas" Background="White" Margin="200,0,0,0"  HorizontalAlignment="Left" VerticalAlignment="Top">

         <Grid  x:Name="canvasGrid" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Top" >
              <Image  x:Name="capturedImage" Width="600" Height="450" HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="Uniform"  />
           </Grid>

     </Canvas>

    I need to use RenderTargetBitmap on canvas (this will include the photo )

    Thanks

    Thursday, October 30, 2014 10:09 AM
  • Hi FireDance,

    Canvas control has the RenderTransform property, you can set it to rotate the canvas control like image control. Try the following code snippet.

    In XAML.

    <StackPanel Margin="0 100 0 0">
                <Button Content="hello" Click="Button_Click"></Button>
                <Canvas Width="300" RenderTransformOrigin="0.5, 0.5">
                    <Canvas.RenderTransform>
                        <RotateTransform x:Name="rotateTransform"/>
                    </Canvas.RenderTransform>
                    <Image Source="Assets/1.png" Width="300" >
                    </Image>
                </Canvas>
            </StackPanel>
    

    In CS.

    private void Button_Click(object sender, RoutedEventArgs e)
            {
                rotateTransform.Angle += 90;
            }
    

    If you still have questions about this problem, please post more information about your scenario.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Friday, October 31, 2014 6:42 AM
    Moderator
  • Hi Herro ,

    I tried your code. The Canvas move but the Image will not.

    I need to Scrap the Canvas or use the RenderTargetBitmap on Canvas ( save it as image). So, I need the Canvas to contain the image. Thus, I need both of them rotate in sync.

    If use this, the Image will not be contained inside the canvas.

      <Canvas Width="300" RenderTransformOrigin="0.5, 0.5">
                   
    <Canvas.RenderTransform>
                       
    <RotateTransform x:Name="rotateTransform"/>
                   
    </Canvas.RenderTransform>
                   
    <Image Source="Assets/1.png" Width="300" >
                   
    </Image>

    also, I need to rotate them base on the available space such as 900 (w) x 750 (h). So,I need to rotate at the center of the Canvas & Image. For example (773 x 500 same for canvas and image) , so when width 773 become height 773 at 90 degree rotate, the canvas or image will  cut off when rotate begin at the Landscape (773x500) at (0,0) , the other part will be gone.

    Thanks



    • Edited by FireDance Friday, October 31, 2014 8:55 AM
    Friday, October 31, 2014 8:48 AM
  • Hi FireDance,

    I can see the both of them are rotating together. I changes the code a little as the following.

     <Canvas Width="500" Height="400" Background="LightGray" RenderTransformOrigin="0.5, 0.5">

                    <Canvas.RenderTransform>

                        <RotateTransform x:Name="rotateTransform"/>

                    </Canvas.RenderTransform>

                    <TextBlock Text="hello,world" Canvas.Left="77" Canvas.Top="55"></TextBlock>

                    <Image Source="Assets/1.jpg" Width="300" Canvas.Left="160" Canvas.Top="55" >

                    </Image>

                </Canvas>

    > so when width 773 become height 773 at 90 degree rotate, the canvas or image will  cut off when rotate begin at the Landscape (773x500) at (0,0) , the other part will be gone.

    Yes, you need to check the size of canvas after rotate and then make some appropriate modification. Use ActualWidth and ActualHeight property to retire the size of window or some controls.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Saturday, November 08, 2014 3:21 AM
    Moderator