Changing the angle of a UIElement

Question

I have this code:

RotateTransform transform = myImage.RenderTransform as RotateTransform;
transform.Angle = 25.0;
myImage.RenderTransform = transform;

Which sets the Angle of my Image element.. It works, however it doesn't move much as I expected.

I was just wondering as to whether the Angle is set on the basis of the right hand corner of the image? So, does it rotate the image 25 degrees from the right hand side of the image?

So can't you just derive it from the result? it rotates clock-wise by the `Angle`. *it doesn't move much as I expected* -> so try increasing the angle. — King King, Oct 12 '15 at 16:04
At first, the line `myImage.RenderTransform = transform;` is redundant, as you are setting the Angle property of the transform that is already in place. The rotation is by default around the upper left corner. To change that, you could either set the element's `RenderTransformOrigin` in relative coordinates (e.g. (0.5, 0.5) for the center), or you set the RotateTransform's `CenterX` and `CenterY` properties in absolute coordinates. — Clemens, Oct 12 '15 at 16:25

score 4 · Accepted Answer · answered Oct 13 '15 at 00:13

The angle of rotation is 360 degrees clockwise. This means 25 degrees moves it, practically speaking, to around 1 o'clock. If you wanted to point to the right, it would be 90 degrees. Straight down would be 180 degrees.

Make sense? Look at this:

Here's some code to help you test:

<StackPanel Width="200" Margin="0,50">
    <Grid Width="100" Height="100" Background="SteelBlue" RenderTransformOrigin=".5,.5">
        <UIElement.RenderTransform>
            <RotateTransform Angle="{Binding Value, ElementName=MySlider}" />
        </UIElement.RenderTransform>
        <Line HorizontalAlignment="Center" VerticalAlignment="Top"
                Stroke="Goldenrod" StrokeThickness="4"
                X1="2" X2="2"
                Y1="0" Y2="40" />
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">
            <Run Text="{Binding Value, ElementName=MySlider}" />
            <Run Text="degrees" />
        </TextBlock>
    </Grid>
    <Slider x:Name="MySlider" Maximum="360" Minimum="0" Value="25" />
</StackPanel>

Be sure and notice that RenderTransformOrigin=".5,.5" bit. That is going to be really important to you because it determines where the rotation axis is. The values are from 0 to 1. So 0,0 is basically top/left and 1,1 is bottom/right. That makes .5,.5 smack in the middle.

Best of luck!

Changing the angle of a UIElement

1 Answers1