How to keep rotating image or canvas

Question

This code only fire once to rotate the canvas. Why it does not rotate when user press the rotate button second time?

--update with button

<AppBarButton x:Name="CamRotate90" Margin="0,2,2,0" Width="90" Height="90" FontSize="16"  Label="Rotate-Right" Icon="Rotate" Click="CamRotate90_Click">
</AppBarButton>




<Canvas  x:Name="canvas" Margin="231,28,321,111" Width="700" Height="525" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0">
    <Image Canvas.Top="0" Canvas.Left="0" Margin="0" x:Name="preview" Width="700" Height="525"  Stretch="UniformToFill" >
    </Image>
 </Canvas>


 private void CamRotate90_Click(object sender, RoutedEventArgs e)
        {

            CompositeTransform ct = new CompositeTransform();
            ct.CenterX = canvas.ActualWidth / 2;
            ct.CenterY = canvas.ActualHeight/2;
            ct.Rotation = 90;

            canvas.RenderTransform = ct;          


        }

Try += 90? Also, drop your button definition in the code above so we check the event handler is correctly defined. — kidshaw
You're creating a new transform object each time so of course += wouldn't work. Sorry. Instead, keep a counter in your class of each time the button is clicked then set the transform to that x 90. — kidshaw

Rob Caplan - MSFT Rob Caplan - MSFT · Accepted Answer · 2014-11-06T03:34:40

Instead of replacing the RenderTransform each time create the RenderTransform once and reuse it:

Xaml:

<Canvas x:Name="canvas" Margin="231,28,321,111" Width="700" Height="525" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0">
    <Canvas.RenderTransform>
        <CompositeTransform />
    </Canvas.RenderTransform>
    <Image Canvas.Top="0" Canvas.Left="0" Margin="0" x:Name="preview" Width="700" Height="525"  Stretch="UniformToFill" >
    </Image>
</Canvas>

Code:

private void CamRotate90_Click(object sender, RoutedEventArgs e)
{
    CompositeTransform ct = canvas.RenderTransform as CompositeTransform;
    if (ct != null) // Just to make sure
    {
        ct.CenterX = canvas.ActualWidth / 2;
        ct.CenterY = canvas.ActualHeight / 2;
        ct.Rotation += 90;
    }
}

How to keep rotating image or canvas

1 Answers